It’s larger than all the others, how would I make it the same size? While keeping everything even.
The middle is 10px while the outer border lines are all 6px.
code: https://jsfiddle.net/dzat42w0/
<svg width="170" height="170" viewBox="0 0 170 170">
<rect x="0" y="0" width="170" height="170" fill="red" />
<rect x="5" y="5" width="160" height="160" fill="black" />
<rect x="10" y="10" width="150" height="150" fill="teal" />
<rect x="15" y="15" width="140" height="140" fill="black" />
<rect x="20" y="20" width="130" height="130" fill="red" />
<rect x="25" y="25" width="120" height="120" fill="black" />
<rect x="30" y="30" width="110" height="110" fill="teal" />
<rect x="35" y="35" width="100" height="100" fill="black" />
<rect x="40" y="40" width="90" height="90" fill="red" />
<rect x="45" y="45" width="80" height="80" fill="black" />
<rect x="50" y="50" width="70" height="70" fill="teal" />
<rect x="55" y="55" width="60" height="60" fill="black" />
<rect x="60" y="60" width="50" height="50" fill="red" />
<rect x="65" y="65" width="40" height="40" fill="black" />
<rect x="70" y="70" width="30" height="30" fill="teal" />
<rect x="75" y="75" width="20" height="20" fill="black" />
<rect x="80" y="80" width="10" height="10" fill="red" />
</svg>