Would it be possible to make this using SVG?

HTML & CSS
1

Code:


<style type="text/css"> 

html {
  width: 100%;
  height: 100%;
}

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
 
 
}

.box {
  box-shadow: 
0 0 0 5px #38761d,
0 0 0 10px black,
0 0 0 15px #1155cc,
0 0 0 20px black,
0 0 0 25px #38761d,
0 0 0 30px black,
0 0 0 35px #1155cc,
0 0 0 40px black,
0 0 0 45px #38761d,
0 0 0 50px black,
0 0 0 55px #1155cc,
0 0 0 60px black,
0 0 0 65px #38761d,
0 0 0 70px black,
0 0 0 75px #1155cc,
0 0 0 80px black,
0 0 0 85px #38761d;
}


</style>

</head>
<body>


<div class="box"></div>
1 Like
2

Done!

Code:

<svg style="width: 170px; height: 170px; background-color:#38761d ">
  <rect width="160" height="160" x="5" y="5" fill="black" />
  <rect width="150" height="150" x="10" y="10" fill="#1155cc" />
  <rect width="140" height="140" x="15" y="15" fill="black" />
  <rect width="130" height="130" x="20" y="20" fill="#38761d" />
  <rect width="120" height="120" x="25" y="25" fill="black" />
  <rect width="110" height="110" x="30" y="30" fill="#1155cc" />
  <rect width="100" height="100" x="35" y="35" fill="black" />
  <rect width="90" height="90" x="40" y="40" fill="#38761d" />
  <rect width="80" height="80" x="45" y="45" fill="black" />
  <rect width="70" height="70" x="50" y="50" fill="#1155cc" />
  <rect width="60" height="60" x="55" y="55" fill="black" />
  <rect width="50" height="50" x="60" y="60" fill="#38761d" />
  <rect width="40" height="40" x="65" y="65" fill="black" />
  <rect width="30" height="30" x="70" y="70" fill="#1155cc" />
  <rect width="20" height="20" x="75" y="75" fill="black" />
  <rect width="10" height="10" x="80" y="80" fill="#38761d" />
</svg>
3

This would be the right way.

<svg width="204" height="204" viewBox="0 0 204 204">
  <rect x="0" y="0" width="204" height="204" fill="#38761d" />
  <rect x="6" y="6" width="192" height="192" fill="black" />
  <rect x="12" y="12" width="180" height="180" fill="#1155cc" />
  <rect x="18" y="18" width="168" height="168" fill="black" />
  <rect x="24" y="24" width="156" height="156" fill="#38761d" />
  <rect x="30" y="30" width="144" height="144" fill="black" />
  <rect x="36" y="36" width="132" height="132" fill="#1155cc" />
  <rect x="42" y="42" width="120" height="120" fill="black" />
  <rect x="48" y="48" width="108" height="108" fill="#38761d" />
  <rect x="54" y="54" width="96"  height="96" fill="black" />
  <rect x="60" y="60" width="84" height="84" fill="#1155cc" />
  <rect x="66" y="66" width="72" height="72" fill="black" />
  <rect x="72" y="72" width="60" height="60" fill="#38761d" />
  <rect x="79" y="79" width="48" height="48" fill="black" />
  <rect x="86" y="86" width="36" height="36" fill="#1155cc" />
  <rect x="92" y="92" width="24" height="24" fill="black" />
  <rect x="98" y="98" width="12" height="12" fill="#38761d" />
</svg>
4

:wonky:

1 Like
5

This isn’t correct? I thought I was doing it the right way.

What did I do wrong?

6

Math error in the x and y columns

7

What exactly do you mean? Please explain.

Down 6, up 12, what’s wrong about that?

6, 12, 18…

12, 24, 36…

8

x and y columns… keep going…

9

Thanks, and fixed…

<svg width="204" height="204" viewBox="0 0 204 204">
  <rect x="0" y="0" width="204" height="204" fill="#38761d" />
  <rect x="6" y="6" width="192" height="192" fill="black" />
  <rect x="12" y="12" width="180" height="180" fill="#1155cc" />
  <rect x="18" y="18" width="168" height="168" fill="black" />
  <rect x="24" y="24" width="156" height="156" fill="#38761d" />
  <rect x="30" y="30" width="144" height="144" fill="black" />
  <rect x="36" y="36" width="132" height="132" fill="#1155cc" />
  <rect x="42" y="42" width="120" height="120" fill="black" />
  <rect x="48" y="48" width="108" height="108" fill="#38761d" />
  <rect x="54" y="54" width="96" height="96" fill="black" />
  <rect x="60" y="60" width="84" height="84" fill="#1155cc" />
  <rect x="66" y="66" width="72" height="72" fill="black" />
  <rect x="72" y="72" width="60" height="60" fill="#38761d" />
  <rect x="78" y="78" width="48" height="48" fill="black" />
  <rect x="84" y="84" width="36" height="36" fill="#1155cc" />
  <rect x="90" y="90" width="24" height="24" fill="black" />
  <rect x="96" y="96" width="12" height="12" fill="#38761d" />
</svg>
1 Like
10

:winky:

12

Should I be adding xmlns="http://www.w3.org/2000/svg" Every time I use svg?

What are your thoughts on this?
Is there a rule of thumb when it comes to this?

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.