https://github.com/sebastian-meier/d3.sketchy

A tool to create sketchy backgrounds, shapes and lines
https://github.com/sebastian-meier/d3.sketchy

Last synced: 4 months ago
JSON representation

A tool to create sketchy backgrounds, shapes and lines

• Host: GitHub
• URL: https://github.com/sebastian-meier/d3.sketchy
• Owner: sebastian-meier
• License: mit
• Created: 2015-07-28T22:56:24.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-03T10:33:37.000Z (over 9 years ago)
• Last Synced: 2024-10-30T15:51:18.219Z (6 months ago)
• Language: JavaScript
• Size: 2.04 MB
• Stars: 245
• Watchers: 9
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-d3 - d3.sketchy - Creates sketchy backgrounds, shapes and lines (Miscellaneous)
• awesome-d3 - d3.sketchy - Creates sketchy backgrounds, shapes and lines (Miscellaneous)
• awesome-d3 - d3.sketchy - Creates sketchy backgrounds, shapes and lines (Miscellaneous)

README

        
# d3.sketchy

A tool to create sketchy backgrounds, shapes and lines

![Sketchy Rectangles](https://raw.githubusercontent.com/sebastian-meier/d3.sketchy/master/img/1_rect.png)

The library was inspired by [Handy](http://www.gicentre.net/handy) by [Jo Wood](http://www.gicentre.net/jwo/index/) et al.

The circle strokes use code from http://codepen.io/spencerthayer/pen/nhjwu by [Spencer Thayer](https://github.com/spencerthayer)

The library can draw [rectangles](http://prjcts.sebastianmeier.eu/sketch/examples/index_1.html) and [circles](http://prjcts.sebastianmeier.eu/sketch/examples/index_2.html)

![Sketchy Circle](https://raw.githubusercontent.com/sebastian-meier/d3.sketchy/master/img/2_circle.png)

Custom [shapes](http://prjcts.sebastianmeier.eu/sketch/examples/index_3.html) defined by an array of points.

![Sketchy Shape](https://raw.githubusercontent.com/sebastian-meier/d3.sketchy/master/img/3_1_shape.png)

Which can be drawn automatically or with [custom path functions](http://prjcts.sebastianmeier.eu/sketch/examples/index_4.html)

![Sketchy Shape](https://raw.githubusercontent.com/sebastian-meier/d3.sketchy/master/img/3_2_shape.png)

And of course outlines for [rectangles](http://prjcts.sebastianmeier.eu/sketch/examples/index_5.html)

![Sketchy Rectangle Stroke](https://raw.githubusercontent.com/sebastian-meier/d3.sketchy/master/img/4_rect_stroke.png)

and [circles](http://prjcts.sebastianmeier.eu/sketch/examples/index_6.html)

![Sketchy Circle Stroke](https://raw.githubusercontent.com/sebastian-meier/d3.sketchy/master/img/5_circle_stroke.png)

The density, angle and sketchiness can be customized through parameters and the thickness of the lines through css.

Here is an [interactive customizer](http://prjcts.sebastianmeier.eu/sketch/examples/index_2.html) that lets you play around with the parameters.

For in-depth documentation take a look at the docs, there are also various examples.