Interactive SVG eliminates that loop entirely. Drop any SVG onto the canvas and it becomes a fully live, draggable vector editor — right where your design lives.
Live Anchor Editing: Drag any anchor point directly on the Framer canvas. Smooth and corner nodes update in real time with no lag.
Bezier Handle Control: Pull in/out handles independently per anchor. Smooth mode mirrors the opposite handle automatically; corner mode lets each side move freely.
Smooth ↔ Corner Toggle: Click any anchor without dragging to instantly switch between smooth curves and sharp corners.
4 Stroke Styles: Path, guides, anchors, and handlers each support solid, dashed, dotted (true round dots), and double stroke styles — all configurable from Framer’s property panel.
Auto-Reset Morph: Set the component to spring back to its original shape after editing — perfect for interactive logo and portfolio animations.
Touch & Mobile Ready: Adaptive hit areas automatically enlarge on touch devices so editing feels natural on any screen.
Custom SVG Input: Paste any SVG code directly into the property panel. Supports multi-path,
ViewBox-Aware Scaling: Stroke widths, anchor sizes, and handler sizes scale correctly regardless of the SVG’s internal coordinate system.
Copy the Component URL from the Framer Marketplace.
Paste it onto your Framer canvas.
In the right panel, paste your own SVG code into the Custom SVG field — or use the built-in circle to get started.
Click any anchor point to toggle smooth/corner. Drag anchors or bezier handles to reshape the path live.
Customize colors, stroke styles, sizes, and animation delays from the Property Controls panel.
Set After Edit to “Reset” to enable the spring-back morph animation for interactive prototypes.
Iklil Najma Muqtafa
