tiwutdev/vectorcraft-studio repository overview

⁠🚀 Features

⁠🎨 1. Precision Vector Creation & Node Editing

• Bezier Pen Tool (P): Create custom paths and curves with interactive bezier control handles and closing detection.
• Freehand Vector Brush (B): Smooth freehand drawing with real-time curve interpolation.
• Parametric Geometric Shapes:
  • Rectangles & Rounded Boxes with corner radius controls (R)
  • Circles & Ellipses (O)
  • 5-Point, 4-Point & Custom Spiked Stars (S)
  • Polygons & Hexagons
  • Dynamic SVG Typography & Text Labels (T)
• Direct Canvas Manipulation: Click, drag, scale, and rotate with 9-point visual transform handles and snap-to-grid.

⁠📚 2. Built-in Studio Asset Library

• 100+ Curated Vector Icons: Navigation, Interface, Media, Tech, Nature, Commerce, and Communication categories.
• Prebuilt Badges & Geometric Shapes: Shields, speech bubbles, rosette badges, clouds, hearts, and capsule pills.
• Interactive Animated Templates: Ready-to-use animated spinners, pulsing hearts, line-drawing checkmarks, and levitating sparkles.
• Visual Layer Hierarchy: Rename, reorder, duplicate (Ctrl+D), and delete layers.

⁠🎬 3. Multi-Track Animation Engine

• Retina-Crisp Canvas Time Ruler: Synchronized 1:1 pixel alignment between time markings and track keyframes.
• Draggable Playhead Scrubber: Real-time scrubbing across the ruler, timeline body, and tracks.
• Expandable Sub-Property Tracks: Dedicated tracks for individual properties (rotation, scale, strokeDashoffset, opacity, translateY).
• Interactive Keyframe Diamonds: Click-to-seek and drag-to-adjust keyframe timing live.
• + KF Add Keyframe Button: Quick-insert keyframes at the current playhead position.
• Transport Controls: Play/Pause (Space), Rewind, Loop toggle, Playback Speed (0.25x - 2.0x), and Timeline duration adjustment.

⁠⚡ 4. 1-Click Preset Animations

Apply instant, production-tested animation recipes to any vector layer with a single click:

• Stroke Draw / Line Reveal: Self-drawing stroke reveal using animated strokeDashoffset.
• Pulse / Heartbeat: Rhythmic breathing scale effect.
• Infinite Spin: Continuous 360° rotation around the element's geometric center.
• Gentle Float / Levitate: Soft hovering vertical floating animation.
• Bounce Pop: Energetic squash and elastic bounce.
• Wiggle / Shake: Playful side-to-side rotation shake.
• Fade Blink: Glowing opacity pulsing.
• Elastic Pop: Scale expansion with elastic overshoot easing.

⁠💻 5. Live 2-Way SVG Code Editor

• Inspect and directly modify raw SVG markup.
• Paste existing SVG paths or icons from Figma, Illustrator, or icon sets.
• Instant 2-way sync with the visual canvas stage.

⁠📦 6. Universal Export Center

Export your vector graphics into multiple industry-standard formats:

• Standalone Animated SVG (.svg): 100% self-contained SMIL animations that work directly in web browsers, markdown, Notion, and HTML image tags without external scripts.
• Pure CSS Keyframes (.css): Hardware-accelerated @keyframes animations ready for modern web apps.
• React Component (.jsx): Ready-to-import JSX component with embedded animated styles and customizable props (size, color, className).
• Clean Static SVG (.svg): Clean, minified, optimized SVG code without animation tags.
• Project JSON (.json): Save full project files including layers, colors, and animation timelines.

⁠⌨️ Keyboard Shortcuts

⁠🛠️ Quick Start & Installation

⁠Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

⁠Installation

# Clone the repository
git clone https://github.com/tiwut/svg-animation-creator.git

# Navigate to project directory
cd "svg animation creator"

# Install dependencies
npm install

# Start local development server
npm run dev

The application will start locally at http://localhost:5173/.

⁠Production Build

npm run build

The optimized production bundle will be built in the dist/ directory.

⁠🐳 Docker Deployment

⁠Quick Run from Docker Hub

docker run -d -p 8080:80 --name vectorcraft-studio tiwutdev/vectorcraft-studio:latest

⁠Run with Docker Compose

docker compose up -d

Access VectorCraft Studio at http://localhost:8080.

⁠Multi-Architecture Build & Push (linux/amd64, linux/arm64)

To build and push multi-platform images to tiwutdev/vectorcraft-studio using Docker Buildx:

./docker-create.sh

⁠👨‍💻 About the Developer

VectorCraft Studio was designed and built by Tiwut⁠.

• 🌐 GitHub Profile: https://github.com/tiwut⁠
• 💡 Project Goal: To provide designers and developers with a fast, zero-bloat, visually stunning in-browser studio for creating lightweight, production-ready animated SVG assets.

⁠📄 License

This project is open source and available under the MIT License⁠.