Is there a simplier way to write this code?

[asasass]

Preferably using way less code?

code: https://jsfiddle.net/koezrw1a/

<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" />
</svg>

[Martyr2]

Less code while still being an svg element you mean or are you open to things like canvas? If staying svg, I wouldn’t say there is a way to do it in less code since svg consists of elements that describe the shapes and their coordinates. I mean you could do a polyline element, but that is just going to be one element with a ton of points in it and probably won’t be any shorter in the number of characters used.

[PaulOB]

You can do that with box-shadow as mentioned before and keep the html clean.

It’s probably the same amount of CSS as your html though. Or you can use the svg as a background image if you are concerned with the html.

In the end you are going to have to describe those colours and sizes somewhere so there’s not much chance to shorten anything by much.

[coothead]

@asasass

Preferably using way less code?

well, I don’t think that you can get less than this…

Full Page View:-
https://codepen.io/coothead/full/LYbryEQ

Editor View:-
https://codepen.io/coothead/pen/LYbryEQ

coothead