❤
npm
Sign UpSign In

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

1.0.1 • Public • Published

Give all your svg's a cute hand-drawn feel.

Works server and client side. Accepts raw html files and DOM elements.

Usage

const svg = document.querySelector('#svg');
const raw = `
<!DOCTYPE html>
<html>
    <body>
        <svg viewBox="0 0 10 10">
  			<rect width="3" height="5" /> 
        </svg>
    </body>
</html>
`
 
const options = {
  roughness: 5,
  fillStyle: 'dots'
}
const lambda = (node, context) => {
  if (node.tagName === 'rect') {
    return { stroke: 'blue',  }
  } else if (context.fill === 'pink') {
    return false
  }
}
roughen(raw, options) // => string
roughen(svg, lambda) // => Element

API:

type Context = { fill?: string, stroke?: string, strokeWidth?: number }
type Options = RoughOptions | (node: Element, ctx: Context) => RoughOptions | boolean
type Input = string | Element
declare function roughen(node: Input, options?: Options) => Input

This library is using the awesome roughjs

Readme

Keywords

Package Sidebar

Install

npm i roughen

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

90.6 kB

Total Files

8

Last publish

Collaborators

  • oreilles
Try on RunKit
Report malware