Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
fmquaglia
11,060 Pointssketchy hand-drawn style lines
Hello,
I am looking for some sort of library (ideally js and css) to make html containers to have hand-drawn-like borders.
This is to build a comic-book style for as website.
I would want to stay away from using static svgs because of at certain point using those would produce repetition on the line patterns. I would like to get the serendipity and uniqueness of sketchy and hand-drwan lines.
I've been looking at paper.js and raphael.js, but using the canvas element is not an option for me, because I want this style to be part of regular hypertext containers.
I would appreciate any hint towards this.
Thanks!
fmquaglia
11,060 Pointsfmquaglia
11,060 PointsI hate to answer my own questions, but here we go.
I finally used Raphaeljs (a library to generate SVG vector graphics with javascript) and Handdrawn.js (A Raphael plugin to add some wobbles on the SVG paths and in this way give it the sketchy look and feel).
I am using Angular to create a couple of directives to create an Angular mini framework for web-comic layouting.
Here a first proof of concept.
If you refresh you will find that the lines are slightly different each time. As in all AngularJS directives the style for the layout is very declarative.
A lot to improve yet.