Getting the jQuery
In order to make this work, you first need to copy the link below and paste it in your code just before the end of the </body> tag.
Getting the Plugins
You need to download the plugins and place them in your code.
After you have downloaded and unzipped the file, you will have two scripts. Copy and paste these scripts into your website's folder.
Make a link to the scripts from your HTML document. Be sure to link "Raphael.js" first, and "Lazyline-painter.js" second, placing them underneath the jQuery script.
Making your Lineart
Now you need to make your lineart.
If you want to use my image, you skip the next little part and download the script here. Remember to link it to your HTML underneath the scripts we just downloaded. If you would like to use your own image, make sure that it is in SVG format, it doesn't have any fills, all of the lines have a start and end, and that it isn't over 1000 x 1000 in size.
Head on over to LazyLinePainter and drag your image into their converter near the bottom of the page.
You scripts should look like this:
Placing your Lineart
If you just want to place your lineart on your website without a start button, all you have left to do is insert it into your HTML with the following code:
If you used your own image, remember to replace "cupcake" with the name of your SVG file.
Step 5 - Optional
Adding the Button
If you want a button to restart your lineart, you will need to add some code to the previous step.
<div id="cupcake"><p id="button">go</p></div>
Step 6 - Optional
Styling your button
The following code is the styling for the button and its position to the cupcake.
You can alter the code to make the button look however you would like, then paste it into your css stylesheet.
margin: 50px auto;
font-family: bad-script, cursive;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
Step 7 - Optional
var button = $(document.getElementById('button'));