Kann ich SVGator vibecoden?

JEIN · Wochenendprojekt

Preis nicht belastbarKategorie 🎨 designersetzt von 0 Personen

Preis für Deutschland

Der Anbieter rechnet in US-Dollar ab

SVGator rechnet in US-Dollar ab: Pro 24 Dollar pro Monat bei Jahreszahlung, Starter 20 Dollar. Ein monatlich abgerechneter Preis steht nicht im Scrape, ein kostenloser Tarif ist vorhanden.

Für deutsche Unternehmen kann bei Softwareleistungen aus dem Ausland das Reverse-Charge-Verfahren gelten. Das hängt nicht von der Währung allein ab. Was du auf Rechnung und USt-Voranmeldung prüfen solltest →

geprüft am 17.09.2026 · Quelle ↗ · so prüfen wir

Hier fehlen Netzwerk und Datengraben: ein Einzelspieler-Editor, der dein eigenes SVG in ein animiertes SVG verwandelt. Ein Agent baut das Rückgrat in einer Sitzung: Datei parsen, Elemente auflisten, Transform und Deckkraft auf einer Zeitleiste keyframen, CSS-Keyframes im SVG ausgeben. Was das Wochenende und mehr frisst, ist alles nach Transform: Pfad-Morphing, Strich-Zeichnen, Bewegung entlang eines Pfads, ein echter Bezier-Editor fürs Easing, Transform-Ursprünge von Gruppen und eine Export-Pipeline, die in Safari nicht bricht. Die Kernschleife überlebt den Eigenbau, in den letzten 20 Prozent der Funktionsliste wohnt das eigentliche Produkt. Bau es, wenn du zwei oder drei Eigenschaften animierst und den Rest von Hand stimmst, kauf es, wenn du illustrierte Mikro-Animationen beruflich lieferst.

der Prompt

Build a local, single-page SVG animation editor. No accounts, no backend, no telemetry, no cloud.

Stack, no substitutions: Vite + React + TypeScript, Tailwind for styling, Zustand for state. Everything runs in the browser. Persist projects to IndexedDB via idb-keyval.

Core behavior:
1. Drag-and-drop or file-pick an .svg file. Parse it into the DOM, do not rasterize it. Auto-assign stable ids to any element that lacks one.
2. Left panel: a tree of the SVG's elements (g, path, rect, circle, text, etc). Clicking a node selects it and outlines it in the canvas.
3. Center: the live SVG, scaled to fit, with a zoom control and a checkerboard background.
4. Bottom: a timeline. Fixed duration set by the user (default 3s), a scrubber, play/pause/loop, and one row per animated element.
5. For a selected element, the right panel exposes animatable properties: translateX, translateY, scale, rotate, opacity. Setting a value at the current playhead position creates a keyframe diamond on that element's timeline row. Keyframes can be dragged horizontally and deleted.
6. Per-keyframe easing: linear, ease-in, ease-out, ease-in-out, plus a cubic-bezier text input. Store easing on the outgoing segment.
7. Preview must be exact: apply interpolated transforms live while scrubbing, using the same math the export uses so the preview never lies.

Export:
- One button: "Export animated SVG". Produce a single self-contained .svg file with a <style> block of @keyframes generated from the keyframes, one animation per animated element, plus transform-box: fill-box and an explicit transform-origin on every animated element so browsers agree.
- Second button: "Copy CSS only".
- Compose transforms in a fixed order (translate, rotate, scale) and document that order in the UI.

Explicitly out of scope, and say so in a README: path morphing, stroke draw-on animation, motion along a path, shape or text editing, filters, SMIL output, Lottie output, video export.

Also ship: a sample .svg in /public to test with, a Save/Load project list backed by IndexedDB, and a README with run instructions and the known Safari transform-origin caveat. No .env is needed since there are no secrets.

Antworte mir auf Deutsch. Oberfläche, Kommentare und README auf Deutsch, alle Bezeichner wie Tabellen, Spalten, Variablen, Routen und Dateinamen bleiben Englisch.

$ im Agenten öffnen (Prompt ist vorausgefüllt, du drückst Enter) oder direkt kopieren · dieser Bauplan ist noch auf Englisch, die Bitte um deutsche Antworten hängt unten dran · dieser Prompt wurde aus dem Bauplan erzeugt · Verbesserung einreichen

warum Menschen weiterhin bezahlen

Animationswerkzeuge verzeihen keine Details: Eine Zeitleiste, die falsch einrastet, eine Easing-Kurve, die du nicht anpassen kannst, oder ein Export, der in Safari ruckelt, macht das Ganze nutzlos, und nichts davon fällt dir auf, bevor du drei Stunden in einer Kundendeadline steckst. SVGator hat Jahre dieser Fehler geschluckt, und der Effektkatalog jenseits einfacher Transforms ist echte Arbeit. Zahlen heißt, die Browser-Erfahrung eines anderen zu kaufen, statt sie selbst zu sammeln.

Anmerkung der Redaktion

Gutes Eigenbau-Ziel, wenn deine Animationen Bewegungen, Blenden und Drehungen sind. Sobald sich eine Linie selbst zeichnen soll, geh zahlen.

was du verlierst

xPfad-Morphing, Strich-Zeichnen und Bewegung entlang eines Pfads, die Effekte, für die Leute das kaufen

xein polierter Easing-Editor mit Presets, die absichtsvoll statt linear wirken

xExportziele jenseits von CSS: SMIL, JS-Laufzeit, Lottie, Video

xBrowser-Prüfungen beim Export und die Korrekturen für Safaris Eigenheiten bei transform-origin

xeingebaute Form- und Textbearbeitung, sonst bedeutet jede Asset-Änderung einen Umweg über den Vektor-Editor

Vorarbeit · nutze diese Projekte, wenn du nicht selbst bauen willst

Nichts, das wir guten Gewissens empfehlen können. Deshalb gibt es den Prompt.

auf X teilen ↗„Ich habe SVGator mit einem Prompt ersetzt.“