I Turned a Static Logo into an Animated SVG Character with AI

I am building a multidisciplinary gamified learning app called ProveitPal.

It is a gamified learning app designed to sharpen how you think — critical thinking, reasoning, and real-world problem solving. The whole point is to reward the process of thinking clearly, not just getting the right answer.

At the center of it is a turtle named Pru.

“Slow and steady wins the race” is not just a saying. It is the whole philosophy.

This is the story of how Pru went from a static PNG to a fully animated, code-driven character. No Figma. No design software. Just AI, SVG code, and intention.

The Original Logo

Last year, I started building the brand. I used ChatGPT with the thinking model to iterate on the original ProveitPal logo. It took rounds of prompting and refining, but I landed on something I liked. A clean, recognizable mark.

That logo worked. But as development moved forward, I realized I needed more. I did not just need a logo. I needed a mascot. A character that could animate, react, celebrate, look skeptical, wave hello. Something alive.

I Knew What I Wanted. I Did Not Know the Tool.

I started researching. I read about vector SVGs, how they scale without losing quality, how they can be animated with CSS and something called SMIL. I browsed LottieFiles to see what was possible. I studied how apps like Duolingo use animated characters to keep users engaged.

I was familiar with Figma. I knew people built animated characters in it. But one of the things I have been learning this year is staying in my lane.

I tend to want to wear all hats. I am a generalist. I consult, I code, I design, I write, I market. But I have also learned that being a generalist does not mean doing everything yourself. It means knowing when the learning curve for a tool is longer than your deadline allows.

The learning curve on creating a fully animated character in Figma? Too long. Much longer than my deliverables required. I needed Pru alive in days, not weeks.

So I went a different route. I work with AI tools every day. I know what they can do. I decided to test them.

I Tested ChatGPT First

My first instinct was ChatGPT. I had already used it for the original logo, so I asked it to generate SVG code for an animated turtle character. Here is what it gave me:

A teal circle. Skeptical eyebrows. Dot eyes. A flat mouth. And a half-circle that was supposed to be a hand.

It gave me a circle with a face on it. Not a character. Not even close to what I needed.

I pushed further.

Better gradients. A navy outline. Dot eyes with reflections. But look at that hand. It got stuck again. It improved the face but could not get past the basic circle to build actual character anatomy. The limbs, the proportions, the expressions. It was not there.

I Tried Gemini Next

Cleaner gradients. A glow ring. Same problem. Still a circle with a face. No body, no limbs, no character.

Same story. A nice looking circle. Not a mascot.

Gemini Did the Research. Claude Built the Character.

But Gemini was useful in a different way. I used it to deep-dive into SVG animation techniques. I studied asymmetric weighting, secondary motion, micro-expression logic. I learned how professional animators think about character movement — not as decoration but as communication.

That research changed everything. It gave me the vocabulary. It gave me the understanding. It gave me the ability to articulate exactly what I wanted.

Then I took everything I learned to Claude Code.

I explained what I wanted. A turtle mascot. Full body. Multiple emotional states. Breathing animations, blinking, tail wagging, arm waving. I described the brand philosophy. Slow and steady. Wisdom over speed. Playful but not childish. I had Claude conduct its own research on SVG animation best practices, SMIL attributes, CSS keyframe patterns.

And that is when Claude output the first version of Pru.

Version 1 — Blue Pru

The first Pru was blue. Soft, kawaii-inspired. Big round head. Low-set eyes. Rosy blush. She was sweet. She was alive. She breathed, wagged her tail, blinked.

V1 was a breakthrough. She was everything ChatGPT could not produce. A full character with personality. Shell texture, finger and toe circles, blush that pulsed, eyes that communicated emotion. All generated as code. All animated through CSS keyframes and SMIL attributes.

But she was young. Very kawaii. The low-set eyes, the proportions. She read as a children’s character. And while that was charming, ProveitPal is not just for kids. It is for anyone who wants to think more critically. The mascot needed to work for a wider audience.

Version 2 — Green Pru

So I iterated. I described the adjustments to Claude. The eyes needed to sit higher. The proportions needed to feel more universal. Less “Saturday morning cartoon,” more “brand mascot that works everywhere.” I shifted the color palette from blue-purple to green. Green for growth. Green for go. Green for proving it.

