Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rolyatmax/watercolor-canvas

Creating watercolor-style canvas art
https://github.com/rolyatmax/watercolor-canvas

canvas creative-coding generative-art watercolor

Last synced: 5 days ago
JSON representation

Creating watercolor-style canvas art

Awesome Lists containing this project

README

        

# watercolor-canvas

[![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)

Drawing watercolor effects to HTML canvas. Inspired by [this great blog post](http://www.tylerlhobbs.com/writings/watercolor) by [tyler hobbs](http://www.tylerlhobbs.com/).

![watercolor-canvas](/images/6.png?raw=true "watercolor-canvas")

## Install

Use [npm](https://npmjs.com/) to install.

```shell
npm install watercolor-canvas --save
```

## To do:

- [x] Publish package
- [x] Let user pass in colors, positions
- [ ] Document API

## Try me

[Demo](https://rolyatmax.github.io/watercolor-canvas)

Or clone this repo and run the demo:

```shell
npm install
npm start
```

To develop, also run:

```shell
npm run transpile -- --watch
```

## License

MIT, see [LICENSE.md](http://github.com/rolyatmax/react-geojson-map/blob/master/LICENSE.md) for details.

![watercolor-canvas](/images/2.png?raw=true "watercolor-canvas")

![watercolor-canvas](/images/1.png?raw=true "watercolor-canvas")

![watercolor-canvas](/images/3.png?raw=true "watercolor-canvas")

![watercolor-canvas](/images/4.png?raw=true "watercolor-canvas")

![watercolor-canvas](/images/5.png?raw=true "watercolor-canvas")

![watercolor-canvas](/images/7.png?raw=true "watercolor-canvas")