---
title: "Draw SVG — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Lucas · Buttons. Any SVG path writes itself"
canonical: "https://framer.elliotli.dev/component/draw-svg"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Draw SVG

# Draw SVG

Any SVG path writes itself

[View on Framer](https://framer.com/marketplace/components/draw-svg/?via=elliot-li)

![Draw SVG preview image 1](https://framer.elliotli.dev/og/component/draw-svg/b5df15d7d080a446/1600x1200.jpg)

## Summary

Any SVG path writes itself

## Description

Paste a full <svg> or just the d attribute of a path, and it draws itself stroke by stroke, in order, with a stagger you control.

Six triggers: on entering the viewport, immediately, on hover, on click, on a loop, and scroll-linked — where the drawing runs forward and backward with the wheel. An optional Replay button is built in.

A ghost of the finished drawing sits underneath at an opacity you choose, so the shape reads even before it is drawn. Optional fill once the outline closes. Impose your own stroke colour and width, or leave the pasted file's own colours untouched.

One thing worth knowing: the stagger applies per <path>, not per sub-path. A single path containing several M commands draws as one block — split your letters or shapes into separate paths and the cascade becomes visible.

Pure SVG, no dependencies. Honours prefers-reduced-motion, and shows the completed drawing inside the Framer canvas.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8379

## Details

- **Author**: Lucas
- **Price**: $5.00
- **Published**: 2026-08-05
- **Updated**: 2026-08-05
- **Added**: 2026-08-05
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow