Animierte SVGs als echter Code — herunterladen, kopieren, umbauen

SVG-Animationsgenerator — ein Satz genügt, und es bewegt sich

Beschreiben Sie den geschäftlichen Anlass in einfachen Worten, und die KI schreibt eine vollständige animierte SVG.
Für Websites, Apps, Social-Media-Assets und Produktdemos — herunterladbar, kopierbar und weiter bearbeitbar.

Animation erstellenLive-Beispiele ansehen

Schon ein Logo vorhanden? Wechseln Sie zu „Eigene SVG animieren“ und laden Sie es hoch.

Diese Generierung: 10 credits

Klicken Sie ein Beispiel an, um seinen echten Code zu sehen, oder beschreiben Sie oben Ihre eigene Idee.

Jedes Beispiel unten ist eine echte, laufende SVG

Kein Video, kein GIF — jedes spielt von selbst und wiegt nur wenige KB.

Zwei Wege zum Ziel

Aus einem Satz eine neue Animation erzeugen oder eine vorhandene SVG in Bewegung setzen. Beide Wege eignen sich für wiederverwendbare kommerzielle Vorlagen.

Vom Text zur Animation

Diagramm, Logo, Ladesymbol, Karte — beschreiben Sie die Szene in einfachen Worten und erhalten Sie binnen Sekunden eine bewegte SVG.

Von der statischen SVG zur Animation

Sie haben bereits eine statische SVG? Hochladen, zu „Eigene SVG animieren“ wechseln — die Bewegung kommt hinzu, Ihre Pfade bleiben exakt erhalten.

Demos mit hohem Geschäftswert

Bewegung allein genügt nicht. Erst wiederverwendbar und inhaltlich austauschbar wird sie wertvoll.

Diese Demos zeigen SVG-Animationsmuster mit klarer kommerzieller Absicht: App-Launches, Produktverpackungen, Logo-Intros, Bestellstatus und Social-Media-Kreation. Die eigentliche Chance liegt in einem Vorlagensystem, in dem Nutzer Bilder, Texte, Logos, Farben, Timing und Exportformat selbst austauschen.

Animierte SVG-Demo einer App-Kampagne mit mehreren Screens
App- / SaaS-Launch

App-Kampagne mit mehreren Screens

Mehrere Mobilbildschirme und Textebenen erklären ein Produkt in Sekunden — geeignet für Landingpages, bezahlte Anzeigen und App-Store-Vorschauen.

Einsatzszenario
Mobile Apps, SaaS-Produkte, KI-Tools, Produktivitätstools, Launch-Kampagnen.
Austauschbare Elemente
Screenshots, Überschrift, Nutzenargumente, Hintergrund, Markenfarben, CTA, Quer- oder Hochformat.
Technik dahinter
Reine CSS-Keyframes, 14 KB. Bildschirmwechsel, Textkaskade und CTA-Puls laufen jeweils in eigenem Takt — einfach in ein img-Tag legen, fertig.
Passende Ausgabeformate
Website-SVG, Anzeigen-GIF, kurzes MP4, App-Store-Material.
Animierte SVG-Demo einer Produktdose
DTC / E-Commerce

Produktverpackung als Hero-Motiv

Verpackung, Fruchtakzente, Umlaufbahnen und ein leichtes Schweben machen aus einer statischen Produktkarte ein wiederverwendbares Hero-Motiv für den Shop.

Einsatzszenario
Lebensmittel und Getränke, Kosmetik, Körperpflege, Spielwaren, Consumer Electronics, Produkteinführungen.
Austauschbare Elemente
Produktbild, Sortenname, Hintergrund, Dekorelemente, Auslobungs-Badges, Rhythmus der Lichtreflexe.
Technik dahinter
Reine CSS-Keyframes, 13 KB. Schweben der Dose, kreisende Früchte und wandernder Glanz sind drei unabhängige Spuren — das Produktbild lässt sich austauschen, ohne die Bewegung zu beschädigen.
Passende Ausgabeformate
Hero-Bereich der Landingpage, Produktdetailseite, Social Ad, Kampagnenseite.
Animierte SVG-Demo mobiler Feature-Karten
Feature-Marketing

