Sulley's Fur

index.jade

canvas(id='c', width='800', height='600')

script.js

var doc = document,
    canvas = doc.querySelector('#c'),
    cheight = canvas.height,
    cwidth = canvas.width,
    context = canvas.getContext('2d'),
    r = function(seed, step) {
      return Math.floor(Math.random()*seed)+step;
    },
    draw = function(t) {
      context.lineWidth = 1;
      context.beginPath();
      context.moveTo(0,0);
      context.strokeStyle = "rgba("+r(52,0)+","+r(160,0)+","+r(140,21)+",0.1)";
      
      context.bezierCurveTo(r(cwidth,0), Math.random()*cwidth, r(cwidth,0), r(cwidth,0), r(cwidth,0), r(cheight,0));
      
      context.quadraticCurveTo(r(cwidth,0),r(cheight,0),r(cwidth,0),r(cheight,0));
        context.stroke();
    };


(function animation(){
  window.requestAnimationFrame(animation);
  draw();
})();

style.scss

body {
  background: #000;
}
canvas {
  display: block;
}

Sulleys-Fur.markdown

Sulley's Fur

A random curve drawing using HTML5 Canvas Bezier and quadratic curves. RequestAnimationFrame loops the process.

A Pen by Andy on CodePen.

License.