CODEWITHSUNDEEP
svg
J V
J V

Reputation: 11936

Twice-interrupted circular path in SVG

I want to create a circular path with multiple "Holes" in it, preferably without using masks and the like.

Currently, what I've got is this:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 400 400">
    <path d="M 100 100 A 90 90 0 1 0 200 100 M 110 90 A 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" />
</svg>

As you can see, this relies on manually moving the start of the new arc, which results in the arc being off.

I'd rather not have to do a lot of math to get the position for the move just right, so is there a sort of "Arc move" I can use?

If not, how does the math for this work (I'm very rusty in geometry stuff)

Upvotes: 0

Views: 196

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The simplest way to achieve what you want is probably just to use a dash array.

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 400 400">
    <path d="M 100 100 A 90 90 0 1 0 200 100 M 110 90 A 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" />
    <path d="M 60 175 A 90 90 0 0 1 240 175 A 90 90 0 0 1 60 175" stroke="red" stroke-width="5" fill="transparent" stroke-dasharray="88 14 78 14 372"/></svg>

Upvotes: 1

Related Questions