Feature-Karten für Mobilgeräte

Feature-Karten gleiten, stapeln sich und heben Nutzenargumente hervor — abstrakte App-Funktionen werden dadurch begreifbar.

Einsatzszenario
App-Onboarding, Release Notes, SaaS-Feature-Abschnitte, Update-Seiten.
Austauschbare Elemente
Feature-Karten, Icons, Geräterahmen, Titel, Text, Reihenfolge der Karten, Timing des Auftritts.
Technik dahinter
Reine CSS-Keyframes, 8 KB. Die Karten treten zeitversetzt über transform und opacity auf — für eine vierte Karte genügt es, eine Gruppe zu duplizieren.
Passende Ausgabeformate
Illustration der Produktseite, Onboarding-Material, Erklärvideo, Hilfecenter-Grafik.
SVG-Animationsdemo eines Logo-Reveals
Brand Motion

Logo-Reveal als Video-Intro

Logo-Reveals lassen sich besonders leicht als Vorlage vermarkten: Markenzeichen hochladen und daraus Intro, Outro und Kanalgrafik erzeugen.

Einsatzszenario
Unternehmensvideos, YouTube-Intros, Kursauftakte, Launch-Events, Marktplätze für Markenvorlagen.
Austauschbare Elemente
Logo-SVG, Markenfarbe, Hintergrund, Zeichengeschwindigkeit, Standzeit, Intro- oder Outro-Fassung.
Technik dahinter
Reine CSS-Keyframes, 9 KB. Das Zeichen entsteht über stroke-dashoffset, die Buchstaben folgen per animation-delay. Zeichen austauschen, Timing behalten.
Passende Ausgabeformate
SVG-Intro, MP4-Opener, Brand-Motion-Paket, Creator-Vorlage.
SVG-Demo einer Sendungsverfolgungskarte
UI-Status

Karte für Versand- und Bestellstatus

Statusbewegung ist kommerziell nützlich: Bestellung, Lieferung, Deployment, Freigaben und Zahlungsbestätigung brauchen alle klares Feedback.

Einsatzszenario
E-Commerce-Versand, Bestellstatus, Zahlungsbestätigung, Deployment-Fortschritt, Freigabeprozesse.
Austauschbare Elemente
Anzahl der Schritte, Statusbezeichnungen, Farbe für Erfolg, Farbe für Fehler, Icons, Text je Station.
Technik dahinter
Reine CSS-Keyframes, 13 KB. Eine einzige Zeitachse steuert sowohl den Linienfortschritt als auch die Badge-Zustände — Schritte lassen sich mühelos ergänzen oder streichen.
Passende Ausgabeformate
SaaS-Komponente, Checkout-Animation, Benachrichtigungszentrale, Transaktionsstatus.
SVG-Demo einer animierten Social-Post-Vorlage
Creator / Social

Motion-Vorlage für Social Posts

Social-Vorlagen funktionieren am besten als Bibliothek nach Branche und Format, in der Nutzer Bilder, Überschriften und Tags austauschen.

Einsatzszenario
Instagram, TikTok, Kampagnen-Teaser, Redaktionsplan der Marke, Creator-Material.
Austauschbare Elemente
Bild, Überschrift, Tags, Plattformformat, Markenfarben, Timing des Auftritts, Schleifenverhalten.
Technik dahinter
Reine CSS-Keyframes, 9 KB. Der Bildbereich fährt langsam heran, während die Textebenen nacheinander erscheinen — Foto und Text lassen sich tauschen, ohne die Animation anzufassen.
Passende Ausgabeformate
Social Posts, Anzeigenmotive, Creator-Vorlagen, Kampagnenmaterial.
Direkt anpassbare Motion-Prompts

Beginnen Sie bei echten Anwendungsfällen

Fangen Sie nicht mit „irgendeine schöne Animation“ an. Legen Sie zuerst den geschäftlichen Anlass fest und ändern Sie dann Objekt, Markenfarben, Text und Tempo — so kommt das Ergebnis dem näher, was Sie tatsächlich ausliefern können.

Was ist der SVG-Animationsgenerator?

