Is there a simplier way to write this code?

Preferably using way less code?


<svg width="102" height="102" viewBox="0 0 102 102">
  <rect x="0" y="0" width="102" height="102" fill="red" />
  <rect x="3" y="3" width="96" height="96" fill="green" />
  <rect x="6" y="6" width="90" height="90" fill="orange" />
  <rect x="9" y="9" width="84" height="84" fill="red" />
  <rect x="12" y="12" width="78" height="78" fill="green" />
  <rect x="15" y="15" width="72" height="72" fill="orange" />
  <rect x="18" y="18" width="66" height="66" fill="red" />
  <rect x="21" y="21" width="60" height="60" fill="green" />
  <rect x="24" y="24" width="54" height="54" fill="orange" />
  <rect x="27" y="27" width="48" height="48" fill="red" />
  <rect x="30" y="30" width="42" height="42" fill="green" />
  <rect x="33" y="33" width="36" height="36" fill="orange" />
  <rect x="36" y="36" width="30" height="30" fill="red" />
  <rect x="39" y="39" width="24" height="24" fill="green" />
  <rect x="42" y="42" width="18" height="18" fill="orange" />
  <rect x="45" y="45" width="12" height="12" fill="red" />
  <rect x="48" y="48" width="6" height="6" fill="green" />

Look to your moniker @javascriptcoding5678 :slight_smile:

1 Like

If you don’t want to (or can’t) use JavaScript you could use some HTML preprocessor (e.g. pug):

1 Like

It’s not a lot of code to make 1 square, but you made a 17 square design. I can only suggest you make it an algorithm in your favorite programming or templating language.

Why did you choose those dimensions. I used to choose odd sizes because I was used to pixels in a bitmap which don’t scale well. Now that you’re in svg pick whatever size you want to make the math easy to do in your head. Then the svg can scale to any size afterward.