# Generative SVG's with Animation with HeroUI & Gemini ## Метаданные - **Канал:** DesignCourse - **YouTube:** https://www.youtube.com/watch?v=UWseAJ5Vb58 - **Дата:** 05.03.2026 - **Длительность:** 4:58 - **Просмотры:** 29,367 - **Источник:** https://ekstraktznaniy.ru/video/17666 ## Описание All things AI Design/Dev: https://designcourse.com Level up your coding skills: https://scrimba.com?via=designcourse (Get 20% off) -- Today, I'm going to show you two different methods for generating animated SVG's with AI. The first method involves using a tool called HeroUI Studio: https://heroui.studio/ - The second method involves using Google Gemini itself. Let's rock! #svg #ai - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big ## Транскрипт ### Segment 1 (00:00 - 04:00) [] So, check out this landing page right here. Specifically, the animated SVG element right here. If you were to create this by hand back before the old days when we didn't have AI, it would take quite a bit of time. But there's a new tool called HeroUI. Studio that allows you to generate SVGs or import them and also animate them with a node-based editor. I'm going to show you exactly how to set that up. So, right now, you have to ask for access for it. And literally within 20 minutes, they gave me access to it when I submitted my email. And when you log in, you'll see this demo right here. And if I click on it, it'll show you just how complex you can get with the actual animations in this node-based editor. Now, me, for the one I'm doing, it's going to be a lot more simplistic. So, as you can see here, I'm just going to have it generate an SVG graphic for me based on like a house with vegetation and trees and stuff like that. So, this is actually what it ends up coming with. And it does take a little time. You have to wait a couple minutes typically. And then you have to drag out another textbased node where you input and you ask it to do something like you could ask it to change something, remove something, add something, whatever. In this case, I'm just asking it to animate. And then I'm also asking it to enhance the prompt because I have a crappy prompt. And it's going to get way more specific based on my intent from the initial prompt. So, it's then going to go ahead and we're going to drag another nodebased editor where we can specify an actual output based on those two nodes before it. So, we had it generate the SVG. Now, we're asking it to animate the SVG. And now we're bringing those together in a final result. And again, this does take anywhere from like 3 to 5 minutes based on what your request is. And this is what it came up with. I'm actually quite impressed with it. Um, yeah, if this was a real project, I'd probably ask it to remove some uh certain elements, you know, before I got to the animation stage. Um, but I'm happy with it. So, it's like, okay, now what? Now you can just click download and download the SVG file itself. So it has animation baked into it already. So it's like now what do you do? You just like upload it to Facebook and you impress your friends. No, you actually want to use it on a project, right? So like in a user interface or like the hero section landing page or something like that. So I use cloud code real quick to spin up, you know, a quick landing page using the front-end developer skill and then integrate that SVG graphic. Now, it has to do it in line, meaning in the HTML itself instead of referencing file because we want the animation to work. Um, and after it did that, the animation works perfectly. And then it's just a matter of doing a bunch of follow-up prompts to really get it seamlessly integrated into your UI or whatever your specific use case is. Here's the caveat, though. You know, I had to upgrade um and actually pay to get this generated, and it feels like I don't know, you know, let me know if you're feeling the same way these days. It feels like, you know, having to pay for stuff like software. It's like it feels really antiquated, especially as an AI native, an AI focused designer/developer because we're one niche right now, the one industry that can like imagine these tools ourselves. So, I think it's only a matter of time before somebody makes like an open- source version where we can just paste in our own I open AI or Gemini API keys to generate this stuff on the fly perhaps. Now having said that there is an alternative that you can use and that is at gemini. If you just go to gemini. google. com and then under tools specify canvas. Also make sure you have pro for the best model you can ask it to generate an SVG for you that is also animated. All right. So animate an SVG illustration of an isometric house with trees and vegetation on a white background. Hit submit. Okay. So here is the end result. Um, it actually creates HTML and uh, SVG, but if you wanted to integrate this, you would just reference, you know, download this entire HTML file or just copy it and then just reference it as a file in cloud code or cursor, whatever you use to build and say integrate this. Now, I want this to actually animate. There is like a little hover animation. I didn't tell it to do that. This window's messed up. Again, you would want to do follow-up prompts. And then now we could just tell it to animate everything. All right, there we go. I now I specified just the trees and it did animate them into place. So you can get real specific with you know other elements and getting them to animate and all that good stuff. So that's just another option if you don't want to go the route of like a SAS like hero UI. So anyhow make sure to subscribe up. I am knocking out videos left and right if you have been paying attention like five days a week um all things AI native design and development. I will see you very soon. Goodbye.