Part 8 of my guide to building custom tools with Ai.

From a gif to concert visuals

Sunday, 5 April, 2026

The biggest creative leaps I have made with Ai has not been getting to learn large frameworks, big new workflow or setting up «one to rule all"-processes. Quite the opposite, it has been the really small insights that leads to big results for me. One of those has been understanding the simple structure of .svg images … and use that to let my ideas take off :-)

From a gif to concert visuals

The backstory

I played in Scapa Flow, a synth band, now Calle, one of the other members has started his own project «Hoy». A year ago he asked me for a logo that I drew and animated.



The base logo is five rectangular shapes that spell «hoy» and is made in three variants: stacked, diagonal, and horizontal.

A couple of weeks ago I get a mess:

«Got a gig confirmed in Gävle today. February 28th as the opening act for Familjen. Super fun but nerve-wracking. I was thinking about that flickery animated Hoy logo you made. Would it be possible to use as a visual for the gig?»

A dream come true

Bloody hell, doing stage visuals has been a dream of mine, but what the hell do I do when I only have a shitty gif-animation and my After Effects skills are almost zero.

Well, I build an app for it of course.

The base animation is the shapes draw themselves in with an outline effect and flicker with a stroboscopic fill. It’s hypnotic, and it would work brilliantly on stage.

The original animation was built in After Effects, a looping 8.4-second cycle exported as a gif. Later, I recreated it as a pure css-animated svg so it could live on the web, scale to any resolution, and stay crisp on any screen.

But when I got Calles setlist I realised I needed a ton more variations to match the songs:

Each variation meant diving back into the css, changing values by hand, testing, exporting … over and over. Clearly it would turn out to be a pain in the ass.

So based on the other apps I’ve built I decided to build an svg animation app for this.

The Upstager app

Upstager is a browser-based control panel that sits alongside my animation. It has three columns:

No installation. No complex setup scripts. I just open a browser tab and start designing.

What Upstager can do


Outline on/off — toggle the drawing-in stroke effect Draw speed — how fast the outlines draw themselves (0.5 to 10 seconds) Background colour — the canvas behind the logo Stroke width — how thick the outlines are (0.5 to 10 pixels) Fill on/off — toggle the solid flickering shapes Strobe speed – how fast it flickers Outline and fill opacity — fade things in and out Outline colour and Fill colour — pick any colour Fill Fade — transition duration between strobe on/off states. At zero the shapes snap instantly (hard strobe). Increase it and the shapes smoothly fade in and out, creating a softer, moodier pulse. Per-shape overrides let you get specific. Each of the five shapes (labelled H1, H2, O, Y1, Y2) can have its own.

The variant library

Every combination I like, I save as a variant with a descriptive name: «strobe-outlines», «neon-green», «slow-moody», «cammo-fade-in-slow». These are stored as small json files (simple text data) that I can reload anytime, share with collaborators, or version-control alongside the project.

Export options

When a variant looks right, I can export it in three formats:

  1. svg – a standalone animated file that plays in any browser (those are the ones you see in theis article), scales to any size, and weighs just a few kilobytes. Perfect for web use or embedding in presentations.

  2. mp4 (1920x1080, H.264) – a proper video file I can drop straight into Premiere Pro and combine with film clips. The app renders it frame-by-frame at 30fps.

Multiple animation layouts

Beyond the original compact logo, I prepared 2 more default animations to start from:

  1. Original (500x500) – the classic hoy animation
  2. Fullscreen tiled (1920x1080) – logo repeated across the canvas
  3. Fullscreen random (1920x1080) – shapes scattered randomly

Fullscreen tiled
Fullscreen random

Each layout uses the same control system, so all the colour, speed, and visibility tweaks work regardless of which base I start with.

How it was built

The key was knowing what I wanted. Having a clear vision and being able to articulate it fairly precisely to Claude: what controls it should have, how the animation engine shoud work, how saving and export should work. That plan became the brief from which me and Claude created a prd (Product Requirements Document): a document outlining the purpose, features, functionality, and behavior of a new product or feature.

It’s vanilla html, css, and JavaScript. The simplest possible web technology stack.

The architecture became deliberately simple:

No TypeScript. No React. No webpack. No bloated frameworks. You start a simple local server, open the page, and it works.

The result

What started as one small logo was now a blown up stage show. I bloody love the life as a designer.

For the final visuals I pulled all the animations into Premiere and combined them with footage of mine from other side project. That way the visuals could match the songs of Hoy in the best possible way.

Here is a short reel from the show and the visuals.

The event

The event was fricking awesome. We did sound check at 4 pm and went on stage 10.30 pm.

Plus I had the pleasure of shooting Familjen and Andreas Tilliander.