Wondering what’s next for npm?Check out our public roadmap! »

    rough-markup
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    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:

    An example

    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.

    Install

    npm i rough-markup

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    29.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar