Edit in JSFiddle

(function() {
     var canvas = document.querySelector('canvas'),
        con = canvas.getContext('2d'),
        w = canvas.width,
        h = canvas.height,
        play = false,
        dots = [],
        numDots = 1,
        time = 0;


    /*
    window.addEventListener('resize', resizeCan, false);    
    function resizeCan() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        w = canvas.width;
        h = canvas.height;
        
//        init();
    }
    resizeCan();

    var img = new Image();
    img.src = 'http://anti-code.com/canvas/html5/assets/isobar-feature.png';
    $(img).load(function() {
        con.drawImage(img, 0, 0 ); // Draw Logo
        grid();
    });
    */        

    // Constructor that defines new Dots for letter I
    var Dot = function(x, y,radius, mass, vX, vY, aX, aY, rgb) {
        // position, size, mass
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.mass = mass;
        // velocity
        this.vX = vX;
        this.vY = vY;
        // accelleration
        this.aX = aX;
        this.aY = aY;

        this.rgb = rgb;
    };

    function ADHD() {
        for( var i = 0; i < numDots; i++ ) {
        
            var x = (Math.random()*(w - 40)),
                y = 140 ,//+ (Math.random()*(h - 40)),
                radius = 4 + Math.random() * 11,
                mass = radius /4;
                vX = Math.random() * 4 - 2,
                vY = Math.random() * 4, // random number between -2 and 2
                aX = Math.random() * 0.2 - 0.1,
                aY = Math.random() * 0.2 - 0.15;
        
            dots.push(new Dot(x, y, radius, mass, vX, vY, aX, aY));
        }
    }
    
    function timer() {
        if( dots.length > 8 ) {
            dots.shift();
        } else {
            time = setInterval( function() {
                ADHD(); // lol
                timer();
            }, 100);
        }
    }
    

    /* RequestAnimFrame */
    if ( !window.requestAnimationFrame ) { window.requestAnimationFrame = (function() { 
    return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( 
    /* FrameRequestCallback */ callback, /* DOMElement */ element ) { 
    window.setTimeout( callback, 1000 / 60 ); }; })(); }

    function animate() {
        con.clearRect(0, 0, w, h);

        for( var i = 0; i < dots.length; i++ ) {
            var a = dots[i];

            /**
             * Pythagoras' Theorm
             * hyp = sqrt(x^2+y^2)
             */
            for( var j = i + 1; j < dots.length; j++ ) {
                var b = dots[j];
                
                // Collision detection
                var    dX = b.x - a.x,
                    dY = b.y - a.y,
                    dist = Math.sqrt((dX*dX) + (dY*dY));
                    
                if( dist < a.radius + b.radius ) {
                    var angle = Math.atan2(dY, dX),
                        sine = Math.sin(angle),
                        cosine = Math.cos(angle);
                    // rotating the circle angles to calcuate the direction to bounce
                    var x = 0,
                        y = 0;

                    var xB = dX * cosine + dY * sine,
                        yB = dY * cosine - dX * sine;

                    var vXb = b.vX * cosine + b.vY * sine,
                        vYb = b.vY * cosine - b.vX * sine;
                    
                    // conservation of motion using mass and velocity
                    var vTotal = vX - vXb;
                    vX = ((a.mass - b.mass) * vX + 2 * b.mass * vXb) / (a.mass + b.mass);
                    vXb = vTotal + vX;
                    
                    // move them apart so they dont stick together
                    xB = x + (a.radius + b.radius);
                    
                    // rotate circles back to original positions
                    a.x = a.x + (x * cosine - y * sine);
                    a.y = a.y + (y * cosine + x * sine);

                    b.x = a.x + (xB * cosine - yB * sine);
                    b.y = a.y + (yB * cosine + xB * sine);
                    
                    a.vX = vX * cosine - vY * sine;
                    a.vY = vY * cosine + vX * sine;
                    
                    b.vX = vXb * cosine - vYb * sine;
                    b.vY = vYb * cosine - vXb * sine;
                }
                    
            }
            
            // update the x and y axis with the velocity of each asteroid
            a.x += a.vX || a.radius;
            a.y -= a.vY || a.radius;

            // add the acceleration
            a.aX = 0
            a.aY = 0;            
            /* if( Math.abs(a.vX) < 10 ) { a.vX += a.aX; }
            if( Math.abs(a.vY) < 10 ) { a.vY += a.aY; }    */
            
                        
            // adding a boundry
            if( a.x - a.radius < 0 ) { 
                a.x = a.radius; 
                a.vX *= -1; 
                a.aX *= -1; 
            } else if( a.x + a.radius > w ) {
                a.x = w - a.radius;
                a.vX *= -1;
                a.aX *= -1;
            }
            if( a.y - a.radius < 0 ) {
                a.y = a.radius;
                a.vY *= -1;
                a.aY *= -1;
            } else if( a.y + a.radius > h ) {
                a.y = h - a.radius;
                a.vY *= -1;
                a.aY *= -1;
            }
            
            // draw the balls                
            clearInterval(time);
//            con.fillStyle = 'rgba(0, 100, 200, .6)';
            con.beginPath();
            con.arc(a.x, a.y, a.radius, 0, Math.PI*2, false);
            con.closePath();
            con.fill();
            //con.fillStyle = 'rgba(0,0,0,.5)'; //Alpha black
            con.fillStyle = 'hsla(8, 95%, 50%, 1)'; //Isobar Orange

            I();
            S();
            O();
            B();
            A();
            R();

        }
        
        if( play ) {
            requestAnimationFrame(animate);
        }
    }

    function init() {
        play = true;
        animate();    
        timer();
    }
    init();



    /*- I -*/
    function I() {
        con.beginPath();
        con.moveTo(39, 163);
        con.lineTo(39, 248);
        con.lineTo(60, 248);
        con.lineTo(60, 163);        
        con.closePath();
        con.arc(50, 142, 11, 0, Math.PI*2, false);
        con.closePath();
        con.fill();
    }

    /*- S -*/
    function S() {
        con.beginPath();

        // Top half of S
        con.moveTo(139, 168);
        BezCurve(70, 140, 32, 210, 110, 213);
        con.lineTo(110, 196);
        BezCurve(81, 192, 84, 172, 126, 182);
        con.lineTo(139, 168);
        
        // Rotate and reuse top half
        con.save();
        con.translate(215, 409);
        con.rotate(Math.PI);

        // Bottom half of S
        con.moveTo(148, 168);
        BezCurve(65, 135, 42, 211, 110, 213);
        con.lineTo(110, 196);
        BezCurve(81, 192, 90, 168, 134, 180);
        con.lineTo(148, 168);
        
        con.closePath();
        con.fill();    
        con.restore();
    }
    
    /*- O -*/
    function O() {
        /*
        con.beginPath();
        con.moveTo(195, 162);
        QuadCurve(237, 165, 242, 205);
        QuadCurve(239, 244, 196, 250);
        QuadCurve(150, 244, 149, 210);
        QuadCurve(150, 165, 195, 162);
        con.closePath();
        con.fill();
        */

        con.save();
        con.beginPath();
        con.translate(-6, 0);
        con.scale(1.04, 1);
        con.arc(193, 205, 44, 0, Math.PI*2, false);

        con.closePath();
        con.restore();
        con.fill();

        con.save();
        con.beginPath();
        con.fillStyle = 'white';
        con.arc(195, 205, 26, 0, Math.PI*2, false);

        con.closePath();
        con.fill();
        con.restore();
    }

    /*- B -*/
    function B() {
        con.beginPath();
        con.moveTo(269, 244);
        
        con.lineTo(269, 248);
        con.lineTo(247, 248);
        con.lineTo(247, 148);
        con.lineTo(269, 126);
        con.lineTo(269, 149);
        con.lineTo(269, 165);
        
        QuadCurve(310, 155, 330, 185);
        QuadCurve(345, 220, 314, 242);
        QuadCurve(294, 255, 269, 245);

        // inner b
        con.moveTo(269, 226);
        BezCurve(300, 242, 327, 215, 310, 190);
        QuadCurve(290, 173, 269, 187);
        
        con.closePath();
        con.fill();
    }

    /*- A -*/
    function A() {
        con.beginPath();
        con.moveTo(398, 196);

        con.lineTo(398, 248);
        con.lineTo(419, 248);
        con.lineTo(419, 196);
        // nose of A
        BezCurve(420, 145, 350, 160, 349, 173);
        con.lineTo(359, 183);
        BezCurve(384, 170, 399, 183, 397, 195);
        // belly of A
        BezCurve(405, 194, 340, 174, 339, 222);
        BezCurve(345, 260, 396, 257, 415, 224);

        con.moveTo(398, 220);
        con.lineTo(398, 226);
        // inner belly
        BezCurve(380, 242, 342, 224, 365, 208);
        QuadCurve(379, 200, 398, 210);
        
        con.closePath();
        con.fill();        
    }

    /*- R -*/
    function R() {
        con.beginPath();
        con.moveTo(427, 163);
        con.lineTo(427, 248);
        con.lineTo(449, 248);
        con.lineTo(449, 163);
        
        con.moveTo(449, 174);
        QuadCurve(452, 165, 473, 163)
        con.lineTo(473, 180);
        QuadCurve(456, 176, 449, 190)
        
        con.closePath();
        con.fill();
    }
    
    /**
     * Quadratic Curve Maker
     *
     * @quadraticCurveTo(controlX, controlY, endX, endY);
     * cX, cY - x and y coordinates for control point
     * eX, eY - end point
     */
    function QuadCurve(cX, cY, eX, eY) {
        this.cX = cX;
        this.cY = cY;
        this.eX = eX;
        this.eY = eY;
        return con.quadraticCurveTo(this.cX, this.cY, this.eX, this.eY);
    }
    
    /**
     * Bezier Curve Maker
     *
     * @bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
     * Cx1, Cy1 - x and y coordinates for first control point
     * Cx1, Cy1 - x and y coords for second control point
     * eX, eY     - end point
     */
    function BezCurve(Cx1, Cy1, Cx2, Cy2, eX, eY) {        
        this.Cx1 = Cx1;
        this.Cy1 = Cy1;
        this.Cx2 = Cx2;
        this.Cy2 = Cy2;
        this.eX = eX;
        this.eY = eY;
        return con.bezierCurveTo(this.Cx1, this.Cy1, this.Cx2, this.Cy2, eX, eY);
    }
    
    /**
     * Grid Lines
     */
    function grid() {
        // x axis grid lines
        for( var x = 0.5; x < 500; x += 20 ) {
            con.moveTo( x, 0 );
            con.lineTo( x, 400 );
        }
        // y axis grid lines
        for( var y = 0.5; y < 400; y += 20 ) {
            con.moveTo( 0, y );
            con.lineTo( 500, y );
        }
        con.strokeStyle = '#ccc';
        con.stroke();
    }    
    
    /**
     * Convert degrees to radians
     */
    function degRad(deg) {
        this.deg = deg || 1;
        return this.deg * (Math.PI / 180); // 0.0175 radians
    }

    /**
     * Cloud Maker
     */
    function Cloud() {
        context.beginPath(); // begin custom shape
        context.moveTo(170, 80);
        context.bezierCurveTo(130, 100, 130, 150, 230, 150);
        context.bezierCurveTo(250, 180, 320, 180, 340, 150);
        context.bezierCurveTo(420, 150, 420, 120, 390, 100);
        context.bezierCurveTo(430, 40, 370, 30, 340, 50);
        context.bezierCurveTo(320, 5, 250, 20, 250, 50);
        context.bezierCurveTo(200, 5, 150, 20, 170, 80);
        context.closePath(); // complete custom shape
        context.lineWidth = 5;
        context.strokeStyle = "#0000ff";
        context.stroke();
    }

    
})();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Isobar - A Higher Standard...</title>

<style>
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { position:relative; display:block; margin: 100px auto; }
</style>

</head>
<body>

<canvas id=can width=500 height=300>No U...</canvas>
    
</body>
</html>