Filling a logo with energy — an engine in WebGL
A beam of light enters the mark and spreads through the shape from inside: the front travels by geodesic distance within the outline, not as a circular wipe. One fragment shader, no dependencies, the logo is swapped as a file.
- Period
- 2026
Key project figures
- the whole scene — beam, fill, pulse
- 3 s
- libraries — a single fragment shader
- 0
- the logo is swapped as an SVG, nothing is baked ahead of time
- 1 file
Scope of work on the project
Services
- Fragment shader that fills along the shape
- Distance maps baked from the logo mask
- A "beam — fill — pulse" scene
- Parameter lab
About the project
A first pass at the engine. The mark on stage is a placeholder: a triangle with a triangle cut out of its centre. The ring is deliberate — it shows at once whether the fill is honest: a circular wipe would light a far corner before its neighbour, while a wave travelling through the shape goes around the ring. The real logo drops in as a single file.
The project in detail
The work
- the fill front follows the geodesic distance inside the outline: the arrival map is baked from the logo mask in the browser on load, and in a frame it costs one texture sample;
- the same texture holds the mark coverage, the distance to the edge from inside and the distance to the mark from outside — that gives the rim and the halo with no second pass and no blur into a separate buffer;
- the beam, the fill and the pulse are one timeline; the lab loops it, a site header would play it once;
- the panel below exposes the same parameters as the widget config. "Freeze frame" and "Moment in the scene" stop time so the front can be inspected: live it passes in a fraction of a second.
Have products you need visualized?
The average project budget starts from €500.
Smaller standalone tasks are quoted individually.