rough-paint

Using Houdini CSS Paint API with Rough.js

Any element can be styled with rough.js using CSS only.

For example:

<style>
  .card {
    --rough-border-width: 3;
    --rough-fill: red;
    --rough-fill-weight: 9;
    --rough-fill-style: zigzag;
  }

  input {
    --rough-border-width: 3;
    --rough-fill: white;
    --rough-fill-style: solid;
  }
</style>
<div class="card">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <input type="text" placeholder="Enter some text">
</div>

Examples

Simple example - Live

Rough Boxes - Live

View the source code in the examples folder.

CSS Properties

Following properties corresponding to rough.js options can be set using CSS:

--rough-fill - color to fill the element background with.

--rough-fill-style - Fill style. Default is hachure. Other values can be solid, zigzag, cross-hatch, dots. See rough.js fill style.

--rough-roughness - Numeric value defining how rough the shape is. (more)

--rough-hachure-gap - Numeric gap between hachure lines (more)

--rough-hachure-angle - Numeric angle in degrees of hachure lines (more)

--rough-fill-weight - Numeric value indicating the width of fill lines (more)

--rough-border-width - Draw a rough border with the specified numeric width.

--rough-border-color - Color of the rough border.

License

MIT License (c) Preet Shihn