How We Drew Our Jellyfish in Code

The jellyfish on our home page is our logo, brought to life: a 3D line drawing of a moon jellyfish that swims, reacts to your pointer and glows in the dark theme. There is no 3D engine and no animation library behind it — just a few hundred lines of TypeScript and WebGL. Here is how it works.

An animal made of curves

The jellyfish is described entirely as curves, each one a function of time:

• thirty-two radial canals on the bell, every other one branching lower down;
• a scalloped rim with eight lobes, and faint contour lines that give the dome its shape;
• four horseshoe-shaped gonads — the moon jellyfish’s clover — drawn in our accent colour;
• four frilled oral arms, and a curtain of long tentacles with a short fringe around the rim.

Lengths and phases come from a seeded random generator, so it is the same animal on every visit, on every device.

Swimming

A real jellyfish swims by squeezing its bell and letting it relax again. Ours does the same: a quick contraction that travels from the top of the bell to the rim, then a slow release. The body lifts a little after each stroke and the tentacles trail behind. At the start of every stroke, a short signal runs down the canals in the accent colour — a nod to the nerve net that makes a jellyfish swim, and to our name: neura, as in neural, and mare, Italian for sea.

Lines, not polygons

WebGL draws lines only one pixel wide, which looks thin and jagged on modern screens. So every short segment of every curve is drawn as its own quad, widened in screen space and anti-aliased at the edges in the fragment shader. Lines further away fade a little, which is most of what makes the drawing read as 3D. In the dark theme the lines add up instead of overlapping, with a soft halo underneath, and the animal starts to glow.

One drawing, two renderers

The same model and camera also run on the server, where they produce a static SVG of the jellyfish. That drawing is part of the page’s HTML, so it appears immediately, before any JavaScript runs. Once the page is idle, the live version takes over — and since both start from the same moment, the hand-over is seamless. The SVG also illustrates our social share images.

Off the main thread

The animation runs in a Web Worker that draws to an OffscreenCanvas, so it never competes with scrolling, typing or clicking. It stops when the jellyfish is off screen or the tab is hidden, and a button under it pauses it. Visitors who ask their system for reduced motion get the still drawing, and no WebGL at all.

Move your pointer near it on the home page, or tap it to make it swim. You will find it on the studio page too.