How to make an svg circle with edge divided into 3 parts? - css

Question

I'm trying to create a circle with only its edge, divided into 3 parts.
The result of my attempt:
Not great, what I'm trying to do is have those 3 parts come together to form the edge of a circle, while having some space between each part (as you can see on the left, that gap is what it should look like)
I'm doing this using svg with 3 paths:
<svg viewBox="0 0 100 100">
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" stop-color="#56c4fb" />
<stop offset="100%" stop-color="#0baeff" />
</linearGradient>
<path className="grey" d="M50,90 A30,25 0 0,1 10,90" fill="none" />
<path className="grey" d="M5,80 A30,25 0 0,1 20,50" fill="none" />
<path className="grey" d="M50,50 A30,25 0 0,1 80,90" fill="none" />
</svg>
Is manual calculation the way to go in this case, in order to create the different paths? What makes is complex for me is having to account for the small gaps between each part (as you can see the gap on the left, this is how it should be drawn)
What would be the easiest way to calculate the coordinates of the 3 paths, so they form a circle from 3 prats with small gaps between them?

Answer 1

You can do this almost completely in CSS. Draw a circle (or following your example, an ellipse), define an attribute pathLength for further use in CSS, and then make a stroke-dasharray that equally divides the stroke in three dashes and three gaps.
In this example, the total path length is treated as if it was 30. A dash length of 7 and a gap length of 3 add to 10, so can be repeated three times for the total of the circumference. If you wanted to divide the stroke in dashes of uneven length, the dasharray can contain individual lengths for each of them, like this – uneven positions are dashes, even positions gaps inbetween:
stroke-dasharray: 7 3 9 3 5 3;
The first dash starts at the right side and goes down. A positive stroke-dashoffset moves the start point counterclockwise.
svg {
height: 100vh;
}
.grey {
fill: none;
stroke: url(#gradient);
stroke-width: 8;
}
.dashed {
stroke-linecap: round;
stroke-dasharray: 7 3;
stroke-dashoffset: 2;
}
<svg viewBox="0 0 100 100">
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" stop-color="#56c4fb" />
<stop offset="100%" stop-color="#0baeff" />
</linearGradient>
<ellipse class="grey dashed" pathLength="30" cx="50" cy="50" rx="30" ry="25" />
</svg>

Answer 2

Can do, for example, in Figma?
<svg width="411" height="410" viewBox="0 0 411 410" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M389 205C389 229.032 384.267 252.828 375.07 275.031C365.873 297.234 352.394 317.407 335.401 334.401C318.407 351.394 298.234 364.873 276.031 374.07C253.828 383.267 230.032 388 206 388"
stroke="black"
stroke-width="44"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M114.5 46.5174C135.312 34.5014 158.287 26.7024 182.114 23.5656C205.94 20.4288 230.151 22.0157 253.364 28.2356C276.577 34.4555 298.338 45.1866 317.403 59.8163C336.469 74.446 352.467 92.6878 364.483 113.5"
stroke="black"
stroke-width="44"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M114.483 363.465C93.6704 351.449 75.4287 335.452 60.799 316.386C46.1693 297.32 35.4382 275.56 29.2182 252.347C22.9983 229.134 21.4115 204.923 24.5483 181.096C27.6851 157.27 35.4841 134.295 47.5 113.483"
stroke="black"
stroke-width="44"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>