08 / SVG / 2026-04-13
Logo Animation
8 motion presets on the Bizurk logo. Glitch, pulse, scan, shatter, slot machine, and more.
How it works
// 01 DPI and pixel density
Each preset is a CSS class applied to the logo SVG container plus, for some effects, a structural class on individual letter groups. For path-draw effects, the SVG paths have `stroke-dasharray` and `stroke-dashoffset` set to the path length, and an animation interpolates the offset from full-length to zero. That reveals the stroke progressively, which reads as the logo drawing itself.
// 02 Bleed and cut tolerance
Per-letter animations rely on the SVG being structured with named groups. Each letter is wrapped in a `<g>` element with its own transform origin. The animation targets child groups with sequential `animation-delay` values so the effect cascades across letters. Slot machine uses a vertical translation animation with overflow hidden on each letter's container, which is how physical slot machines create the illusion of tumbling digits. Shatter uses random rotations and translations per letter combined with opacity fade, which breaks the mark apart then reassembles it.
// 03 Safe zone and trim accuracy
Glitch uses CSS filter stacks rotated and offset on a short loop. A slight `hue-rotate` and `saturate` modulation combined with 1 or 2 pixel horizontal offsets produces the RGB-split artifact that reads as digital corruption. The effect runs in under 5 milliseconds of GPU work per frame because CSS filters are composited on the GPU in modern browsers.
// why this exists
SVG path-level animation and brand motion design
A logo is a static mark. Brand motion is what happens when the mark needs to move: a loader, a page transition, a login screen, a moment inside a video. Eight motion presets on the Bizurk SVG logo, each one demonstrating a different technique for animating a vector mark. Glitch, pulse, scan, shatter, slot machine, path draw, color cycle, and mask reveal. Click any preset to play it full size. Each one is built with plain CSS animations or SVG SMIL, no motion library.
The presets are grouped by technique. Path-draw animations (scan, reveal) use `stroke-dasharray` and `stroke-dashoffset` to animate the mark being drawn stroke by stroke. The classic "logo writes itself on" effect that works on any SVG with stroked paths, scalable to any speed, and rendering at vector quality at every size. Shatter and slot machine use transform keyframes per glyph (the logo is structured as separate groups) to animate individual letters independently. Glitch uses CSS `filter` properties (hue-rotate, saturate) combined with small position offsets on random keyframes. Pulse is a two-step scale animation with easing.
Most brand logos are shipped as a single optimized SVG with all paths merged. That export is wrong for motion work. A logo that is going to animate needs to be structured: glyphs as separate `<g>` elements, strokes preserved where path-draw effects will run, anchor points set where transforms pivot. This widget runs against a Bizurk logo SVG that was built for motion from day one, which is why the shatter effect can rotate each letter from its own center instead of the whole mark pivoting as a block.
Copy the CSS or SVG source of any preset with one click. The code drops into your own project without modification. No dependencies, no build step, no framework coupling. The animations all honor `prefers-reduced-motion`, so a visitor with motion sensitivity sees a static logo instead of a glitch effect.
I built this because every client I work with has the same question once their logo is ready: can we see it move? A good answer needs more than "yes we can do it." It needs a menu of real options they can feel and pick from. This widget is that menu.
Frequently asked questions
Why SVG instead of canvas or video for logo animation?
SVG is resolution-independent, animatable with standard CSS, accessible to screen readers, and cacheable as a static asset. Canvas needs JavaScript. Video is a fixed resolution and adds network weight. SVG is the right default.
What is stroke-dasharray and how does it draw a logo?
stroke-dasharray defines the pattern of dashes and gaps along a stroked SVG path. Setting the dash to the full path length and animating stroke-dashoffset from that length to zero makes the stroke appear to draw itself from start to finish.
Can any logo support these animations?
Only if the SVG is structured for motion: glyphs as separate groups, strokes preserved, transform origins set. Most optimized logo exports flatten everything into a single path, which breaks per-letter animation.
How do I honor prefers-reduced-motion?
Wrap your animation rules in `@media (prefers-reduced-motion: no-preference)`. Visitors who have set the system flag for reduced motion see the static logo. This is a baseline accessibility requirement, not an optional nicety.
Is SMIL or CSS better for SVG animation?
CSS for most cases. CSS animations are better tooled, easier to debug, and more widely supported. SMIL (the SVG-native animation syntax) is deprecated in Chrome for most use cases. Use SMIL only when CSS cannot express the effect, which is rare.
What is the performance cost of an animated SVG logo?
Low, if you animate transform, opacity, and filter. High, if you animate properties that trigger layout (width, height, left, top). Stick to GPU-composited properties and the effect will render at 60 fps on almost any device.
How do I animate individual letters of a wordmark?
The wordmark SVG has to be structured with one group per letter. Export from your design tool with 'outline text' off, then wrap each path in its own `<g>` element and target them with sequential animation-delay values.
Can I loop these animations?
Yes. Add `animation-iteration-count: infinite` for an endless loop. Be careful with loops on glitch or shatter effects; they draw attention and become annoying fast. A one-shot animation on load is usually better.
How long does logo motion take to build for a client?
Somewhere between half a day and two days depending on the complexity of the mark and the number of presets needed. The SVG prep is the time sink, not the animation code itself.