← BACK TO PORTFOLIO
CREATIVE TOOLING

Topoline Looper

Generative topo and halftone patterns. Animated. Exportable. Transparent backgrounds.

CLASSIFICATION:SvelteThree.jsWebGLGenerative Art
GitHubLive Demo
§00
ABSTRACT

Needed animated topographic backgrounds for a brand deck. Got annoyed creating them frame-by-frame in Illustrator. So I made this instead. Topoline Looper generates animated topo contours and halftone patterns in the browser. Tweak the parameters in real-time, export as a GIF with transparent background, drop it into your deck. Done. Built with Svelte and Three.js. WebGL shaders handle the heavy lifting.

VISUAL DOCUMENTATION[VIDEO]
§01
EQUIPMENT & MATERIALS
TECH STACK:
[01] Svelte[02] Three.js[03] WebGL Shaders[04] Vite[05] gif.js[06] lil-gui
§02
TWO MODES
  • 01Topographic renders animated contour lines. Adjust line count, thickness, noise scale, and animation speed. Classic terrain map vibes.
  • 02Halftone generates dot-based patterns with configurable grid density and sizing. More print/pop-art direction.
§03
REAL-TIME CONTROLS

Everything updates instantly. Line count, thickness, noise characteristics, color palette. The preview runs at full speed so you see exactly what you're exporting.

lil-gui handles the control panel. Clean, minimal, stays out of the way.

§04
EXPORT SETTINGS
  • 01Duration from 1-10 seconds for the loop length.
  • 02Frame rate from 10-30 FPS depending on file size needs.
  • 03Canvas size from 256-800px.
  • 04Compression quality scale for balancing size vs fidelity.
  • 05Transparent background for easy compositing.
§05
WHY WEBGL

The contour generation runs in fragment shaders. Noise functions, distance fields, color mapping. All on the GPU. The browser just captures frames and encodes them to GIF.

Could have done this in Canvas 2D, but the shader approach scales better and the code is more readable once you get past the GLSL syntax.

§99
EXTERNAL LINKS
[LIVE]VIEW DEPLOYMENT →