Step 01
Start with the Static Vector Art
Start from the approved static SVG and inspect viewBox, paths, groups, masks, colors, and target render sizes. Keep the original immutable and create a sandbox that can show old and new versions side by side.
IntermediateMarketing
How to Recreate an Animated SVG Logo with AI When Source Files Are Missing
Rebuild a missing logo microinteraction from an owned SVG and reference animation by measuring timing and geometry, implementing accessible SVG motion, and comparing the result frame by frame across product contexts before replacing the old asset.
Try this with your AI assistant
Download the skill for this workflow. Version 1.0.0.
Source episode · 11:23How I AI: Atlassian's Joel Unger on Prototyping UI, Animating Logos, and Illustrating Puppies
with Claire Vo
Facing a code freeze and a missing animation source file, Joel gives Cursor the new static SVG and the existing GIF, asks it to recreate the clipping mask and bar motion, measures the original duration, and iterates by a few pixels until the new animated SVG matches the required logo behavior.
Before you start
What you need
- The owned current SVG and the previous animation or recording
- Target dimensions, viewBox, clip and mask behavior, duration, easing, loop, and trigger states
- Brand color, spacing, reduced motion, accessibility, and browser requirements
- A sandbox page showing the logo on every relevant background and size
- Visual comparison, performance, build, and rollback checks
What you’ll make
A compact animated SVG component that preserves the approved logo geometry and timing, responds correctly on load and hover, honors reduced motion, and can replace the old asset without layout, accessibility, or performance regressions.
Tools used
- CursorVisitCursor
AI-first code editor
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Step 02
Prompt the Animation into Existence
Give Cursor the SVG and reference GIF or recording. Describe the moving elements, trigger, direction, loop, end state, and masking relationship before it writes animation code.
Example prompt
Using this owned SVG and reference animation, recreate only the [moving elements]. Preserve all approved paths, viewBox, colors, and dimensions. Implement [load or hover] trigger, [loop behavior], clipping or mask relationship, and a stable end state. Add prefers reduced motion support and do not add scripts or external assets unless required.
Step 03
Refine the Animation with Specific Data
Measure the source duration and key moments with an animation inspector. Store duration, delays, phase offsets, distances, and easing as named variables, then compare captured frames at the same timestamps.
Example prompt
The animation timing needs to be more precise. I analyzed the original, and its full duration is [1200] milliseconds. Please adjust the animation to match this.
Step 04
Iterate with Small Adjustments
Iterate with exact observations such as element, timestamp, axis, and pixel difference. Change one parameter at a time and rerun the visual comparison rather than accumulating broad prompt edits.
Step 05
Deploy the Final Animated SVG
Integrate the component in the real product path and test page load, hover, keyboard focus if relevant, touch, reduced motion, supported browsers, target sizes, CSP, build, and performance. Preserve a quick rollback to the prior asset.
What good looks like
- Static geometry, viewBox, colors, clipping, and alignment match the approved source at target sizes.
- Animation duration, phase, easing, trigger, loop count, and end state match the reference closely enough for the design owner.
- Reduced motion and nonhover or touch contexts receive an intentional stable state.
- The asset renders in supported browsers, adds no unsafe markup, and does not shift layout or block interaction.
Build your next product with ChatPRD
Turn an idea into a PRD, user stories, and a plan.
Runbook notes
How to recover when the loop fails and where human judgment helps.
If it goes sideways
- Animation transforms distort or clip the official logo shape
- Keep source paths immutable, animate dedicated groups or mask elements, and compare static frames against the approved SVG.
- The motion feels wrong because duration, phase, or easing was guessed
- Measure the reference, inspect representative frames, and tune named parameters rather than repeatedly asking for vague adjustments.
- Hover or looping motion ignores reduced motion or distracts from nearby tasks
- Respect prefers reduced motion, provide a stable fallback, and avoid continuous motion unless the product requires it.
- The SVG works in one browser but fails under product bundling, CSP, or sizing rules
- Test the actual component pipeline and supported browsers at every placement, and retain the old asset for rollback.
Related workflows
intermediateDataMeta Muse
How to Use AI for Hobby Improvement and Data Analysis for Golf & Chess
Connect data from your hobbies (like golf scores or chess games) to an AI agent to get automated analysis, visual dashboards, and actionable coaching insights. Turn raw data into a story that helps you improve.
Open
beginnerPersonalMeta Muse
How to Create a Personalized Shopping Catalog from Your Instagram Saves Using AI
Turn your unstructured Instagram 'Saved' collection into a fun, personalized shopping catalog. This workflow uses an AI agent to organize your saves and present them in a nostalgic, engaging format like the SkyMall magazine.
Open
advancedContentMeta Muse
How to Revive an Old Blog or Digital Archive as a Personal AI Podcast
Resurrect your old digital content, like a forgotten blog from Blogger or Tumblr, by using an AI agent to find, consolidate, and transform it into a daily personal podcast. Reconnect with your past self in a new, listenable format.
Open
Start shipping better products.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start · 14-day Pro trial · SOC 2 Type II
