using paper tadpoles crap !!!!!!

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/paperjs-v0.9.18/dist/paper-full.js"></script>
<div class="canvas">
    <canvas width="640" height="480" resize="true" id="canvas-1" style="background:black"></canvas>
    <script type="text/paperscript" canvas="canvas-1">
        // Adapted from Flocking Processing example by Daniel Schiffman:
        // http://processing.org/learning/topics/flocking.html

        background = new Raster('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/sky.jpg');
        background.position = view.center;
        background.size = view.bounds;
        background.on("load", function() {
            onResize()
        });

        var Boid = Base.extend({
            initialize: function(position, maxSpeed, maxForce) {
                var strength = Math.random() * 0.5;
                this.acceleration = new Point();
                this.vector = Point.random() * 2 - 1;
                this.position = position.clone();
                this.radius = 30;
                this.maxSpeed = maxSpeed + strength;
                this.maxForce = maxForce + strength;
                this.amount = strength * 10 + 10;
                this.count = 0;
                this.createItems();
            },

            run: function(boids) {
                this.lastLoc = this.position.clone();
                if (!groupTogether) {
                    this.flock(boids);
                } else {
                    this.align(boids);
                }
                this.borders();
                this.update();
                //this.calculateTail();
                this.moveHead();
            },

            createItems: function() {
                this.head = new Shape.Ellipse({
                    position: [0, 0],
                    size: [13, 8],
                    fillColor: 'white'
                });

                this.cloud = new Raster({
                   ...

CSS

/*Simple reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    /*You can use any kind of background here.*/
 /*  background-image:url(); */
    background-size:cover;
    background-repeat:no-repeat;
}
canvas {
    display: block;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}
html {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}
@font-face {
    font-family:'helveticaCndBld';
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.eot?#iefix') format('embedded-opentype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.woff') format('woff'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.ttf') format('truetype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.svg#svgFontName') format('svg');
}
@font-face {
    font-family:'TrajanPro3Bold';
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot');
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot') format('embedded-opentype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.woff') format('woff'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.ttf') format('truetype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.svg#TrajanPro3Bold') format('svg');
}