Look at the difference. The eyes sit higher. The proportions are more balanced. She still has Pru’s personality — the blush, the warmth, the friendliness. But she reads as a brand mascot, not just a kid’s character. She works on a loading screen. She works on a billboard. She works in an investor deck.

Design as Architecture

I want to be clear about what happened here. I did not open a design tool. I did not draw anything. I did not use a GUI.

Everything was generated as code. Text. Characters and numbers that a browser turns into a living, breathing, animated character.

The workflow looked like this:

• Research — I used Gemini to study SVG animation techniques, character design principles, and what makes a mascot work at scale.
• Specification — I described exactly what I wanted to Claude in plain English. The brand philosophy. The emotional states. The animation behaviors. The proportions.
• Generation — Claude output the full SVG code. Hundreds of lines of paths, ellipses, gradients, keyframes, SMIL animations.
• Iteration — I reviewed, gave feedback, described adjustments. Claude refined. Repeat.

This is what I call “Design as Architecture.” You do not draw the character. You describe the character. You define the system. The AI implements the vision.

The Human Algorithm

There is something people miss about working with AI tools. The output is only as good as the input.

ChatGPT gave me circles because I did not know enough yet to ask for more. By the time I got to Claude, I had spent time researching. I understood asymmetric weighting. I knew about secondary motion. I could articulate what “widely marketable” meant in terms of proportions and eye placement.

AI responds to the quality and specificity of human input. The better your understanding, the better the output.

That is why I call it the Human Algorithm. You are the variable. The AI is the function. Change the input, change the result.

This applies to everything. Not just SVG animation. Every time you sit down with an AI tool — whether you are writing code, building a presentation, designing a brand — the quality of what comes out is a direct reflection of the quality of what you put in. Your research. Your clarity. Your intention.

The people who complain that AI gives them garbage are telling you something about their input, not the tool.

What Pru Can Do Now

Pru is not just one pose. She has a full emotional range built as code:

• Happy — Breathing animation, closed arc eyes, tail wag, blush pulse
• Waving — Animated arm wave, friendly open eyes, pupil tracking
• Skeptical — Asymmetric brows, smirk, SMIL pupil tracking and mouth morph
• Celebrating — Bounce animation, arms raised, sparkle particles
• Wrong Answer — Shake animation, worried eyes, sweat drop
• Excited — Wobble animation, star bursts, huge grin
• Sleepy — Bob animation, flat eyes, floating Z’s, drool
• Curious — Head tilt, raised brow, large tracking pupils

Each state is a standalone SVG. Each one animates independently. No sprite sheets. No video files. No external animation libraries. Just code that the browser reads and brings to life. These assets are 10-50x smaller than GIFs and scale infinitely without losing quality.

The Zero-GUI Workflow

Let me put this in context for anyone who designs or builds products.

Traditional animated character workflow: Sketch in Figma or Illustrator. Rig in After Effects or Spine. Export as Lottie JSON or sprite sheets. Import into your app. Manage file sizes. Debug rendering issues.

My workflow: Describe the character. Get SVG code. Paste it in. It works.

Zero GUI. Zero design software licenses. Zero export/import pipeline. Zero rendering dependencies. The character is code. The code is the character.

No Figma. No After Effects. No export button. No handoff from designer to developer. The workflow IS the asset.

For a solo founder building an app on a deadline, this is not a nice-to-have. This is the difference between having a mascot and not having one.

What I Learned

Building Pru taught me something I keep coming back to.

The tools are not going to replace the people who understand what they want and can communicate it clearly. ChatGPT did not fail because it is a bad tool. It failed at this task because at that point I did not know enough to guide it. By the time I reached Claude, I was a better collaborator. I had done the research. I had the vocabulary. I had the vision.

The AI did not design Pru. I designed Pru. The AI implemented her.

That distinction matters more than most people realize. And it applies to every person reading this who has an idea but thinks the tools are not there yet. The tools are there. The question is whether you have put in the work to guide them.

Forward → Upward ↑ Onward ↗︎
Mstimaj

Resources

• Claude Code — Anthropic’s CLI tool for developers
• MDN SVG Tutorial — Learn SVG fundamentals
• SMIL Animation Reference — SVG animation attributes
• LottieFiles — Animation marketplace and tools
• Figma — The design tool I did not use
• Claude Code CLI Cheat Sheet — My free beginner guide

Fatima Jalloh (Mstimaj) is a tech and AI consultant helping individuals and organizations leverage AI with intention. Connect with her at mstimaj.com.