Mathieu Jouhet

Stencil all the things! Distributing circles around a shape

Rounding polygon corners

Union polygon and area of rectangles (line sweep algorithm)

SVG flowers

Blobsplosion

Drawing svg squircle shapes with javascript

Drawing and animating blobs with svg and javascript

Pendulum pendulus flexibile A pendulum simulation with canvas and javascript

Doodles

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.

Jacob Rus

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 :)

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.

smpa01

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!

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

Job van der Zwan

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)

David Locke

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?

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

Dmitrii Anikeichik

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)