Text

Fourier Sketch

Each letter is traced by a chain of rotating circles whose radii are its Fourier coefficients; more terms sharpen the form, and glints keep circling the finished contours. Use for science, math and generative titles.

  • fourier
  • epicycle
  • circles
  • sketch
  • trace
  • maths
  • text

Settings and defaults

Line colour
#5fd0ff
Detail
96
Circles
1
Glints
1
Hot colour
#fff1c2
Line width
0.03
Trail
0.9 s
Bridges
0.14
Opacity
1
Font
Caveat
Draw
Epicycles
Draw duration
5 s
Draw easing
Smooth
Draw stagger
0.6
Draw direction
0 °
Erase
Fade
Erase duration
2 s
Erase easing
Smooth
Erase stagger
0.6
Erase direction
0 °
Play on load
On
Loop
Off
Yoyo
Off
Hold
2 s
Hidden pause
0.5 s
Shown
On

Fourier Sketch draws every letter with a chain of spinning circles. Each circle rides on the edge of the one before, and the tip of the last one traces the letter, the famous epicycle drawing that shows how any shape can be built from rotations.

How it works

Each letter outline is broken down into a series of circles of different sizes and speeds, largest first. Spinning them all together traces the exact outline. Few circles give a soft, wobbly approximation; more circles sharpen it into the real letter. Once the letters are done, small glints keep circling the finished contours, and dim bridge lines join the inner holes of letters to their outer edge.

Settings

  • Detail (6 to 128) sets how many circles each letter uses: low is loose and dreamy, high is crisp.
  • Circles sets how visible the spinning circles are while drawing.
  • Glints sets the light that keeps travelling round the finished letters.
  • Line colour, Hot colour and Trail set the line, the colour of fresh strokes, and how long they stay hot.
  • Line width and Bridges set the stroke thickness and how visible the joining lines are.
  • Draw defaults to Epicycles; other methods such as Trace and Wipe also work.

Use it for

  • Maths, science and education titles
  • Generative and data-art intros
  • Tech brands that want to show their working

Code and API

Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.

See plans

More text

Works well with