Drawing SVG Superellipses with Python

Superellipses are a little bit of a mathematical oddity, resembling rounded squares or square-ish circles. They are, however, becoming popular for icon outlines. iOS currently uses them, as do recent versions of Android. This article shows you how to use Python to create an arbitrary superellipse in SVG. This can then be used as an image mask to create a superelliptical icon.

Superellipses are sometimes mistakenly called “squircles”. True squircles are simply squares with rounded corners. A superellipse does not have any straight edges and has more of a continuous curve, eg.:

Superellipses come from a family of curves known as Lamé Curves. They are defined using the following equation:

axn + byn = 1

Where x,y are the coordinates, and a,b determine the superellipse’s size. n defines the superellipse’s order. Note that a superellipse of order 2, is in fact a regular ellipse. Most superellipses have n>2. A value of 1.0 will give a rhombus (or parallelogram), and values less that 1.0 give a 4-pointed star. See the diagram below for a sample selection of superellipse shapes. As n tends to infinity, the superellipse tends to the shape of a square (or rectangle). Typically values of about 3-5 are sufficient.

It is easier to computationally draw the curve if we parameterize it. In parameterized angular form, the above equation becomes:

x = A.cos2n θy = B.sin2n θ

A and B specify the radius in the x and y directions respectively.

Here is the implementation as a Python3 module:

Note that this module can be imported, or called from the command line. The above red superellipse is produced with the following Python command:

Here is a sample sheet of different order superellipses (the order is written underneath each shape):

A selection of Superellipses. Order is written beneath each shape.

It is produced with the following code:

Leave a Reply