For what it's worth, SVG does also directly support circular or elliptical arcs, as an alternative to a parametric-cubic approximation. Though there are plenty of contexts where sticking to Bézier curves is preferable, e.g. in drawing software where the resulting curve should be user editable afterward.

Indeed, my goal was definitely to keep things editable and to explain how to do it when you don't have access to an Arc command. And also because, I have to admit, it was just fun to do :)

Somehow the fonts on this one are broken on Firefox for me. They even bleed into other cells! https://imgur.com/a/MfWlNAW

Oops, fixed it :) thanks for the notice, I initially tested things on firefox as well but didn't once more before publishing, sorry about that

How BC is being calculated? (In the final formula we use it in order to calculate CE)

You’re right, it’s not completely explicit, in our particular case it's just the value set with the `Maximum length` slider. Although, I edited to notebook to develop a bit more. Does that help, David?

I understand it better now, thank you!

Could you explain please, why bd = Math.cos(angle / 2) ? What trigonometry rule do you use for this?

Sure thing Dmitrii! The trick is to consider the CBD right-angled triangle, where the angle CBD = α / 2, it then follows that BD = cos(α / 2)

This is so awesome. A very important piece of the calculation is const boxWidth = svgWidth; const convertToSvgCoord = (valueRadius) => (valueRadius / boxWidth) * viewBoxWidth; However, I am working outside of Observable and my svg is constructed with only viewBox; therefore I can't obtain the ratio of radius to svgWidth.Is there a way to account for such scenarios in the code. Thank you in advance.

Sorry for the delay, I guess you could get the element dimensions by using element.getBoundingClientRect() and use these to compute the appropriate ratio. Let me know if that helps!