A logo that computes itself: an E that converges in eight epochs

This is a build note about our own logo. The mark ships on e8.team and renders live in the browser, recomputed every frame. Its sister mark, the Vedana clover, set the pattern we extended here.

We needed a mark for Epoch8 in the same family as Vedana, and we built it from the same math. The 8 is a Bernoulli lemniscate, a figure-eight curve drawn from one polar equation. The E is a Fourier series, a shape built by summing rotating circles. It builds up over eight harmonics, which we call eight epochs of training. The wobble you see at low harmonic counts is the Gibbs phenomenon: the ripple a partial Fourier sum always carries near a corner. We kept it on purpose. The part that fought us was the stroke width. Setting it in points collapsed the spacing at small sizes, because a point width does not scale with the mark. The fix was to measure everything in fractions of cap-height.

Recap: the pattern from Vedana

Vedana’s logo is not a stored drawing. It is a rose curve, r = a*cos(2t), computed at runtime. On hover it breathes between a clover at k=2 and a circle at k=0. The component is one SVG with a single <path>, an animation loop that recomputes the d attribute every frame, and pointer handlers that drive the hover morph. That is the grammar we wanted to keep: procedural, one closed contour, one thick stroke with round caps, motion through a single variable.

The brief for Epoch8 was a mark in that grammar with its own math. The name gives three hooks: the 8, the letter E, and epoch, which for a machine-learning company is a precise word, since an epoch is one pass of training.

Why a formula and not a drawing

The shape had to fall out of a formula, so we looked for the formula before the style. Vedana lives on a rose at k=2. Move k through the integers and you get a family of epochs of one curve. At k=4 the rose has exactly eight petals, which is a clean pun on the name. That was the first dead end.

Finding the 8

The eight-petal rose clogs the center. At logo stroke weight the eight petals crowd the middle, and below about 24 px they turn to mush. A logo has to survive a favicon, so a shape that only works large does not qualify.

The Bernoulli lemniscate, r^2 = a^2*cos(2t), reads as a clean figure eight. It carries a second meaning we liked: it is the symbol of a cycle, and an epoch is a cycle. As the digit 8 it is cleaner than any rose, so it became the 8.

Finding the E

A letter is harder, because no plain polar formula draws an E. We tried two near-misses first.

A Lissajous figure at a 3:1 frequency ratio folds into a three-lobed shape you can almost read as an E. Almost. It reads as a wave, so it failed as a glyph.

An epicycloid, 9*cos(t) - cos(9*t), is a curve literally built on epi, with eight cusps. A nice pun, but the shape is noisy. We kept it as a candidate for a background pattern and dropped it as the mark.

The answer was a Fourier series. Any closed contour, including the glyph of an E, is a sum of rotating circles, z(t) = sum of c_k * e^(i*k*t). We sample the target E contour at 1024 points, take a discrete Fourier transform (DFT) to get the coefficients, and the clean mark sits at 160 harmonics. The first eight harmonics carry the accent, which is where the eight epochs come from. This gives a real E that stays fully procedural: the code holds an array of complex coefficients, and there is no stored path anywhere.

The Gibbs ripple, and why we kept it

A partial Fourier sum never reconstructs a corner cleanly. Near a sharp turn it overshoots, and the overshoot does not shrink to zero as you add harmonics. Its height stays at about 9% of the size of the jump and just squeezes closer to the corner. That is the Gibbs phenomenon, and it has the same shape as a training loss that keeps falling but never reaches zero.

So we treated harmonic count as a stage ladder. In a 400-unit construction box the half-stroke is 4 units, so the mark looks production-clean once the overshoot hides inside the stroke.

• At 8 harmonics the overshoot is about 4.68 units, just past the stroke, and visible. Call it the proof of concept.
• At 16 harmonics it is about 2.11 units, tucked inside the stroke. The MVP.
• At 32 harmonics it is about 1.05 units, with a four-times margin. Production.
• At 160 harmonics it is about 0.21 units. Release, and overkill on purpose.

The metaphor holds because the math holds. The ripple is always there. You stop paying for harmonics when the eye can no longer see the seam.

What did not work, and why

Three things, in order.

The eight-petal rose. The obvious pun on the name, and the first idea everyone has. At logo weight the petals crowd the center and collapse at favicon size. The pun was not worth a mark that dies below 24 px.

The Lissajous and epicycloid E. Both gave a shape near an E from one clean formula, which was tempting. Neither read as a letter. A logo that needs a caption to be read as an E is just decoration.

The stroke width in points. This one cost real time. We first set the line width in points, the way you would in a drawing tool. When the mark renders smaller, a fixed point width grows as a fraction of the cap-height. The strokes fatten and eat the gap between the E and the 8. The optical gap, which should sit near 0.054 of the cap-height, fell to 0.029, and the mark looked cramped at small sizes with no obvious cause. The fix was to define every measure in data units, as a fraction of the cap-height. We compute the point width from the axis scale after the curve is drawn. Any re-render of the mark now uses data-unit strokes.

The geometry, in cap-height units

Because the stroke bug taught us the rule, the whole mark is specified in fractions of the cap-height H, so it is scale-free. The gap between the E and the 8 is 0.041 H. The E stroke is 0.058 H. The 8 stroke is 0.102 H, which is 1.75 times the E stroke. The 8 stands at 0.92 H, optically centered on the E. The E is drawn in coral, #E85C57, and the 8 in teal, #1D9E75, because they are two different objects: a Fourier sum and a lemniscate.

How it runs

The implementation follows the Vedana pattern. One <svg viewBox="0 0 400 400">, a single <path>, an animation loop that recomputes d each frame with an ease at the endpoints, and pointer handlers for the hover morph. The E is a runtime partial Fourier sum with a variable harmonic count, so the intro can grow it from a circle to the letter. The 8 is the lemniscate drawn as a parametric outline. On hover the mark breathes toward k=2, the Vedana shape, a small family handshake. All of it lives in a lib/fourier module: the transform, the contour sampler, the lemniscate, and the live mark.

The same engine drives the budget estimator on the site. There the Fourier reconstruction runs as you drag a slider, and the E rebuilds in real time on a simple model: one epoch is one week is one harmonic.

What this adds up to

A procedural mark turns out to be a tiny machine-learning system. You pick a basis, the rotating circles. You fit coefficients to a target, the glyph. Then you decide when close enough is production, which is the Gibbs call. The transferable lesson is the plain one: measure in the units that scale. Stroke width in points was the bug. Stroke width in cap-height was the fix. The same thinking sets every other measure in the mark.

If you want to see where this turns into a whole site, the e8.team procedural site case is the build it anchors.