Step01
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.
Source episode · 11:23
How I AI: Atlassian's Joel Unger on Prototyping UI, Animating Logos, and Illustrating Puppieswith 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
Step by step
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Step02
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.
Step03
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.
Step04
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.
Step05
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.
After the steps
Runbook notes
How to recover when the loop fails and where human judgment helps.
Recover
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.
Keep building
Related workflows
advancedEngineeringClaude
How to Implement AI Governance with Context-Aware Project Controls
Create context-aware guardrails for your enterprise AI agent using a 'Project' governance layer. As a project owner, define rules, scope tools, and require human-in-the-loop approval for sensitive actions, ensuring safe and effective AI use.
Open
intermediateOperationsKai (Stripe)
How to Turn a One-Off AI Chat Session into a Reusable Workflow for Your Team
Transform a successful AI chat session into a reusable skill that anyone in your company can use. Package prompts, tools, and code into a standardized workflow, making it easy to share and scale automation across your organization.
Open
beginnerDataKai (Stripe)
How to Create a Custom Data Dashboard On-the-Fly with a Natural Language AI Agent
Use a natural language AI agent to instantly generate and iterate on custom data dashboards. This workflow queries your company's data securely, allowing non-technical users to perform their own 'last mile' data analysis without filing tickets.
Open
Start shipping
better products.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start
No credit card
SOC 2 certified
Enterprise ready