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.

Here's an example for drawing:

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):

npm i rough-markup

Or use directly in your HTML via CDN(like jsdelivr):

<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.