Timeline-Editoren brauchen Stunden zum Einarbeiten, Videoexporte werden beim Skalieren unscharf. Hier genügt ein Satz für eine echte animierte SVG — lesbarer Code, den Sie bearbeiten und überall einbetten können.

Von Worten zu Bewegung in etwa einer Minute

Schreiben Sie, was sich bewegen und wie es wirken soll. Die KI entwirft die Formen und schreibt jeden Keyframe — die meisten Animationen sind in deutlich unter einer Minute fertig.

Die SVG animieren, die Sie schon haben

Laden Sie ein Logo, ein Icon oder eine Illustration hoch und beschreiben Sie die Bewegung — ein Zeichnen der Kontur, ein sanftes Schweben, kreisende Akzente. Ihre ursprünglichen Formen bleiben unangetastet, nur die Animation kommt hinzu.

Echter Code statt Blackbox

Wechseln Sie jederzeit in die Codeansicht: sauberes SVG-Markup mit CSS-Keyframes darin. Übernehmen Sie es direkt in Ihr Projekt oder passen Sie Timing und Farben selbst an.

Leichter als GIF, schärfer als Video

Eine typische animierte SVG von hier wiegt einige Dutzend Kilobyte, skaliert ohne Unschärfe auf jede Auflösung und läuft endlos ohne Videoplayer.

Ein Generator, vier Arten von Motion-Arbeit

Vom letzten Schliff einer Website bis zur Erklärgrafik für den Unterricht — derselbe Ein-Satz-Ablauf deckt die Animationsaufgaben ab, die tatsächlich anfallen.

Animierte Ladeanimation: ein Verlaufsring mit umlaufenden Punkten

Zustände und Abläufe im Interface

Checkout-Fortschritt, Registrierungsschritte, Ladeanimationen, leere Zustände, animierte 404-Seiten. Genau die Momente, in denen jemand wartet oder abwägt — einfach in ein img-Tag legen, es läuft von allein, nichts zu verkabeln, nichts zu pflegen.

Animiertes Sonnensystem-Diagramm mit 8 Planeten, die die Sonne umkreisen

Erklärgrafiken für Lehre und Inhalte

Kreisende Sonnensysteme, animierte Zeitstrahlen, Funktionsprinzipien, wachsende Balkendiagramme. Beschreiben Sie das Konzept und setzen Sie das Ergebnis in Folien, Artikel oder Kursseiten — es läuft von selbst, ganz ohne Videoplayer.

Schreibmaschinen-Animation, die „Hello World“ in kräftigem Orange enthüllt

Markenmomente und Website-Feinschliff

Handschrift, die sich selbst schreibt, kinetische Überschriften, Logo-Reveals, treibende Hero-Hintergründe. Auf jedem Bildschirm vektorscharf und klein genug, um sofort zu laden.

Ein Linien-Icon aus Berg und Sonne zeichnet sich selbst, blendet aus und beginnt von vorn

Überall einfügen, und es bewegt sich weiter

Ein GitHub-README, eine Notion-Seite, ein geteiltes Dokument, ein Foliensatz. Die meisten animierten Dateien stehen still, sobald sie die Website verlassen, für die sie gebaut wurden — diese nehmen ihre Bewegung mit.

Ein Prompt, jede Engine

Sie wählen eine Stufe, keine Modell-ID. Wechseln Sie die Engine und schicken Sie denselben Prompt erneut los, um selbst zu vergleichen.

Schnell — Gemini 3.6 Flash

Tempo zuerst, 10 Credits. Ideal, wenn Sie an der Formulierung feilen und den nächsten Versuch zügig sehen wollen.

Ausgewogen — Claude Sonnet 5 (Standard)

Die Standardstufe, 10 Credits, und die einzige Engine, die wir mit unseren Animations-Prompts durchgängig geprüft haben: sauberes Markup, verlässliche CSS-Keyframes, typischerweise 12 bis 32 Sekunden.

Beste Qualität — Kimi K3

15 Credits, Reasoning aktiviert. Langsamer und teurer, gedacht für dichte Szenen mit vielen Elementen, die choreografiert werden müssen.

Überallhin mitnehmen

SVG ist das eigentliche Ergebnis. GIF und MP4 entstehen direkt in Ihrem Browser — keine zusätzlichen Credits, kein Upload.

