index.html

<!DOCTYPE html>
<html>
<head>
<script src="lib/jquery.min.js"></script>
<script src="lib/raphael-min.js"></script>
<script src="lib/Vegur.js"></script>
<script src="lib/cufon.js"></script>
<script src="gofigure.js"></script>
<style>
body {
    font-family: arial;
    padding: 20px;
}

#dds { background: url(paper-texture.jpg) 140px 0px no-repeat;
    padding-top: 100px;
    margin-left: -140px;
}

</style>

</head>
<body>
    <h1>gofigure.js - demo</h1>
Click the box. Works best in Chrome.
<div id="dds" style=""></div>
<script>

    var figure = gofigure.create('dds', '780', '450');
    figure.box(600, 50, 100, 200).animate();
    figure.centeredText(650, 270, "A box").animate();

    var steps = [
        figure.arrow(600, 150, 500, 150).centeredText(550, 167, "to"),
        figure.box(400, 50, 100, 200, { radius: 0 }).centeredText(450, 270, "Box with small text", {fontsize: 11}),
        figure.arrow(400, 150, 300, 150, {arrowheads: "end" }).centeredText(350, 167, "single head arrow", {fontsize: 11}),

        figure.centeredText(250, 270, "Slowly drawn box").box(200, 50, 100, 200, {duration: 5000, radius: 25 }),
    ];
    figure.bindClick(steps);

</script>
<a href="https://github.com/eoftedal/gofigure"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3">
            <feTurbulence baseFrequency="0.32065" seed="115" result="result1" numOctaves="1" type="turbulence"/>
            <feOffset result="result2" dx="-5" dy="-5"/>
            <feDisplacementMap scale="3.05" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
        </filter>
    </defs>
</svg>
<style>
#dds { filter: url(#chalk); -webkit-filter: url(#chalk);}
</style>


</body>
</html>