SVGs animeren met Gemini AI — Stap-voor-stap handleiding (2026)

Wat als je deze prompt:

"Elk bloemblad ontvouwt zich vanuit het midden, één voor één, met een zachte rotatie. Dan groeit de stengel omhoog en de bladeren verschijnen als laatste in fade."

...kon omzetten in een volledig geanimeerde SVG — in minder dan 10 seconden — zonder een enkele regel CSS aan te raken?

Dat is precies wat er gebeurt als je een SVG-bestand combineert met Google Gemini 3.1 Pro in VectoSolve. Deze tutorial toont het volledige proces, inclusief de gegenereerde CSS.

Voordat we beginnen: wat je nodig hebt

1. Een SVG-bestand dat je wilt animeren (elke SVG werkt — logo, icoon, illustratie, patroon)
2. Een VectoSolve-abonnement met minimaal 0,10 resterende credits (de kosten van één Eco-animatie)

Geen SVG? Upload een PNG op vectosolve.com en converteer het gratis.

De drie Gemini-niveaus

Eco (0,10 credits) — Gemini Flash. Snel en goedkoop voor eenvoudige animaties.

Standard (0,25 credits) — Gemini 2.5 Pro. Voor complexere prompts met 5-10 elementen.

Pro (0,50 credits) — Gemini 3.1 Pro. Voor professioneel werk waar kwaliteit telt.

Stap 1 — Je SVG voorbereiden

Gemini leest je SVG-code voor het genereren. Gebruik betekenisvolle element-ID's:

<!-- Goed: Betekenisvolle IDs -->
<g id="flower">
  <path id="petals" d="M10,20..." />
  <circle id="center-dot" cx="50" cy="50" r="25" />
</g>

Betekenisvolle IDs zijn de belangrijkste factor voor animatiekwaliteit.

• Gebruik de SVG Optimizer (gratis)
• Vlak geneste transformaties af
• Houd het bestand onder 100KB

Stap 2 — Je animatieprompt schrijven

Open vectosolve.com/ai-animate en upload je SVG.

Patroon 1: De gefaseerde onthulling

"Eerst verschijnt de achtergrondvorm in fade over 0,6 seconde. Na een pauze van 0,3s schaalt het hoofdicoon op van 0 met een lichte bounce. Tot slot schuift de slagzin-tekst van onderaf in."

Patroon 2: De staffeling

"Elk element verschijnt één voor één, beginnend links, met 150ms vertraging ertussen. Gebruik een zacht ease-out. Totale duur ongeveer 1,5 seconde."

Patroon 3: De loop

"Het hele ontwerp ademt — schaalt zacht tussen 0,98 en 1,02 met een cyclus van 3 seconden."

Patroon 4: Het padteken

"Teken elke lijn van begin tot eind met stroke-dashoffset animatie. Start bij de linker paden, ga naar rechts."

Stap 3 — De gegenereerde CSS begrijpen

/* Gegenereerd door VectoSolve AI — Gemini 3.1 Pro */
@keyframes fadeInBackground {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUpBounce {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

#background { animation: fadeInBackground 0.6s ease-out both; }
#main-icon  { animation: scaleUpBounce 0.5s ease-out 0.9s both; }

Stap 4 — Aanpassen en exporteren

Klik Exporteren voor een schoon .svg-bestand dat overal werkt.

Zes animatie-ideeën

1. Logo-onthulling: "Het icoon tekent zichzelf met lijnanimatie over 1,5s, dan verschijnt de tekst in fade van onderaf"
2. Ademhalingspuls: "Het hele ontwerp schaalt zacht tussen 0,97 en 1,03, oneindig herhalend"
3. Icoon-cascade: "Elk icoon valt van boven met een lichte bounce, gestaffeld per 0,1s"
4. Kleurwisseling: "De vulkleuren wisselen langzaam tussen origineel en iets helderder, in loop"
5. Spinner: "Draai de buitenste ring met de klok mee, 2 seconden per omwenteling"
6. Typemachine: "Onthul elke letter van links naar rechts met clip-path animatie"

Klaar om te animeren? Open vectosolve.com/ai-animate en probeer een van de bovenstaande prompts. Het Eco-niveau kost 0,10 credits van je abonnement.