SVG

Das eigentliche Artefakt. Die CSS-Keyframes stecken in der Datei, sie läuft also ohne Laufzeitbibliothek — ins img-Tag legen oder inline einfügen.

GIF

Ein Klick für die Orte, die kein SVG akzeptieren — Messenger und Social Feeds. Bild für Bild aus Ihrer Animation gerendert, auf Ihrem Rechner.

MP4

Für Kurzvideos, Präsentationen und Kursmaterial. Wird lokal kodiert, sofern der Browser es unterstützt; SVG und GIF funktionieren ohnehin überall.

Alles, um Vektoren in Bewegung zu bringen

Mehr als nur eine bewegte Grafik: Prompt, Vorschau, Quellcode, Export und Wiederverwendung in einem einzigen Ablauf.

Vorlagen, die Ihre Aufgabe kennen

Ladeanimation, selbstzeichnendes Logo, Schreibmaschinentext, Wellenhintergrund, Linien-Reveal, wachsendes Diagramm — Vorlage wählen, Wortlaut anpassen, generieren.

Reines CSS in der SVG

Kein JavaScript, keine externen Dateien, keine Laufzeitbibliothek. Die Animation ist deklaratives CSS in der SVG selbst — sicher zum Inlinen, gut cachebar, läuft sogar im img-Tag.

Scharf vom Favicon bis zur Plakatwand

Es ist ein Vektor: dieselbe Datei bleibt als 16-px-Icon ebenso gestochen scharf wie im bildschirmfüllenden Hero. Kein erneutes Exportieren je Größe.

Codeansicht und Kopieren mit einem Klick

Sehen Sie genau, was die KI geschrieben hat. Übernehmen Sie das Markup in Ihre Codebasis, ändern Sie eine Dauer, tauschen Sie eine Farbe — es liest sich wie sorgfältig von Hand geschriebener Code.

Statische SVGs in Bewegung setzen

Der Weg von der SVG zur Animation: vorhandene SVG hochladen und die Bewegung beschreiben. Ideal für Logos, die längst live sind, und Icons, die Sie ohnehin mögen.

Die Engine hinter dem Prompt tauschen

Standardmäßig schreibt Claude Sonnet 5 das Markup — präziser Vektorcode ist die Stärke dieser Modellfamilie. Lieber schneller oder gründlicher? Stufe wechseln oder in den erweiterten Einstellungen direkt eine Engine benennen.

SVG-Animationsgenerator — häufige Fragen

Häufige Fragen rund um das Erzeugen animierter SVGs. Weitere Fragen? Schreiben Sie an support@imagesv2.ai.

Am besten funktioniert deklarative Bewegung — Animationen, die eine festgelegte Choreografie abspielen:
(1) Web- und UI-Assets — Ladeanimationen, selbstzeichnende Logos, Wellenhintergründe, animierte 404-Seiten.
(2) Texteffekte — Schreibmaschinen-Reveals, kinetische Typografie, Handschrift, die sich selbst schreibt.
(3) Erklärgrafiken — kreisende Planeten, Zeitstrahlen, wachsende Diagramme, Funktionsprinzipien in der Schleife.

Nicht das richtige Werkzeug für: JavaScript-getriebene Simulationen oder Spiele (Physik mit Live-Werten, interaktive Applets); für statische Logos und Illustrationen nutzen Sie den GPT Image 2 SVG-Generator, für Flussdiagramme den KI-SVG-Diagrammgenerator.

Ja — genau so funktioniert diese Seite standardmäßig. Claude Sonnet 5 von Anthropic schreibt das SVG-Markup und die CSS-Keyframes direkt, Form für Form und Bild für Bild. Vektorcode aus einer Textbeschreibung zu schreiben, ist eine der Aufgaben, in denen aktuelle Spitzenmodelle bemerkenswert gut geworden sind, und Claude gehört dabei durchgehend zu den stärksten. Es ist hier allerdings nicht die einzige Option: Über die Stufenauswahl laufen auch Gemini 3.6 Flash und Kimi K3, und in den erweiterten Einstellungen lassen sich GPT-5.6, DeepSeek V4 Flash oder MiniMax M3 direkt benennen. Tippen Sie oben einen Satz ein und öffnen Sie die Codeansicht, um zu sehen, was Ihre Engine geschrieben hat.

