Livemark: Your logo, alive.
An animated WebGPU logo for React: drop in an SVG or PNG and Livemark draws it 24 ways, from pixel tiles and liquid metal to neon and stained glass.
Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now.
Color Looks
THE SYSTEM BEHIND THE SURFACE
Inside Livemark.
Drop in an SVG or PNG and Livemark draws it twenty-four ways: as pixel tiles, characters, halftone dots or dither; as liquid metal, glass, holographic foil, brushed aluminum or letterpress; as contour lines, neon, light rays, stained glass or embroidery; as clay, velvet, marble, smoke, bokeh, crystal, pearl, kintsugi, ridgelines or paper cut. Your logo is prepared once in the browser into a smooth distance field, so every effect follows its true outline at any size, with curves cleaned of jagged pixel edges. The pointer answers in one of eight ways: it can sharpen the mark, magnify it, send ripples through it, light it, scatter or scramble its tiles, or reveal the clean logo underneath.
Livemark draws one logo you provide, as an SVG or PNG with a clear outline; it is not a vector editor, a logo generator or an animation timeline. Very thin hairline marks lose detail in the tiled effects. Your logo is prepared in your browser and never uploaded.
2.884 ms GPU timestamp median; p95 7.471 ms. 1440x900 @ dpr 2; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-13. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.
Effect
How the mark is drawn, in twenty-four ways: pixel tiles, characters, halftone, dither, liquid metal, glass, holographic foil, aluminum, letterpress, contour lines, neon, light rays, stained glass, embroidery, clay, velvet, marble, smoke, bokeh, cut crystal, pearl, kintsugi, ridgelines or layered paper.
Size
Size of the pattern: a tile's or a halftone cell's width in CSS pixels; the other effects scale with it, from a character's height and a dither pixel to a glass piece, the space between lines, a thread, a light, the cracks or the paper layers.
Relief
How much the mark stands out: its edges catch and lose the light, metal and glass round over more deeply, crystal's bevel cuts wider and steeper, letterpress bites deeper, ridges rise higher and paper layers stand taller.
Gap
Space between tiles, as a share of a tile.
Color Looks preserve these settings. Open the editor for all 31 controls.
THE SURFACE IN CONTEXT
Made for a real interface.
Put your mark at the heart of a launch page, a portfolio, an agency site or an event: as the hero itself, or as a living sign-off in the footer. Choose the effect that speaks for the brand, Metal or Glass for hardware, Neon or Terminal for developer tools, Papercut or Letterpress for editorial work, and keep the copy beside it.
Studio for identity and motion
The mark, in motion.
An illustrative studio front page whose own logo is the hero, drawn live by Livemark.
An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.
Try this surface in the editorAPERVEIL PRO
Coming soon.
The live demo is open above and in the editor. Editing its settings and downloading it open with Aperveil Pro in a later release. Free shaders and blocks are available now.
Explore shadersA FEW USEFUL DETAILS
Before you ship.
What this surface does, where it fits, and where it stops.
ANOTHER WAY TO SEE IT
Keep exploring.
YOUR COLORS. YOUR CONTEXT.