Studio Notan LEARNING HUB
Launch Studio
Tools

Ellipse

Drag out an ellipse or a circle.

Ellipse draws an oval that just fits inside the box you drag; with Shift it is a circle. Under the smooth outline are four curves and four anchor points, and that plainness is the point: an ellipse here is an ordinary path you can reshape.

What it does

Press L, or choose ‘Ellipse’ on the rail (on a phone, under ‘Shapes’). Press at one corner of the ellipse’s box and drag to the opposite corner. Once the drag has begun, Shift makes a circle, Option (Alt) grows it from the center, and Space moves it without changing its size. Held before the press, those keys lend you tools instead, exactly as for Rectangle. A click with no drag makes nothing, and neither does a drag dead straight across or straight down, which leaves the ellipse no height or no width.

The ellipse is built from four curved segments, with anchors at its top, bottom, left and right. Each anchor’s handles lie along the edge of the box and are about 0.55 of the radius long, the standard proportion for drawing a circle with Bézier curves. The result is not a mathematically perfect ellipse, and cannot be: no Bézier curve is exactly an arc of a circle. But the error is at most about 0.027% of the radius, a slight outward bulge between the anchors. On a circle ten centimeters across that is less than fifteen thousandths of a millimeter, far finer than any blade.

Because it is an ordinary path, everything else applies. Points can pull one side flat or push an anchor in; Curves can turn a smooth anchor into a point with one click. Like every shape, it becomes a cut over the sheet and puts paper back over the ground; see Flipping.

Why it works this way

It is drawn by its box because that is what the eye measures: how wide, how tall, and where. An ellipse’s own geometry, its two foci and the constant sum of distances from them, is elegant but hard to aim.

It is built from Bézier curves rather than stored as a true ellipse because every shape in the app goes through the same machinery: cut from the sheet, reflected into a piece, combined with other cuts, exported as a cutting file. One kind of curve all the way through means every step speaks the same language.

The metaphor

A circle is the compass’s shape: a point, a fixed reach, a turn. The ellipse has an older and homelier tool. Push two pins into a board, drop a loop of string over them, pull it taut with a pencil and go around. The pencil draws an ellipse, because its two distances to the pins always add up to the same length of string. Gardeners laid out oval beds with two pegs and a rope in the same way, and the construction is still called the gardener’s ellipse. For smaller work draftsmen used an ellipsograph, a sliding mechanism known as the trammel of Archimedes, or a plastic template with a graded row of ellipses cut out of it.

Where the metaphor breaks: the pins, the foci, are what make an ellipse an ellipse, and this tool never shows them. You describe the shape from outside, by its box. And the string gives a true ellipse, where this one is a very close imitation.

A history

In art

Every circle seen at an angle is an ellipse: the rim of a cup, a wheel, a round window in a wall you are not facing squarely. Drawing it well is one of the classic tests of a student’s eye, and the classic mistake is to give the ends points, like a lemon, when a true ellipse is round all the way. Ellipse templates for drawing are graded by the angle of view for exactly this reason.

Designers have looked for shapes between the ellipse and the rectangle. In 1959, asked to shape a traffic roundabout for Sergels torg in the center of Stockholm, the Danish mathematician, designer and poet Piet Hein proposed the superellipse, a curve as soft as an ellipse that fills more of its box.

In printing

PostScript, the page-description language that desktop printing grew from, has no command for an ellipse. The usual way to draw one is to squash the coordinate system with its scale command and then draw a circle with arc, and the circle itself becomes Bézier curves on the way. Type designers meet the ellipse in the letter O, and almost never draw one. An O is shaped by eye, thicker in some places than others, and made to overshoot the baseline and the cap height slightly, or it would look smaller than the H beside it.

In technology

The ellipse is one of the conic sections, the curves you get by slicing a cone. Apollonius of Perga, writing around 200 BC, gave the ellipse, the parabola and the hyperbola the names still used today; ellipse comes from the Greek for a falling short. Some eighteen centuries later Johannes Kepler showed, in his Astronomia nova of 1609, that Mars travels around the Sun on an ellipse rather than a circle, and the shape moved from geometry into physics.

Computers draw it the way this app does. The four-curve circle, with handles about 0.5523 of the radius long, is so standard that the number has a name among graphics programmers, kappa, and the same value is written into the drawing library under this app.

In professional software

Ellipse tools work like rectangle tools, fitting the curve inside the box you drag. The difference between programs lies underneath. Design programs build an ellipse from four Bézier curves, as Studio Notan does; CAD programs store a true circle or ellipse, defined by its center and axes.

  • Adobe Illustrator. The Ellipse tool (L) takes Shift for a circle and Option (Alt) to draw from the center, and a click without a drag opens a dialog for an exact width and height. The result is a Live Shape with four anchors, and a small widget on its edge drags it open into a pie wedge.
  • Adobe Photoshop. The Ellipse tool (U) shares a group with the Rectangle tool and, with the options bar set to ‘Shape’, draws a vector shape layer that stays crisp at any size.
  • Autodesk AutoCAD. CIRCLE asks for a center and then a radius, or a diameter if you choose that option; it can also find a circle through two or three points, or tangent to other objects. ELLIPSE takes the two ends of one axis and then half the length of the other. Both are exact curves, not approximations.
  • Autodesk Fusion (formerly Fusion 360). Center Diameter Circle (C) is the everyday tool: click the center, then type a diameter. The Ellipse tool is set by a center and its two axes.
  • Inkscape. The Ellipse tool (E) draws an ellipse with round handles on its edge that open it into an arc or a pie segment.

What carries over. Drag the box, then Shift for a circle and Option for the center. When a circle must be an exact size, as a hole for a brad or an eyelet must, give its size in numbers rather than by eye, and read the prompt before you type: AutoCAD asks for a radius unless you choose its Diameter option, while Fusion’s everyday circle asks for a diameter.

Try this

  1. Drag an ellipse, press Option to grow it from the center, then Shift to make it a circle.
  2. Take Curves and click the left and right anchors of a circle. It becomes a lens, pointed at both ends.
  3. Take Points, select the top anchor of a circle, and press Shift and the down arrow a few times. Watch the circle flatten.

Going further

  • Rectangle and Curves
  • Apollonius of Perga, Conics
  • Johannes Kepler, Astronomia nova

Every chapter is about something you can do in the studio, free, in the browser.

Try it in the studio