Jeremy MuraFounder, Mura Design Co · Brand Identity & Web Designer → Mura Design Co. • Helped 100,000 Designers on Skillshare / Youtube → Jeremymura.com •

How to Animate a Pattern wth Claude

30 Mar 2026 · 1 min

Watch on YouTube

0:39

In this concise tutorial, Jeremy Mura demonstrates a rapid workflow for turning an Illustrator pattern into a looping SVG animation using Claude AI and embedding it into Framer. He walks through creating a chevron pattern in Illustrator, exporting it as an SVG, dragging the file into Claude with a prompt to generate a looping animation suitable for Framer, copying the resulting SVG/code, and pasting it into an HTML embed within Framer to produce the final animated effect. The video ends with a call‑to‑action inviting viewers to request more design tips in the comments.

Chapters

I'm going to show you how you create a looping animation in a few seconds using Claude. I created this for my client with these chevrons moving right. What you want to do is go to Illustrator and create a pattern. Once you have your pattern, you want to export it as an SVG. Once you have that, bring it into Claude, just drag and drop it, and then type this prompt: create a looping animation that I can bring into Framer. And there we have it, it created the SVG as we can see. And now we can— then I can just click on the code, copy that, go into Framer, and we want to put an embed, and then we just want to HTML, paste that code in and to the side, as you can see. And there we've got our looping animation. Super cool. If you want some more design tips and tricks, let me know in the comments below.