Generative SVG Logo Design Using Claude Code
This morning I spent some time with Claude Code creating SVG logos for a new Chrome extension I'm building called ytgify. It's a simple YouTube to GIF converter that lets you create GIFs directly from YouTube videos with a simple in-player interface. A quick demo video.
Creating SVG logos with Claude Code is pretty fun. Since they're just XML, CC can bring pretty much any idea you have to life as an SVG. You can work with CC to generate, modify, and iterate on designs through pure conversation. You just describe what you want and watch it materialize as code.
Here's a short gallery of my favorites. Ended up using the first (for reasons detailed below).
Evolution as Design Strategy
I iterated in generations. Evolving designs I liked, discarding the others.
The Conversation Loop
My loop with CC went like this:
- Me: "Carefully analyze this app and create 5 SVG logo designs that capture its theme and target users"
- Claude Code: Generates 5 SVG logos of various aesthetics given my abstract request
- Me: "I like these two designs (X and Y) - show me 5 variations of each"
- Claude Code: Generates 5 new variations of X and Y
- Me: "I like the first two X variations, and the middle 3 Y variations. Create different color themes / sizing / ..."
- Claude Code: Generates new variations
and so on and so forth.
Generate, Curate, Cull
I treated the design cycle with Claude Code as an evolutionary process. Generate, curate, cull, repeat.
Probably did about 15 rounds of this, and ended up with a nice array of interesting logo options.
Design Themes That Emerged
We ended up creating a range of logos I liked. Some are in the gallery above.
These ranged from "on the nose" logos (that literally said 'gif' or 'youtube'), to really playing out the theme of transforming a video into frames for a gif. With the latter we tried various logos with frames, and simpler geometric patterns (e.g., a play button triangle sliced horizontally into strips).
Why The Winner Won
I ended up going with the first option shown in the gallery. I think it represents the concept of the app well (slicing / clipping youtube videos into GIFs, which generally have a range of uses), it's simple, and can be easily recognized when small (a requirement for a chrome extension, you need to be able to easily recognize the tiny version of the logo in the navbar).