Vibecode SVGator
track this build5 steps, step by step0%KINDA · weekend project
There 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.
the project pack4 files · fastest path to a working personal build
You are building a lean indie version of SVGator. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== README.md ===== # SVGator indie build ## Goal Build the smallest trustworthy replacement for the core SVGator workflow for one developer or a tiny team. ## Scope Load an SVG, pick elements, set keyframes for transform and opacity on a timeline, scrub the preview, and export a self-contained animated SVG with inline CSS keyframes. ## Quick start 1. Install the documented dependencies. 2. Copy `.env.example` to `.env`. 3. Run the development command chosen during implementation. 4. Complete the acceptance checks in `BUILD_PLAN.md`. ## Honest limits This build deliberately does not replace: - 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 those capabilities are essential, use SVGator instead of pretending the gap is solved. ===== AGENTS.md ===== # Agent instructions - Optimize for a working, understandable weekend build. - Prefer the fewest moving parts that satisfy the brief. - Do not invent cryptography, security guarantees, APIs, or compliance claims. - Keep secrets out of source control and logs. - Add focused tests for destructive, security-sensitive, and data-loss paths. - Run the project checks before declaring the build complete. - Record any deliberate shortcut in the README under "Tradeoffs". ===== BUILD_PLAN.md ===== # Build plan ## Original build brief 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. ## Required capabilities - A modern browser - Node for the local dev server - SVG files you actually own, ideally with sensible element ids ## Delivery order 1. Scaffold the smallest runnable application and document its commands. 2. Implement the primary data model and core workflow. 3. Add validation, safe failure states, and persistence. 4. Cover the critical path with automated tests. 5. Exercise a clean install from the README and fix every missing step. ## Done when - A new user can go from clone to first successful workflow using only the README. - The core workflow works without paid infrastructure unless the brief requires it. - Tests cover the highest-risk behavior. - Known limitations are explicit rather than hidden. ===== .env.example ===== # Copy to .env and document every variable when it is introduced. # Never put real credentials in this file. APP_ENV=development # Add only values required by the selected implementation.
You are building a lean indie version of SVGator. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== README.md ===== # SVGator indie build ## Goal Build the smallest trustworthy replacement for the core SVGator workflow for one developer or a tiny team. ## Scope Load an SVG, pick elements, set keyframes for transform and opacity on a timeline, scrub the preview, and export a self-contained animated SVG with inline CSS keyframes. ## Quick start 1. Install the documented dependencies. 2. Copy `.env.example` to `.env`. 3. Run the development command chosen during implementation. 4. Complete the acceptance checks in `BUILD_PLAN.md`. ## Honest limits This build deliberately does not replace: - 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 those capabilities are essential, use SVGator instead of pretending the gap is solved. ===== AGENTS.md ===== # Agent instructions - Optimize for a working, understandable weekend build. - Prefer the fewest moving parts that satisfy the brief. - Do not invent cryptography, security guarantees, APIs, or compliance claims. - Keep secrets out of source control and logs. - Add focused tests for destructive, security-sensitive, and data-loss paths. - Run the project checks before declaring the build complete. - Record any deliberate shortcut in the README under "Tradeoffs". ===== BUILD_PLAN.md ===== # Build plan ## Original build brief 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. ## Required capabilities - A modern browser - Node for the local dev server - SVG files you actually own, ideally with sensible element ids ## Delivery order 1. Scaffold the smallest runnable application and document its commands. 2. Implement the primary data model and core workflow. 3. Add validation, safe failure states, and persistence. 4. Cover the critical path with automated tests. 5. Exercise a clean install from the README and fix every missing step. ## Done when - A new user can go from clone to first successful workflow using only the README. - The core workflow works without paid infrastructure unless the brief requires it. - Tests cover the highest-risk behavior. - Known limitations are explicit rather than hidden. ===== .env.example ===== # Copy to .env and document every variable when it is introduced. # Never put real credentials in this file. APP_ENV=development # Add only values required by the selected implementation.
You are building a production product version of SVGator. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== PRODUCT.md ===== # SVGator product brief ## Problem There 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. ## Product outcome Load an SVG, pick elements, set keyframes for transform and opacity on a timeline, scrub the preview, and export a self-contained animated SVG with inline CSS keyframes. ## Target user A serious builder who needs a maintainable product foundation rather than a one-off demo. ## Required capabilities - A modern browser - Node for the local dev server - SVG files you actually own, ideally with sensible element ids ## Explicit non-goals for v1 - 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 ## Success criteria - The primary workflow is measurable end to end. - Setup is reproducible in a clean environment. - Failure, recovery, and support paths are documented. - Product claims match what the implementation actually guarantees. ===== ARCHITECTURE.md ===== # Architecture ## Starting brief 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. ## Boundaries Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors. ## Production baseline - Configuration: validated at startup with safe local defaults where possible. - Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives. - Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions. - Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts. - Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists. - Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test. ## Decision records For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it. ===== AGENTS.md ===== # Agent instructions - Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code. - Implement milestone by milestone; keep each change reviewable and leave the application runnable. - Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present. - Never invent cryptography or silently weaken a requirement to make a test pass. - Use provider interfaces for external services and deterministic fakes in tests. - Add migrations and rollback or recovery notes for persistent data changes. - Log useful operational context without credentials, tokens, passwords, or personal data. - Update documentation and run all checks before completing a milestone. ===== MILESTONES.md ===== # Delivery milestones ## M0 — Decisions and scaffold - Confirm the runtime, persistence model, threat boundaries, and deployment target. - Create a reproducible local environment and continuous checks. ## M1 — Core workflow - Implement the smallest end-to-end product path with validation and tests. - Keep integrations behind interfaces. ## M2 — Trust layer - Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards. - Test abuse cases and destructive operations. ## M3 — Operability - Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration. ## M4 — Release gate - Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise. - Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations. ===== OPERATIONS.md ===== # Operations ## Before release - Validate configuration and secrets at startup. - Define backup, restore, and rollback procedures and test them. - Document logs, error tracking, health signals, and alert ownership. - Set dependency update and vulnerability review expectations. ## Incident checklist 1. Contain the issue without destroying evidence or user data. 2. Record the timeline and affected scope. 3. Rotate exposed secrets and revoke compromised sessions or credentials. 4. Restore from a verified source when needed. 5. Document the root cause, remediation, and regression test. ## Launch constraint Do not market omitted SVGator capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.
README.md
# SVGator indie build ## Goal Build the smallest trustworthy replacement for the core SVGator workflow for one developer or a tiny team. ## Scope Load an SVG, pick elements, set keyframes for transform and opacity on a timeline, scrub the preview, and export a self-contained animated SVG with inline CSS keyframes. ## Quick start 1. Install the documented dependencies. 2. Copy `.env.example` to `.env`. 3. Run the development command chosen during implementation. 4. Complete the acceptance checks in `BUILD_PLAN.md`. ## Honest limits This build deliberately does not replace: - 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 those capabilities are essential, use SVGator instead of pretending the gap is solved.
AGENTS.md
# Agent instructions - Optimize for a working, understandable weekend build. - Prefer the fewest moving parts that satisfy the brief. - Do not invent cryptography, security guarantees, APIs, or compliance claims. - Keep secrets out of source control and logs. - Add focused tests for destructive, security-sensitive, and data-loss paths. - Run the project checks before declaring the build complete. - Record any deliberate shortcut in the README under "Tradeoffs".
BUILD_PLAN.md
# Build plan ## Original build brief 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. ## Required capabilities - A modern browser - Node for the local dev server - SVG files you actually own, ideally with sensible element ids ## Delivery order 1. Scaffold the smallest runnable application and document its commands. 2. Implement the primary data model and core workflow. 3. Add validation, safe failure states, and persistence. 4. Cover the critical path with automated tests. 5. Exercise a clean install from the README and fix every missing step. ## Done when - A new user can go from clone to first successful workflow using only the README. - The core workflow works without paid infrastructure unless the brief requires it. - Tests cover the highest-risk behavior. - Known limitations are explicit rather than hidden.
.env.example
# Copy to .env and document every variable when it is introduced. # Never put real credentials in this file. APP_ENV=development # Add only values required by the selected implementation.
PRODUCT.md
# SVGator product brief ## Problem There 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. ## Product outcome Load an SVG, pick elements, set keyframes for transform and opacity on a timeline, scrub the preview, and export a self-contained animated SVG with inline CSS keyframes. ## Target user A serious builder who needs a maintainable product foundation rather than a one-off demo. ## Required capabilities - A modern browser - Node for the local dev server - SVG files you actually own, ideally with sensible element ids ## Explicit non-goals for v1 - 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 ## Success criteria - The primary workflow is measurable end to end. - Setup is reproducible in a clean environment. - Failure, recovery, and support paths are documented. - Product claims match what the implementation actually guarantees.
ARCHITECTURE.md
# Architecture ## Starting brief 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. ## Boundaries Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors. ## Production baseline - Configuration: validated at startup with safe local defaults where possible. - Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives. - Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions. - Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts. - Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists. - Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test. ## Decision records For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.
AGENTS.md
# Agent instructions - Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code. - Implement milestone by milestone; keep each change reviewable and leave the application runnable. - Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present. - Never invent cryptography or silently weaken a requirement to make a test pass. - Use provider interfaces for external services and deterministic fakes in tests. - Add migrations and rollback or recovery notes for persistent data changes. - Log useful operational context without credentials, tokens, passwords, or personal data. - Update documentation and run all checks before completing a milestone.
MILESTONES.md
# Delivery milestones ## M0 — Decisions and scaffold - Confirm the runtime, persistence model, threat boundaries, and deployment target. - Create a reproducible local environment and continuous checks. ## M1 — Core workflow - Implement the smallest end-to-end product path with validation and tests. - Keep integrations behind interfaces. ## M2 — Trust layer - Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards. - Test abuse cases and destructive operations. ## M3 — Operability - Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration. ## M4 — Release gate - Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise. - Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.
OPERATIONS.md
# Operations ## Before release - Validate configuration and secrets at startup. - Define backup, restore, and rollback procedures and test them. - Document logs, error tracking, health signals, and alert ownership. - Set dependency update and vulnerability review expectations. ## Incident checklist 1. Contain the issue without destroying evidence or user data. 2. Record the timeline and affected scope. 3. Rotate exposed secrets and revoke compromised sessions or credentials. 4. Restore from a verified source when needed. 5. Document the root cause, remediation, and regression test. ## Launch constraint Do not market omitted SVGator capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.
$ choose a build depth, inspect the files, then open the complete pack in your agent · this prompt is generated from the build plan · improve it via PR
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.
share on X ↗"I just replaced SVGator ($24/mo) with one prompt"
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.