https://github.com/pshihn/rough-paint

Using Houdini CSS Paint API with Rough.js
https://github.com/pshihn/rough-paint

Last synced: about 1 month ago
JSON representation

Using Houdini CSS Paint API with Rough.js

• Host: GitHub
• URL: https://github.com/pshihn/rough-paint
• Owner: pshihn
• License: mit
• Created: 2018-07-11T22:12:41.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-12T17:46:36.000Z (almost 7 years ago)
• Last Synced: 2025-04-15T19:09:14.594Z (about 1 month ago)
• Language: JavaScript
• Size: 27.3 KB
• Stars: 94
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rough-paint

Using Houdini CSS [Paint API](https://developers.google.com/web/updates/2018/01/paintapi) with [Rough.js](https://roughjs.com/)

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

For example:

![sample image](https://i.imgur.com/gzSzxab.png)

```html

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

  }



  
Lorem ipsum dolor sit amet, consectetur adipiscing elit...

  



```


## Examples

![sample image](https://i.imgur.com/9hQujNk.png)

[Simple example - Live](https://pshihn.github.io/rough-paint/examples/basic.html)

[Rough Boxes - Live](https://pshihn.github.io/rough-paint/examples/boxes.html)

View the source code in the [examples folder](https://github.com/pshihn/rough-paint/tree/master/examples).

## CSS Properties

Following properties corresponding to [rough.js options](https://github.com/pshihn/rough/wiki#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](https://github.com/pshihn/rough/wiki#fillstyle).

`--rough-roughness` - Numeric value defining how rough the shape is. ([more](https://github.com/pshihn/rough/wiki#roughness))

`--rough-hachure-gap` - Numeric gap between hachure lines ([more](https://github.com/pshihn/rough/wiki#hachuregap))

`--rough-hachure-angle` - Numeric angle in degrees of hachure lines ([more](https://github.com/pshihn/rough/wiki#hachureangle))

`--rough-fill-weight` - Numeric value indicating the width of fill lines ([more](https://github.com/pshihn/rough/wiki#fillweight))

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

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

## License

[MIT License](https://github.com/pshihn/rough-paint/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)