SVG concentric border widths

Community
#1

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>
#2

That it not what I am seeing. :unhappy:

Try removing this…

width="170" height="170"

…and then view the svg in your browser instead
of that pokey jsfidle and you will see that your
assertions are incorrect.

svg
svg561×561 982 Bytes

Perhaps it’s just an optical illusion.:biggrin:

coothead

#3

@coothead yeah I didn’t see anything larger or smaller than the rest either :slight_smile:

#4

You are young and probably blessed with 20/20 visual acuity. :biggrin:
Whereas I am very old and can barely…

coothead

#5

:joy: yes, true lol. But even I… my eyes sometimes wanders off deeply…very, very deeply… :face_with_monocle: :nerd_face: :joy:

#6

“With her one eye in the pot and the other up the chimney.” :wonky:

The Drummer and the Cook

coothead

1 Like
#7

I shall read that soon, thank you :slight_smile:

#8

Hi there asasass,

how about trying circles instead of squares?

Full Page View:-
messing about with svg

Editor View:-
messing about with svg

coothead

2 Likes
#9

That’s mesmerising, I just wish I could find an app where it would be useful :slight_smile:

#11

Hi there asasass,

how about trying a pentagon?

Full Page View:-
messing about with svg 2

Editor View:-
messing about with svg 2

coothead

#12

You don’t have “border lines”.

You have a series of overlaying sequentially smaller positioned squares.

eg. at 40,40 (40 px from top, 40 px from left) there is a 90x90 square. On top of that there is a 80x80 square positioned at 45,45

90 minus 80 is 10, and because the position is moved 5, the underlying square gives the visual impression of a 5 “border”

The last square is 10x10 hence it appears larger than the thickness of the illusory borders.