Für alles auf einer Website gewinnt die animierte SVG auf ganzer Linie: einige Dutzend Kilobyte statt Megabyte, in jeder Zoomstufe gestochen scharf, endlos flüssige Schleifen und editierbarer Code statt eingebrannter Pixel. GIF hat genau einen Vorteil — es läuft auf Plattformen, die keine SVG-Uploads annehmen (manche Messenger und Social Feeds). Faustregel: SVG für die eigene Website, Folien und Dokumente; GIF nur dort, wo die Plattform es erzwingt. Sie müssen sich nicht vorab entscheiden: Jede Generierung lässt sich aus demselben Ergebnis als GIF und MP4 exportieren, gerendert in Ihrem Browser, ohne zusätzliche Credits.

Auf zwei Wegen:
(1) Als Bild — die .svg hochladen und in einem normalen img-Tag referenzieren. Die CSS-Keyframe-Animationen in der Datei laufen automatisch.
(2) Inline — den Code aus der Codeansicht kopieren und ins HTML einfügen. Inline ist der Weg, wenn Sie Hover-Effekte möchten, denn Interaktionszustände funktionieren nur, wenn die SVG in der Seite steht.
In beiden Fällen gibt es kein Skript zu laden und nichts zu installieren.

Nein. Die Ausgabe ist rein deklarative Animation — CSS-Keyframes (gelegentlich SMIL) in der SVG-Datei selbst. Kein GSAP, kein Lottie-Player, keine Laufzeitumgebung. Genau deshalb ist sie sicher zu inlinen, schnell geladen und über alle modernen Browser hinweg portabel. Eine ehrliche Einschränkung: Die meisten E-Mail-Clients frieren SVG-Animationen ein, für Newsletter ist ein GIF also weiterhin die sicherere Wahl.

Ja — das ist der zweite Modus. Laden Sie Ihre SVG hoch, beschreiben Sie die gewünschte Bewegung (Kontur Strich für Strich zeichnen, sanft schweben, die Akzentfarbe pulsieren lassen), und die KI ergänzt die Animation, während Ihre ursprünglichen Formen erhalten bleiben. Existiert Ihr Logo nur als PNG oder JPG, wandeln Sie es zuerst mit dem GPT Image 2 SVG-Generator um und animieren Sie es dann hier.

Ja, und beides ist kostenlos. SVG ist das eigentliche Artefakt; GIF und MP4 entstehen, indem Ihre Animation in Ihrem Browser Bild für Bild abgespielt wird — nichts wird hochgeladen, und es fallen keine zusätzlichen Credits an. Nutzen Sie GIF dort, wo SVG-Uploads nicht angenommen werden, und MP4 für Kurzvideos, Folien und Kursmaterial. Die MP4-Kodierung braucht einen Browser mit WebCodecs (Chrome, Edge und aktuelles Safari haben es); fehlt es, funktionieren SVG und GIF weiterhin, und die MP4-Schaltfläche bleibt lediglich deaktiviert.

10 Credits pro Generierung, genau wie bei den anderen SVG-Werkzeugen dieser Website. Neue Nutzer erhalten Gratis-Credits zum Ausprobieren.

Die meisten Animationen sind in deutlich unter einer Minute fertig. Szenen mit vielen Elementen oder langer Choreografie können bis zu zwei Minuten brauchen — die KI schreibt jede Form und jeden Keyframe von Hand.

Ja. Die von Ihnen erzeugten Animationen gehören Ihnen und sind kostenlos kommerziell nutzbar — in Kundenprojekten, in Produkten und in bezahlten Inhalten.

Bringen Sie Ihren ersten Vektor zum Leben

Ein Satz hinein, eine animierte SVG heraus — in jeder Größe scharf und überall einbettbar.

Animation erstellen

Suchst du ein anderes Tool?

Entdecke alle KI-Bildgeneratoren, Modelle, Konverter und Foto-Tools an einem Ort.

Alle KI-Bildtools ansehen