Can I vibecode SVGator?
KINDA · weekend projectThere is no network here and no data moat: it is a single-player editor that turns your own SVG into an animated SVG. An agent can absolutely build the spine in a session: parse the file, list the elements, keyframe transform and opacity on a timeline, emit CSS keyframes inside the SVG. What eats the weekend and then some is everything after transform: path morphing, stroke draw-on, motion along a path, a real bezier easing editor, group transform origins, and an export pipeline that does not break in Safari. The core loop survives DIY; the last 20 percent of the feature list is where the actual product lives. Build it if you animate two or three properties and hand-tune the rest, buy it if you ship illustrated micro-animations for a living.
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.
$ open in your agent (prompt prefilled, you press enter) or copy it raw · this prompt is generated from the build plan · improve it via PR
prompt copied. want to know what dies next week?
new verdicts + top votes, weekly. free. one-click out.
Animation tooling is unforgiving about details: a timeline that snaps wrong, an easing curve you cannot tweak, or an export that jitters in Safari makes the whole thing useless, and none of those are things you notice until you are three hours into a client deadline. SVGator has absorbed years of those bugs, and the effects catalog beyond simple transforms is genuine work. Paying is a way of buying someone else's cross-browser scar tissue instead of growing your own.
xPath morphing, stroke draw-on, and motion-along-path, which are the effects people buy this for
xA polished easing curve editor with presets that look intentional instead of linear
xExport targets beyond CSS: SMIL, JS runtime, Lottie, video
xCross-browser export sanity checks and the fixes for Safari's transform-origin quirks
xBuilt-in shape and text editing, so every asset change means a round trip to your vector editor
Nothing worth pointing at. That's why the prompt exists.
Can I vibecode SVGator?
Kinda. The core of SVGator is buildable in a weekend with the prompt on this page, but there are real gaps: Path morphing, stroke draw-on, and motion-along-path, which are the effects people buy this for, A polished easing curve editor with presets that look intentional instead of linear. Read the honest list above before committing.
How much does SVGator cost?
SVGator costs about $24/month (Pro, checked 2026-08-18), which is $288 per year.
What do I lose by replacing SVGator?
Honestly: Path morphing, stroke draw-on, and motion-along-path, which are the effects people buy this for; A polished easing curve editor with presets that look intentional instead of linear; Export targets beyond CSS: SMIL, JS runtime, Lottie, video; Cross-browser export sanity checks and the fixes for Safari's transform-origin quirks; Built-in shape and text editing, so every asset change means a round trip to your vector editor. If any of those are load-bearing for you, keep paying.
Is there an open-source alternative to SVGator?
No mature open-source alternative worth pointing at, which is exactly why the one-shot prompt on this page exists.