Recent carykh’s Adobe Animate’s circles aren’t real circles video demonstrates how Adobe Animate approximates circles with Bézier curves. At the end of the video Cary demonstrated what happens to the shape if control points are pushed to extreme, but using imprecise mouse manipulation, the effect wasn’t quite precise. The effect can be achieved with SVG1 quite easily and so I present it below:Demonstration of a circle approximated via eight cubic Bézier curves as the handles are pushed to extreme way past when the shape resembles a circle. The graphic includes a purple circle; a red octagon inscribed in the circle; and a green spline which consists of eight cubic Bézier curves with anchor points in vertices of the octagon.
As I looked more into the subject I’ve decided to write a full series about approximating circles with Bézier curves with different degrees. The subject is more complex than one might imagine and it wouldn’t quite fit as a single post. That’s why I’ve decided to split it into multiple articles with this post acting as a table of contents.2 In subsequent weeks I’ll publish the following:
- ‘Drawing circles with polygons’ which turns out to be more involved with more than one way of doing it. I will also present mathematically ‘best’ way to draw a polygon so that it resembles circle the most.
- ‘Drawing circles with quadratic Bézier curves’ with discussion of smoothness and mathematical derivation of the best parameters to use depending on number of segments in the curve.
- ‘Drawing circles with cubic Bézier curves’ which allow for more degrees of freedom and thus looking at more constraints and trade-offs in drawing a circle approximation.
Subscribe to the Atom feed to get notified once those are out, or come back in a month if the subject interests you.
1 Yes, I’m one of those who writes SVG files by hand. But even then, syntax of paths (which is also used in some CSS functions) is a struggle. For anyone trying to understand how path commands work, I recommend Myriam Frisano’s Decoding the SVG path element: curve and arc commands article. ↩
2 Honestly, part of the reason for me publishing this introductory post is to force myself to finish the series. I’ve been working on it for about a month at this point and without a deadline I’ll probably continue indefinitely tweaking each part without ever publishing anything. ↩