Audio-Reactive SVG Visualizer

I built an audio visualizer that takes a company logo SVG and animates it in response to live microphone input. You speak, play music, clap your hands — whatever — and the logo reacts in real time. It’s running on the Web Audio API for the frequency analysis and custom JavaScript for mapping those audio values onto SVG path transformations. But the feature that made this project actually interesting was adding custom SVG upload, so anyone visiting could drop in their own logo and watch it come alive. That single addition transformed the whole thing from a demo into an experience.

One more day, and skim-swim-dive

This project gave me a chance to test two frameworks I keep coming back to. The first is the “one more day” concept, which I picked up from IDEO judges at a Friends of Figma hackathon. The idea is simple: if you had one more day to add value, what would you do? For this project, the answer was custom SVG upload. Without it, you’re showing people a cool trick. With it, you’re inviting them to participate — and that’s a completely different energy. The second framework is what I call “skim, swim, dive.” Skimmers watch the video and move on. Swimmers click the link and try the live demo. Divers upload their own SVG, play with the settings, and really explore.

Why audience tiers push the work further

I think approaching any design work with those audience tiers in mind fundamentally changes what you build. If you only design for skimmers, you make a nice portfolio piece. If you design for divers, you end up creating something with real depth — customizable, explorable, something that rewards curiosity. And here’s the bonus: when divers find something worth diving into, they come back. They share it. They bring other people into it. So thinking in terms of skim-swim-dive isn’t just a UX exercise, it’s a strategy for making work that has staying power and gives people a reason to return.