rough-markup
Version:
A markup-style wrapper for `rough.js`.
56 lines (37 loc) • 14.2 kB
Markdown
Rough Markup
============
The SVG-like markup language for [Rough.js][], a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style.
It's intended to be a utility lib to make [Rough.js][] method calls more elegant instead of [transforming SVG into rough style](https://www.npmjs.com/package/rougher).
Here's an example for drawing:
```js
import { render, svg } from "rough-markup";
render(
svg`
<rect x="10" y="10" width="580" height="380" fill="#fff" />
<circle x="100" y="100" r="30" fill="#fff" />
<polygon vertices="200,380 350,200 500,380" fill="#fff" fillStyle="zigzag" />
<polygon vertices="400,380 480,250 580,380" fill="#fff" fillStyle="zigzag" />
`,
"#canvas"
);
```
Which renders into an rough-style image into canvas:
Installation
------------
Via [npm][] (or other alternatives like yarn, pnpm):
```sh
npm i rough-markup
```
Or use directly in your HTML via CDN(like jsdelivr):
```html
<script src="https://cdn.jsdelivr.net/npm/rough-markup"></script>
```
API
------------
It provides one-to-one implementation to [Rough.js][]. P
Example
------------
See the example folder for more usage.
[Rough.js]: http://roughjs.com "The Rough.js Project"
[npm]: http://npmjs.com "The NPM community"