Awesome

drauu

SVG-based drawing tool in browser. Built for Slidev.

Live Demo (built with Vanilla JavaScript!)

Features

Vanilla JavaScript - integrate into any framework you like
SVG-based - scalable, transparent, and serializable
Stylus / Touch pressure support
Headless (unstyled) - style it as you want
Undo / Redo stacks

Install

npm i drauu

<svg id="svg"></svg>

import { createDrauu } from 'drauu'

const drauu = createDrauu({
  el: '#svg',
  brush: {
    mode: 'stylus', // 'line', 'rectangle', 'ellipse'
    color: 'skyblue',
    size: 5,
  }
})

// change brush color
drauu.options.brush.color = 'red'

Credits

Inspired by

Thanks!

Sponsors

<p align="center"> <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg"> <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/> </a> </p>

License

MIT