Create Engaging SVG Path Animations with Vector Studio ToolCreate Engaging SVG Path Animations with Vector Studio Tool
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Dhileep's avatar
Dhileep Kumar
ā€¢ 4h
Vector Studio ā€“ Browser-Native SVG Path Engine https://drama-mobile-24925054.figma.site
A vector graphics studio built from scratch. Draw complex Bezier paths with a Pen Tool, manipulate curve handles (Sharp/Mirrored/Asymmetric), and drag interactive gradient overlays directly on the canvas.
Features a Signature Stroke Animation engine ā€” paths draw themselves using SVG pathLength normalization and CSS keyframes. Set duration and loop modes (Repeat, Mirror, Continuous).
Built with Figma Make + a fully functional React/TypeScript engine.
āœØ Pen Tool with cubic Bezier math šŸŽØ On-canvas gradient manipulators āœļø Stroke animation with loop modes šŸ‘ļø Preview Mode for cinematic view šŸ“¦ SVG Import/Export
#FigmaMakeathon
figmamakeathon
Dhileep's avatar
Dhileep Kumar
ā€¢ 4h
here is the video it wouldnt upload sorry
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started