The previous article in the series explored drawing circles with linear Bézier curves. This article continues by showing how to use quadratic curves.

A quadratic Bézier curve uses three control points. The first and last points are the endpoints, while the middle one provides control over the curve’s shape. This additional control lets quadratic curves approximate curved shapes more accurately. Although they’re less expressive than higher-order curves, quadratic curves are widely used thanks to their balance of computational complexity and shape control — most notably in computer fonts (see Fig. 1) where the relative simplicity enables efficient rendering algorithms.¹

Some systems do not provide a circle primitive; in those cases, circles need to be approximated using different shapes. For example, many fonts are limited to quadratic Bézier curves,¹ and even though Adobe Animate includes a circle tool, it represents circles using cubic Bézier curves instead.² Such approximations are common in video games as well (see Fig. 1), where round objects still present rendering challenges.

This post is first in a series of articles about approximating circles. It introduces linear Bézier curves, and how to approximate a circle using linear Bézier curves. The next two articles cover quadratic and cubic curves, which produce progressively smoother results.

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 SVG¹ quite easily and so I present it below:

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:

1. ‘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.
2. ‘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.
3. ‘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.

Introduced last century, favicons help users identify tabs in a crowded browser. Originally limited to the ICO format, they can now leverage Scalable Vector Graphics (SVG). This vector format not only scales perfectly to different sizes but also unlocks dynamic features which this article explores, namely:

• colour scheme preference detection,
• language preference detection and
• animations.

In case you’ve missed it, issue #8 of the Paged Out! magazine is out. Marking that occasion, I thought I’d share my ntp-over-http Rust implementation which was featured there. Did you ever need to synchronise a machine’s time without access to NTP (maybe because of a blocked port)? That’s exactly what the tool can help with.

$ cargo install ntp-over-http
…
$ ntp-over-http
ntp-over-http: https://qwant.com/
2026-03-27 17:08:42 UTC

For more details, caveats and other approaches, have a look at the NTP-over-HTTP article in the magazine.

The previous article covered how to create a custom font with a chosen SVG image. While icon fonts are convenient for visual presentation, they can create accessibility challenges. For example, if the font isn’t loaded — whether due to browser settings or temporary network glitch — users are left with an unappealing missing character symbols. Additionally, screens may announce a cryptic symbol name when reading the web page, confusing users.

This article describes a method of addressing those issues through the use of ligatures. It’s building on the previous tutorial and assumes the custom icon font has already been created.

The advent of web fonts popularised the use of icon fonts, i.e. fonts that consist solely of symbols and images rather than letters. Icon fonts such as Pictos, Font Awesome and Lucide have become well-known alternatives to image sprites, offering greater convenience and versatility. However, despite the abundant choice, pre-made sets don’t always meet the requirements of a specific website.

This article demonstrates how to create a custom icon font using FontForge. It describes the steps of importing an SVG image into a glyph in a web font. A tailor-made font lets you select icons that perfectly match your website’s needs.

CMYK is a subtractive colour model commonly used in printing. Letters in the acronym stand for the four colours used in the model: Cyan, Magenta, Yellow and… uhm… blacK? The myth goes that using ‘B’ for black would be confusing (on account of blue and brown existing), so powers that be decided to use the last letter of the word ‘black’ in the acronym. This is not quite true.

In fact, K in CMYK stands for Key or Key Plate.

A decade ago, I had the pleasure of organise DressCode — an online competition designed spark teenage students’ interest in computer science. Its participants completed a series of programming challenges one of which was to implement a few sorting algorithms. To make it more engaging, I’ve created a JavaScript harness which visualised the algorithm by animating a clowder of longcats. Feedback was positive, I was told, with students appreciating the visual element.

I’ve finally dusted off and updated the code hoping it will be useful to, for example, computer science teachers. After all, learning sorting algorithms through an interactive animation is more engaging than working with static lists of numbers. Following video shows that animation which can also be seen live.

I’ve previously written about escaping special characters in HTML using character entities. This article discusses another method of achieving a similar result: CDATA sections. It explains what CDATA is, how it’s used in XML, SVG, MathML etc., when it can be included in HTML5 file and how it impacts XHTML.

What is CDATA?

A CDATA section in an XML document instructs the parser to interpret the enclosed text literally, as pure character data, not as markup. It starts with the <![CDATA[ sequence and ends with the ]]> sequence. Within a CDATA section, characters which normally have special meaning — namely less-than sign and ampersand — are processed verbatim without the need to escape them. It provides a convenient way to embed¹ styles and scripts without having to worry about special characters as seen in Fig. 1: