Twice-interrupted circular path in SVG -
i want create circular path multiple "holes" in it, preferably without using masks , like.
currently, i've got this:
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewbox="0 0 400 400"> <path d="m 100 100 90 90 0 1 0 200 100 m 110 90 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" /> </svg>
as can see, relies on manually moving start of new arc, results in arc being off.
i'd rather not have lot of math position move just right, there sort of "arc move" can use?
if not, how math work (i'm rusty in geometry stuff)
the simplest way achieve want use dash array.
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewbox="0 0 400 400"> <path d="m 100 100 90 90 0 1 0 200 100 m 110 90 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" /> <path d="m 60 175 90 90 0 0 1 240 175 90 90 0 0 1 60 175" stroke="red" stroke-width="5" fill="transparent" stroke-dasharray="88 14 78 14 372"/></svg>
Comments
Post a Comment