/Breaking-Bad.markdown

## Breaking-Bad.markdown

      
    Raw
  

              Breaking-Bad.markdown
            
          
    Breaking Bad

A tribute to the best fucking series in the world.
Just some CSS and SVG. I created the SVG from the original Logo with Photoshop (path) and Illustrator (SVG).
The making of: http://timpietrusky.com/breaking-bad-logo
The original Logo is © by American Movie Classics Company LLC.
A Pen by Tim Pietrusky on CodePen.
License.

  
## index.html
<!--
  Breaking Bad

  A tribute to the best fucking series in the world.

  Just some CSS and SVG. I created the SVG from the original Logo with
  Photoshop (path) and Illustrator (SVG).

  The original Logo is © by American Movie Classics Company LLC.


  2012 by Tim Pietrusky
  timpietrusky.com
-->


<!-- Breaking Bad Logo -->
<div class="wrapper">
<section id="breakingbad">
  <span class="chemical-element">
    Br
    <div class="desc" role="top-left">79.904</div>
    <div class="desc" role="top-right">
      -1
      +1
      +5
    </div>
    <div class="desc big" role="bottom-left-1">35</div>
    <div class="desc" role="bottom-left-2">2-8-18-7</div>
  </span>

  <span class="title-1">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="309px" height="110px" viewBox="-7.328 -8.539 309 110" enable-background="new -7.328 -8.539 309 110" xml:space="preserve">
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M234.672,83.211c1.315-3.006,4.31-4.078,5-4.25 c2-0.5-5,7.625,4,13.875C246.939,95.105,231.071,91.442,234.672,83.211z"/>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M239.547,58.836c-1.689,0.422-4.875,3.5-3.25,9.125c0.646,2.237,3.795,3.512,6.345,4.617c1.575,0.682,2.558,1.774,3.879,2.201c1.694,0.547,3.702,0.403,5.651,1.182c3.125,1.25,17-3.375,24.75-0.875s10.125,11.875-1.375,14.125s-26,2.125-24.375,3.25s14.875,2.75,23.375-0.125s10.75-2.5,13.25-10.375s-9.625-13-23.125-11.75s-22.25-0.75-22.25-2.375c0,3.01-0.796-0.809-1.287-4.438C240.804,60.949,241.36,58.383,239.547,58.836z"/>
    <g>
      <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M281.297,30.461c0-1.5-11.625-6.125-14.875-7.125c-2.4-0.738-21.808-3.803-27.125,10c-6.5,16.875,10.398,26.224,11.375,27.125c1.625,1.5,8.5,2.375,14.125,0.75s12.5-9.125,15.125-12S281.297,31.961,281.297,30.461z M272.214,47.756c-0.713,4.616-4.275,7.217-7.917,8.08c-4.355,1.032-7.909,1.136-11.021-2.343c-4.526-5.062-3.002-18.75,6.753-19.821c7.16-0.786,9.268,3.681,12.143,6.789C273.6,42.004,272.496,45.934,272.214,47.756z"/>
    </g>
</g>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M248.172,29.711c-1.362,0.545,14.754-13.052,23.875,2.5C269.023,27.055,249.813,29.054,248.172,29.711z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M277.922,26.586c-0.91,0,5.75-3.875,10.75,0.875c4.649,4.417,0.143,8.5-0.875,8.5c-3,0-7-0.125-1.625-7.25C289.032,24.919,277.895,26.586,277.922,26.586z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M180.672,71.336c1.031-0.75,3.625-3.625,4.625-5s-0.125-34.875-0.875-35.75s0-5.875-1.125-6s-3.125-0.375-2.875-1.125s8.5-1.75,9.875,1.125s3.25,3.125,4.125,2.875s2.375,4.625,1.375,5.5s2.625,1.125,5-1.5s8.375-4.625,15.875-5.375c6.441-0.644-6.66-3.593-8.375-3.25c-1.875,0.375,3.25-3.125,10.75-0.75s9.375,8.5,9.625,13.375c0.249,4.848,0.017,29.298,1.25,32.875c1.25,3.625,3.125,3,3.75,3.375s-13.625,0.75-14.625,0.25s2.625-2.125,4.125-4.375s-2.375-3.125-7.25-3.875c-0.378-0.058-1.122-33.775-1.5-30.75c0.125-1-6-6.5-17.5,6.5c-1.037,1.172,0.162,25.411-1.625,24.875c-1.25-0.375-5.375,1.25-3.75,3.625s5.625,3.5,4.5,3.75S179.297,72.336,180.672,71.336z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M160.672,70.461c1.25-0.375,2.25-0.25,2.125-4.25s0.25-30.625,0.5-31.625s1.625-0.75,2.375-1.75s0-5.125-1-5.5s-5.75-2.625-6.25-3.5s5-4.625,9.625-3.75c3.078,0.583,7.875,1.625,4,7.875c-2.15,3.469,1.827,34.449,0,39.625c-0.75,2.125,2.125,3.125,2.875,4.125c0.645,0.86-13.007,1.008-14,0.125C160.778,71.708,160.107,70.63,160.672,70.461z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M167.547,7.586c2.535-0.4,5.675-3.839,2.125-6.375c-4.035-2.882-6.007,0.215-6.5,0.75C161.122,4.182,164.722,8.032,167.547,7.586z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M100.672,71.336c-0.952,0,4.5-3.875,5-5.5s-0.5-60.75-0.5-60.75s-2.375-3.5-4.75-3.625s8.125-2.875,10.125,0.5s0.125,10,0.75,9.625s4.375,3,5,2.75s0.5,26.375,0.375,26.75s1.5,4.875,1.25,5.625s20.375-17.25,20.75-18.375s-1-2.625-4.125-4.625s16.25-2,18.625,0.875c0.14,0.169-7.432,3.081-6.875,4.75c0.125,0.375,0.75,2.75-0.75,2.75s-14.375,13.5-14.625,14.5s21.125,25.125,24.25,24.5c1.89-0.378-11.431,2.461-17.875,0.5c-2.875-0.875,4.625-3,3.875-4s-16.875-16.625-20.25-18.25s-4,3.125-4.75,3.625s1,11-0.375,11.375s-4.75,2.5-3.75,2.625
    s0.75,3.375,3.875,4.625C119.88,73.169,103.463,71.336,100.672,71.336z"/>
<g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M91.679,69.193c0.218-0.296-0.156-27.612-0.072-27.905c2.628-9.174-4.629-22.5-16.935-20.411c-3.036,0.516,6.358,2.869,7.721,3.457c3.471,1.497,4.934,4.976,3.279,5.46c-4.03,1.179-6.902-0.563-7.417-1c-0.799-0.679-14.84-0.877-15.333,0.333c0.01-0.024-3.955,1.886-5.167,0.5c-0.301-0.343-1.283-3.212-1.583-3.083c-1.682,0.721-6,11.5,2.417,11.417c7.517-0.074-1.568-4.709,15.917-5.5c6.846-0.31,7.442,5.796,7.302,7.107c-0.342,3.192-2.755,4.375-6.135,4.143c-6.083-0.417-22.167,3.417-25.667,11.917c-3.39,8.231,8.167,19.991,13.917,17.167c2.913-1.431-3.357-0.902-3.083-5.083c0.089-1.359,3.64-0.825,6.578-1.133c3.157-0.332,5.736-1.469,6.422-1.95c3.917-2.75,9.333-4,11.25-0.917c1.337,2.15,6.636,9.822,8.833,9.333C95.675,72.655,91.963,69.342,91.679,69.193z M80.755,56.877c-3.333,4.25-10.667,4.583-14,4.833c-3.333,0.25-8.083-1.167-6.333-5.667s13.45-9.873,19.167-8.833C81.527,47.563,80.4,57.331,80.755,56.877z"/>
    </g>
</g>
<g>
    <g>
        <path fill="#fff" d="M46.088,45.377c-0.833-27.333-22.667-23.667-26.917-23.167s-19.5,2.5-19.167,27.667c0.333,25.167,23,24,22.417,23.833C20.066,73.038,6.05,64.78,10.505,62.127c0.965-0.574,10.617,2.468,11.809,2.718c8.407,1.765,17.338-1.1,17.607-1.885c-0.351,1.02-5.816,8.564-6.917,8.917c11.641-3.732,13.5-13.833,9.25-14.833s-4.75,1-14.583,3.75c-8.896,2.487-18.104-10.349-15.333-13.75C14.527,44.358,46.122,46.48,46.088,45.377z M24.838,22.877c7.75,0.25,6.917,1.583,0.5,3c-6.417,1.417-10.75,0.167-11.417,0.417C12.342,26.887,17.088,22.627,24.838,22.877z M13.672,40.377c0.684-0.214,0.667-9.583,11.5-9.75c9.755-0.15,9.824,9.594,9.417,10.083C34.172,41.211,12.338,40.794,13.672,40.377z"/>
    </g>
</g>
</svg>

    </span>

    <br>

    <span class="chemical-element">
        Ba
        <div class="desc" role="top-left">137.33</div>
        <div class="desc" role="top-right">+2</div>
        <div class="desc medium" role="bottom-left-1">56</div>
        <div class="desc" role="bottom-left-2">2-8-18-7</div>
    </span>

    <span class="title-2">
        <svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="63px" height="91px" viewBox="-6.379 -7.374 63 91" enable-background="new -6.379 -7.374 63 91" xml:space="preserve">
<g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M48.455,71.626c-0.167-2.333-2.333-66.5-1.167-69c1.851-3.966-15.406-2.701-11.5-1c10.333,4.5,8.333,10,7.5,11.833c-0.833,1.833-6,1.333-5.333,2.833c0.667,1.5,0.667,18.5-1.333,19c-3.996,0.999-0.838-2.276-12.833-5.667c-8.569-2.422-13.6,1.171-17.367,4.968c-3.713,3.743-5.559,7.84-5.133,7.698c-1.523,0.508-6.476,33.714,22.667,35.333c5.335,0.296,9.349-3.76,7.667-4c0.636,0.091-11.414,3.298-14.5,1c-7.758-5.777-5.298-10.445-5.167-9.833c0.5,2.333,8.167,5.333,13.5,4.167c5.121-1.121,9.545-7.824,12.833-7.167c0.833,0.167,0.667,5,0.5,6c-0.167,1,2.833-0.333,4.167,0.5c1.333,0.833,0.5,2.667,1,5.333s7.5,1.5,8,0.667C52.455,73.46,48.621,73.96,48.455,71.626z M37.455,47.793c-0.5,3.667-1.833,14.167-13,15.833c-11.725,1.75-10.442-13.694-10.5-13.5c0.454-1.515-3.167-14.167,11.333-15.333C31.25,34.313,38.048,43.439,37.455,47.793z"/>
    </g>
</g>
</svg>

    </span>

  <canvas id="smoke"></canvas>
</section>
</div>
<!-- /Breaking Bad Logo -->


<!-- Breaking Bad theme -->
<audio></audio>

<div id="player">
  <svg role="paused" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" id="layer1" width="40px" height="40px" viewBox="0 0 75 75">
  <g><polygon
     points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
     style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;" />
  <path
     d="M 48.651772,50.269646 69.395223,25.971024"
     style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cc" />
  <path
     d="M 69.395223,50.269646 48.651772,25.971024"
     style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cc" />
  </g>
  </svg>

  <svg role="playing" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" width="40px" height="40px" viewBox="0 0 75 75">
    <g>
      <polygon
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769" style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;"
/>
    <path
      	d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
		<path
			d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>

    <path
			d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
			style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
		</g>
	</svg>
</div>

## script.js
/**
  Breaking Bad

  A tribute to the best fucking series in the world.

  The making of: http://timpietrusky.com/breaking-bad-logo


  Just some CSS and SVG. I created the SVG from the original Logo with
  Photoshop (path) and Illustrator (SVG).

  The original Logo is © by American Movie Classics Company LLC.


  2012 by Tim Pietrusky
  timpietrusky.com
**/

/**
 * @Gray Ghost Visuals: The theme is for you!
 *
 * Thanks to televisiontunes.com for the Breaking Bad theme
 * http://www.televisiontunes.com/Breaking_Bad.html
 */
var audio = $('audio').get(0),
    _paused = $('svg[role="paused"]'),
    _playing = $('svg[role="playing"]');

audio.src = Modernizr.audio.ogg ?
  'http://timpietrusky.com/cdn/breaking_bad_intro.ogg' :
  'http://timpietrusky.com/cdn/breaking_bad_intro.mp3';

_paused.click(function() {
  $(this).css('display', 'none');
  _playing.css('display', 'block');
  audio.play();
});

_playing.click(function() {
  $(this).css('display', 'none');
  _paused.css('display', 'block');
  audio.pause();
});

// Set to start
$("audio").bind('ended', function(){
    _playing.css('display', 'none');
    _paused.css('display', 'block');
    this.currentTime = 0;
});

/**
 * Thanks to Ed Welch for his "smoke"-effect
 * http://astronautz.com/wordpress/creating-realistic-particle-effect-with-html5-canvas/
 */
var lastRender = new Date().getTime();
var context;
var smoke_1 = new ParticleEmitter();
var smoke_2 = new ParticleEmitter();
var smoke_3 = new ParticleEmitter();
var CANVAS_WIDTH = 500;
var CANVAS_HEIGHT = 400;
var dirtyLeft = 0;
var dirtyTop = 0;
var dirtyRight = CANVAS_WIDTH;
var dirtyBottom = CANVAS_HEIGHT;
var windVelocity = 0.01;
var count = 0;

window.requestAnimFrame = (function () {
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function ( c ) {
            window.setTimeout( c, 16.6 );
        };
})();

init();

function init() {
    var canvas = $('#smoke').get(0);
    if (canvas.getContext) {
        context = canvas.getContext('2d');
    } else {
        return;
    }

    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

    var img_smoke_1 = new Image(),
        img_smoke_2 = new Image(),
        img_smoke_3 = new Image();

    img_smoke_1.src = 'http://timpietrusky.com/cdn/smoke_1.png';
    img_smoke_2.src = 'http://timpietrusky.com/cdn/smoke_2.png';
    img_smoke_3.src = 'http://timpietrusky.com/cdn/smoke_3.png';

    smoke_1.m_alpha = 0.2;
    smoke_3.m_speed = 0.001;
    smoke_1.init(.142, .631, 90, img_smoke_1);

    smoke_2.m_alpha = 0.3;
    smoke_2.init(.322, .753, 90, img_smoke_2);

    smoke_3.m_alpha = 0.1;
    smoke_3.m_speed = 0.02;
    smoke_3.init(.222, .553, 90, img_smoke_3);

    requestAnimFrame(render);
}

function ParticleEmitter() {
    this.m_x;
    this.m_y;
    this.m_dieRate;
    this.m_image;
    this.m_speed = 0.04;
    this.m_alpha = 1.0;

    this.m_listParticle = [];

    // ParticleEmitter().init function
    // xScale = number between 0 and 1. 0 = on left side 1 = on top
    // yScale = number between 0 and 1. 0 = on top 1 = on bottom
    // particles = number of particles
    // image = smoke graphic for each particle
    this.init = function(xScale, yScale, particles, image) {
        // the effect is positioned relative to the width and height of the
        // canvas
        this.m_x = CANVAS_WIDTH * xScale;
        this.m_y = CANVAS_HEIGHT * yScale;
        this.m_image = image;
        this.m_dieRate = 0.95;
        // start with smoke already in place
        for ( var n = 0; n < particles; n++) {
            this.m_listParticle.push(new Particle());
            this.m_listParticle[n].init(this, n * 50000 * this.m_speed);
        }
    }

    this.update = function(timeElapsed) {
        for ( var n = 0; n < this.m_listParticle.length; n++) {
            this.m_listParticle[n].update(timeElapsed);
        }
    }

    this.render = function(context) {
        for ( var n = 0; n < this.m_listParticle.length; n++) {
            this.m_listParticle[n].render(context);
        }
    }
};

function Particle() {
    this.m_x;
    this.m_y;
    this.m_age;
    this.m_xVector;
    this.m_yVector;
    this.m_scale;
    this.m_alpha;
    this.m_canRegen;
    this.m_timeDie;
    this.m_emitter;

    this.init = function(emitter, age) {
        this.m_age = age;
        this.m_emitter = emitter;
        this.m_canRegen = true;
        this.startRand();
    }

    this.isAlive = function() {
        return this.m_age < this.m_timeDie;
    }

    this.startRand = function() {
        // smoke rises and spreads
        this.m_xVector = Math.random() * 0.5 - 0.25;
        this.m_yVector = -1.5 - Math.random();
        this.m_timeDie = 20000 + Math.floor(Math.random() * 12000);

        var invDist = 1.0 / Math.sqrt(this.m_xVector * this.m_xVector
                + this.m_yVector * this.m_yVector);
        // normalise speed
        this.m_xVector = this.m_xVector * invDist * this.m_emitter.m_speed;
        this.m_yVector = this.m_yVector * invDist * this.m_emitter.m_speed;
        // starting position within a 20 pixel area
        this.m_x = (this.m_emitter.m_x + Math.floor(Math.random() * 20) - 10);
        this.m_y = (this.m_emitter.m_y + Math.floor(Math.random() * 20) - 10);
        // the initial age may be > 0. This is so there is already a smoke trail
        // in
        // place at the start
        this.m_x += (this.m_xVector + windVelocity) * this.m_age;
        this.m_y += this.m_yVector * this.m_age;
        this.m_scale = 0.01;
        this.m_alpha = 0.0;
    }

    this.update = function(timeElapsed) {
        this.m_age += timeElapsed;
        if (!this.isAlive()) {
            // smoke eventually dies
            if (Math.random() > this.m_emitter.m_dieRate) {
                this.m_canRegen = false;
            }
            if (!this.m_canRegen) {
                return;
            }
            // regenerate
            this.m_age = 0;
            this.startRand();
            return;
        }
        // At start the particle fades in and expands rapidly (like in real
        // life)
        var fadeIn = this.m_timeDie * 0.05;
        var startScale;
        var maxStartScale = 0.3;
        if (this.m_age < fadeIn) {
            this.m_alpha = this.m_age / fadeIn;
            startScale = this.m_alpha * maxStartScale;
            // y increases quicker because particle is expanding quicker
            this.m_y += this.m_yVector * 2.0 * timeElapsed;
        } else {
            this.m_alpha = 1.0 - (this.m_age - fadeIn)
                    / (this.m_timeDie - fadeIn);
            startScale = maxStartScale;
            this.m_y += this.m_yVector * timeElapsed;
        }
        // the x direction is influenced by wind velocity
        this.m_x += (this.m_xVector + windVelocity) * timeElapsed;
        this.m_alpha *= this.m_emitter.m_alpha;
        this.m_scale = 0.001 + startScale + this.m_age / 4000.0;
    }

    this.render = function(ctx) {
        if (!this.isAlive())
            return;
        ctx.globalAlpha = this.m_alpha;
        var height = this.m_emitter.m_image.height * this.m_scale;
        var width = this.m_emitter.m_image.width * this.m_scale;
        // round it to a integer to prevent subpixel positioning
        var x = Math.round(this.m_x - width / 2);
        var y = Math.round(this.m_y + height / 2);
        ctx.drawImage(this.m_emitter.m_image, x, y, width, height);
        if (x < dirtyLeft) {
            dirtyLeft = x;
        }
        if (x + width > dirtyRight) {
            dirtyRight = x + width;
        }
        if (y < dirtyTop) {
            dirtyTop = y;
        }
        if (y + height > dirtyBottom) {
            dirtyBottom = y + height;
        }
    }
};

function render() {
    // time in milliseconds
    var timeElapsed = new Date().getTime() - lastRender;
    lastRender = new Date().getTime();
    context.clearRect(dirtyLeft, dirtyTop, dirtyRight - dirtyLeft, dirtyBottom - dirtyTop);
    dirtyLeft = 1000;
    dirtyTop = 1000;
    dirtyRight = 0;
    dirtyBottom = 0;

    smoke_1.update(timeElapsed);
    smoke_1.render(context);

    smoke_2.update(timeElapsed);
    smoke_2.render(context);

    smoke_3.update(timeElapsed);
    smoke_3.render(context);

    windVelocity += (Math.random() - 0.5) * 0.002;
    if (windVelocity > 0.015) {
        windVelocity = 0.015;
    }
    if (windVelocity < 0.0) {
        windVelocity = 0.0;
    }

    requestAnimFrame(render);
}

## style.scss
@import "compass/css3";
* {
    box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background: darken(rgb(33,53,18), 10%);
  overflow: hidden;
}

%helper-alpha {
  position: absolute;
  left: 50%;
  top: 50%;
}

/**
 *
 * Absolute position in the center of the parent element (-50%, -50%).
 *
 */
%center {
  @extend %helper-alpha;
  @include transform (translate(-50%, -50%));
}


.wrapper {
  @extend %center;
}


#breakingbad {
  position: relative;
  width: 530px;
  border: .5em solid rgba(255, 255, 255, .1);
  padding: 1em;
  overflow: hidden;

  &:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1337;
    background: darken(rgb(33, 53, 18), 5%);
  }
}

span {
  color:#fff;
}

.chemical-element {
  width:165px;
  height:165px;
  position:relative;

  font: bold 95px Arial;
  color:#fafffb;

  padding:25px 25px 25px 30px;
  border:3px solid #DDFFE2;

  display:inline-block;
  background: linear-gradient(-45deg, rgba(92,190,115,1) 1%,rgba(24,43,4,1) 100%);

  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.chemical-element:nth-child(4) {
  margin-left:165px;
  padding-left:23px;
}

.desc {
  position:absolute;
  font: bold 13px Arial;
  color:rgba(244, 247, 245, .95);
}

.big {
  font: bold 20px Arial;
}

.medium {
  font: bold 17px Arial;
}

div[role="top-left"] {
  top:8px;
  left:10px;
}

div[role="top-right"] {
  top:8px;
  right:5px;
  text-align:right;
  width:25px;
}

div[role="bottom-left-1"] {
  bottom:20px;
  left:5px;
  text-align:left;
}

div[role="bottom-left-2"] {
  bottom:5px;
  left:5px;
  text-align:left;
}

.title-1,
.title-2 {
  width:50px;
  display:inline-block;
  height: 130px;
  vertical-align: bottom;
}

.title-2 {
  height: 134px;
}

#smoke {
  position: absolute;
  z-index: -1;
  left: 22%;
  top: 0;
}

audio {
  display:none;
}

#player {
  position: fixed;
  top: 10%;
  right: 10%;
  transition: all .3s ease-in;
  opacity: .1;
  cursor: pointer;
}

#player:hover {
  opacity:1;
}

#player svg[role="playing"] {
  display:none;
}
	<!--
	Breaking Bad

	A tribute to the best fucking series in the world.

	Just some CSS and SVG. I created the SVG from the original Logo with
	Photoshop (path) and Illustrator (SVG).

	The original Logo is © by American Movie Classics Company LLC.


	2012 by Tim Pietrusky
	timpietrusky.com
	-->





	<!-- Breaking Bad Logo -->
	<div class="wrapper">
	<section id="breakingbad">
	<span class="chemical-element">
	Br
	<div class="desc" role="top-left">79.904</div>
	<div class="desc" role="top-right">
	-1
	+1
	+5
	</div>
	<div class="desc big" role="bottom-left-1">35</div>
	<div class="desc" role="bottom-left-2">2-8-18-7</div>
	</span>

	<span class="title-1">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="309px" height="110px" viewBox="-7.328 -8.539 309 110" enable-background="new -7.328 -8.539 309 110" xml:space="preserve">
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M234.672,83.211c1.315-3.006,4.31-4.078,5-4.25 c2-0.5-5,7.625,4,13.875C246.939,95.105,231.071,91.442,234.672,83.211z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M239.547,58.836c-1.689,0.422-4.875,3.5-3.25,9.125c0.646,2.237,3.795,3.512,6.345,4.617c1.575,0.682,2.558,1.774,3.879,2.201c1.694,0.547,3.702,0.403,5.651,1.182c3.125,1.25,17-3.375,24.75-0.875s10.125,11.875-1.375,14.125s-26,2.125-24.375,3.25s14.875,2.75,23.375-0.125s10.75-2.5,13.25-10.375s-9.625-13-23.125-11.75s-22.25-0.75-22.25-2.375c0,3.01-0.796-0.809-1.287-4.438C240.804,60.949,241.36,58.383,239.547,58.836z"/>
	<g>
	<g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M281.297,30.461c0-1.5-11.625-6.125-14.875-7.125c-2.4-0.738-21.808-3.803-27.125,10c-6.5,16.875,10.398,26.224,11.375,27.125c1.625,1.5,8.5,2.375,14.125,0.75s12.5-9.125,15.125-12S281.297,31.961,281.297,30.461z M272.214,47.756c-0.713,4.616-4.275,7.217-7.917,8.08c-4.355,1.032-7.909,1.136-11.021-2.343c-4.526-5.062-3.002-18.75,6.753-19.821c7.16-0.786,9.268,3.681,12.143,6.789C273.6,42.004,272.496,45.934,272.214,47.756z"/>
	</g>
	</g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M248.172,29.711c-1.362,0.545,14.754-13.052,23.875,2.5C269.023,27.055,249.813,29.054,248.172,29.711z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M277.922,26.586c-0.91,0,5.75-3.875,10.75,0.875c4.649,4.417,0.143,8.5-0.875,8.5c-3,0-7-0.125-1.625-7.25C289.032,24.919,277.895,26.586,277.922,26.586z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M180.672,71.336c1.031-0.75,3.625-3.625,4.625-5s-0.125-34.875-0.875-35.75s0-5.875-1.125-6s-3.125-0.375-2.875-1.125s8.5-1.75,9.875,1.125s3.25,3.125,4.125,2.875s2.375,4.625,1.375,5.5s2.625,1.125,5-1.5s8.375-4.625,15.875-5.375c6.441-0.644-6.66-3.593-8.375-3.25c-1.875,0.375,3.25-3.125,10.75-0.75s9.375,8.5,9.625,13.375c0.249,4.848,0.017,29.298,1.25,32.875c1.25,3.625,3.125,3,3.75,3.375s-13.625,0.75-14.625,0.25s2.625-2.125,4.125-4.375s-2.375-3.125-7.25-3.875c-0.378-0.058-1.122-33.775-1.5-30.75c0.125-1-6-6.5-17.5,6.5c-1.037,1.172,0.162,25.411-1.625,24.875c-1.25-0.375-5.375,1.25-3.75,3.625s5.625,3.5,4.5,3.75S179.297,72.336,180.672,71.336z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M160.672,70.461c1.25-0.375,2.25-0.25,2.125-4.25s0.25-30.625,0.5-31.625s1.625-0.75,2.375-1.75s0-5.125-1-5.5s-5.75-2.625-6.25-3.5s5-4.625,9.625-3.75c3.078,0.583,7.875,1.625,4,7.875c-2.15,3.469,1.827,34.449,0,39.625c-0.75,2.125,2.125,3.125,2.875,4.125c0.645,0.86-13.007,1.008-14,0.125C160.778,71.708,160.107,70.63,160.672,70.461z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M167.547,7.586c2.535-0.4,5.675-3.839,2.125-6.375c-4.035-2.882-6.007,0.215-6.5,0.75C161.122,4.182,164.722,8.032,167.547,7.586z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M100.672,71.336c-0.952,0,4.5-3.875,5-5.5s-0.5-60.75-0.5-60.75s-2.375-3.5-4.75-3.625s8.125-2.875,10.125,0.5s0.125,10,0.75,9.625s4.375,3,5,2.75s0.5,26.375,0.375,26.75s1.5,4.875,1.25,5.625s20.375-17.25,20.75-18.375s-1-2.625-4.125-4.625s16.25-2,18.625,0.875c0.14,0.169-7.432,3.081-6.875,4.75c0.125,0.375,0.75,2.75-0.75,2.75s-14.375,13.5-14.625,14.5s21.125,25.125,24.25,24.5c1.89-0.378-11.431,2.461-17.875,0.5c-2.875-0.875,4.625-3,3.875-4s-16.875-16.625-20.25-18.25s-4,3.125-4.75,3.625s1,11-0.375,11.375s-4.75,2.5-3.75,2.625
	s0.75,3.375,3.875,4.625C119.88,73.169,103.463,71.336,100.672,71.336z"/>
	<g>
	<g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M91.679,69.193c0.218-0.296-0.156-27.612-0.072-27.905c2.628-9.174-4.629-22.5-16.935-20.411c-3.036,0.516,6.358,2.869,7.721,3.457c3.471,1.497,4.934,4.976,3.279,5.46c-4.03,1.179-6.902-0.563-7.417-1c-0.799-0.679-14.84-0.877-15.333,0.333c0.01-0.024-3.955,1.886-5.167,0.5c-0.301-0.343-1.283-3.212-1.583-3.083c-1.682,0.721-6,11.5,2.417,11.417c7.517-0.074-1.568-4.709,15.917-5.5c6.846-0.31,7.442,5.796,7.302,7.107c-0.342,3.192-2.755,4.375-6.135,4.143c-6.083-0.417-22.167,3.417-25.667,11.917c-3.39,8.231,8.167,19.991,13.917,17.167c2.913-1.431-3.357-0.902-3.083-5.083c0.089-1.359,3.64-0.825,6.578-1.133c3.157-0.332,5.736-1.469,6.422-1.95c3.917-2.75,9.333-4,11.25-0.917c1.337,2.15,6.636,9.822,8.833,9.333C95.675,72.655,91.963,69.342,91.679,69.193z M80.755,56.877c-3.333,4.25-10.667,4.583-14,4.833c-3.333,0.25-8.083-1.167-6.333-5.667s13.45-9.873,19.167-8.833C81.527,47.563,80.4,57.331,80.755,56.877z"/>
	</g>
	</g>
	<g>
	<g>
	<path fill="#fff" d="M46.088,45.377c-0.833-27.333-22.667-23.667-26.917-23.167s-19.5,2.5-19.167,27.667c0.333,25.167,23,24,22.417,23.833C20.066,73.038,6.05,64.78,10.505,62.127c0.965-0.574,10.617,2.468,11.809,2.718c8.407,1.765,17.338-1.1,17.607-1.885c-0.351,1.02-5.816,8.564-6.917,8.917c11.641-3.732,13.5-13.833,9.25-14.833s-4.75,1-14.583,3.75c-8.896,2.487-18.104-10.349-15.333-13.75C14.527,44.358,46.122,46.48,46.088,45.377z M24.838,22.877c7.75,0.25,6.917,1.583,0.5,3c-6.417,1.417-10.75,0.167-11.417,0.417C12.342,26.887,17.088,22.627,24.838,22.877z M13.672,40.377c0.684-0.214,0.667-9.583,11.5-9.75c9.755-0.15,9.824,9.594,9.417,10.083C34.172,41.211,12.338,40.794,13.672,40.377z"/>
	</g>
	</g>
	</svg>

	</span>

	<br>

	<span class="chemical-element">
	Ba
	<div class="desc" role="top-left">137.33</div>
	<div class="desc" role="top-right">+2</div>
	<div class="desc medium" role="bottom-left-1">56</div>
	<div class="desc" role="bottom-left-2">2-8-18-7</div>
	</span>

	<span class="title-2">
	<svg version="1.1"
	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="63px" height="91px" viewBox="-6.379 -7.374 63 91" enable-background="new -6.379 -7.374 63 91" xml:space="preserve">
	<g>
	<g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M48.455,71.626c-0.167-2.333-2.333-66.5-1.167-69c1.851-3.966-15.406-2.701-11.5-1c10.333,4.5,8.333,10,7.5,11.833c-0.833,1.833-6,1.333-5.333,2.833c0.667,1.5,0.667,18.5-1.333,19c-3.996,0.999-0.838-2.276-12.833-5.667c-8.569-2.422-13.6,1.171-17.367,4.968c-3.713,3.743-5.559,7.84-5.133,7.698c-1.523,0.508-6.476,33.714,22.667,35.333c5.335,0.296,9.349-3.76,7.667-4c0.636,0.091-11.414,3.298-14.5,1c-7.758-5.777-5.298-10.445-5.167-9.833c0.5,2.333,8.167,5.333,13.5,4.167c5.121-1.121,9.545-7.824,12.833-7.167c0.833,0.167,0.667,5,0.5,6c-0.167,1,2.833-0.333,4.167,0.5c1.333,0.833,0.5,2.667,1,5.333s7.5,1.5,8,0.667C52.455,73.46,48.621,73.96,48.455,71.626z M37.455,47.793c-0.5,3.667-1.833,14.167-13,15.833c-11.725,1.75-10.442-13.694-10.5-13.5c0.454-1.515-3.167-14.167,11.333-15.333C31.25,34.313,38.048,43.439,37.455,47.793z"/>
	</g>
	</g>
	</svg>

	</span>

	<canvas id="smoke"></canvas>
	</section>
	</div>
	<!-- /Breaking Bad Logo -->





	<!-- Breaking Bad theme -->
	<audio></audio>

	<div id="player">
	<svg role="paused" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" id="layer1" width="40px" height="40px" viewBox="0 0 75 75">
	<g><polygon
	points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
	style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;" />
	<path
	d="M 48.651772,50.269646 69.395223,25.971024"
	style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
	inkscape:connector-curvature="0"
	sodipodi:nodetypes="cc" />
	<path
	d="M 69.395223,50.269646 48.651772,25.971024"
	style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
	inkscape:connector-curvature="0"
	sodipodi:nodetypes="cc" />
	</g>
	</svg>

	<svg role="playing" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" width="40px" height="40px" viewBox="0 0 75 75">
	<g>
	<polygon
	points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769" style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;"
	/>
	<path
	d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
	<path
	d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>

	<path
	d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
	style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
	</g>
	</svg>
	</div>
	/**
	Breaking Bad

	A tribute to the best fucking series in the world.

	The making of: http://timpietrusky.com/breaking-bad-logo



	Just some CSS and SVG. I created the SVG from the original Logo with
	Photoshop (path) and Illustrator (SVG).

	The original Logo is © by American Movie Classics Company LLC.


	2012 by Tim Pietrusky
	timpietrusky.com
	**/

	/**
	* @Gray Ghost Visuals: The theme is for you!
	*
	* Thanks to televisiontunes.com for the Breaking Bad theme
	* http://www.televisiontunes.com/Breaking_Bad.html
	*/
	var audio = $('audio').get(0),
	_paused = $('svg[role="paused"]'),
	_playing = $('svg[role="playing"]');

	audio.src = Modernizr.audio.ogg ?
	'http://timpietrusky.com/cdn/breaking_bad_intro.ogg' :
	'http://timpietrusky.com/cdn/breaking_bad_intro.mp3';

	_paused.click(function() {
	$(this).css('display', 'none');
	_playing.css('display', 'block');
	audio.play();
	});

	_playing.click(function() {
	$(this).css('display', 'none');
	_paused.css('display', 'block');
	audio.pause();
	});

	// Set to start
	$("audio").bind('ended', function(){
	_playing.css('display', 'none');
	_paused.css('display', 'block');
	this.currentTime = 0;
	});

	/**
	* Thanks to Ed Welch for his "smoke"-effect
	* http://astronautz.com/wordpress/creating-realistic-particle-effect-with-html5-canvas/
	*/
	var lastRender = new Date().getTime();
	var context;
	var smoke_1 = new ParticleEmitter();
	var smoke_2 = new ParticleEmitter();
	var smoke_3 = new ParticleEmitter();
	var CANVAS_WIDTH = 500;
	var CANVAS_HEIGHT = 400;
	var dirtyLeft = 0;
	var dirtyTop = 0;
	var dirtyRight = CANVAS_WIDTH;
	var dirtyBottom = CANVAS_HEIGHT;
	var windVelocity = 0.01;
	var count = 0;

	window.requestAnimFrame = (function () {
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function ( c ) {
	window.setTimeout( c, 16.6 );
	};
	})();

	init();

	function init() {
	var canvas = $('#smoke').get(0);
	if (canvas.getContext) {
	context = canvas.getContext('2d');
	} else {
	return;
	}

	canvas.width = CANVAS_WIDTH;
	canvas.height = CANVAS_HEIGHT;

	var img_smoke_1 = new Image(),
	img_smoke_2 = new Image(),
	img_smoke_3 = new Image();

	img_smoke_1.src = 'http://timpietrusky.com/cdn/smoke_1.png';
	img_smoke_2.src = 'http://timpietrusky.com/cdn/smoke_2.png';
	img_smoke_3.src = 'http://timpietrusky.com/cdn/smoke_3.png';

	smoke_1.m_alpha = 0.2;
	smoke_3.m_speed = 0.001;
	smoke_1.init(.142, .631, 90, img_smoke_1);

	smoke_2.m_alpha = 0.3;
	smoke_2.init(.322, .753, 90, img_smoke_2);

	smoke_3.m_alpha = 0.1;
	smoke_3.m_speed = 0.02;
	smoke_3.init(.222, .553, 90, img_smoke_3);

	requestAnimFrame(render);
	}

	function ParticleEmitter() {
	this.m_x;
	this.m_y;
	this.m_dieRate;
	this.m_image;
	this.m_speed = 0.04;
	this.m_alpha = 1.0;

	this.m_listParticle = [];

	// ParticleEmitter().init function
	// xScale = number between 0 and 1. 0 = on left side 1 = on top
	// yScale = number between 0 and 1. 0 = on top 1 = on bottom
	// particles = number of particles
	// image = smoke graphic for each particle
	this.init = function(xScale, yScale, particles, image) {
	// the effect is positioned relative to the width and height of the
	// canvas
	this.m_x = CANVAS_WIDTH * xScale;
	this.m_y = CANVAS_HEIGHT * yScale;
	this.m_image = image;
	this.m_dieRate = 0.95;
	// start with smoke already in place
	for ( var n = 0; n < particles; n++) {
	this.m_listParticle.push(new Particle());
	this.m_listParticle[n].init(this, n * 50000 * this.m_speed);
	}
	}

	this.update = function(timeElapsed) {
	for ( var n = 0; n < this.m_listParticle.length; n++) {
	this.m_listParticle[n].update(timeElapsed);
	}
	}

	this.render = function(context) {
	for ( var n = 0; n < this.m_listParticle.length; n++) {
	this.m_listParticle[n].render(context);
	}
	}
	};

	function Particle() {
	this.m_x;
	this.m_y;
	this.m_age;
	this.m_xVector;
	this.m_yVector;
	this.m_scale;
	this.m_alpha;
	this.m_canRegen;
	this.m_timeDie;
	this.m_emitter;

	this.init = function(emitter, age) {
	this.m_age = age;
	this.m_emitter = emitter;
	this.m_canRegen = true;
	this.startRand();
	}

	this.isAlive = function() {
	return this.m_age < this.m_timeDie;
	}

	this.startRand = function() {
	// smoke rises and spreads
	this.m_xVector = Math.random() * 0.5 - 0.25;
	this.m_yVector = -1.5 - Math.random();
	this.m_timeDie = 20000 + Math.floor(Math.random() * 12000);

	var invDist = 1.0 / Math.sqrt(this.m_xVector * this.m_xVector
	+ this.m_yVector * this.m_yVector);
	// normalise speed
	this.m_xVector = this.m_xVector * invDist * this.m_emitter.m_speed;
	this.m_yVector = this.m_yVector * invDist * this.m_emitter.m_speed;
	// starting position within a 20 pixel area
	this.m_x = (this.m_emitter.m_x + Math.floor(Math.random() * 20) - 10);
	this.m_y = (this.m_emitter.m_y + Math.floor(Math.random() * 20) - 10);
	// the initial age may be > 0. This is so there is already a smoke trail
	// in
	// place at the start
	this.m_x += (this.m_xVector + windVelocity) * this.m_age;
	this.m_y += this.m_yVector * this.m_age;
	this.m_scale = 0.01;
	this.m_alpha = 0.0;
	}

	this.update = function(timeElapsed) {
	this.m_age += timeElapsed;
	if (!this.isAlive()) {
	// smoke eventually dies
	if (Math.random() > this.m_emitter.m_dieRate) {
	this.m_canRegen = false;
	}
	if (!this.m_canRegen) {
	return;
	}
	// regenerate
	this.m_age = 0;
	this.startRand();
	return;
	}
	// At start the particle fades in and expands rapidly (like in real
	// life)
	var fadeIn = this.m_timeDie * 0.05;
	var startScale;
	var maxStartScale = 0.3;
	if (this.m_age < fadeIn) {
	this.m_alpha = this.m_age / fadeIn;
	startScale = this.m_alpha * maxStartScale;
	// y increases quicker because particle is expanding quicker
	this.m_y += this.m_yVector * 2.0 * timeElapsed;
	} else {
	this.m_alpha = 1.0 - (this.m_age - fadeIn)
	/ (this.m_timeDie - fadeIn);
	startScale = maxStartScale;
	this.m_y += this.m_yVector * timeElapsed;
	}
	// the x direction is influenced by wind velocity
	this.m_x += (this.m_xVector + windVelocity) * timeElapsed;
	this.m_alpha *= this.m_emitter.m_alpha;
	this.m_scale = 0.001 + startScale + this.m_age / 4000.0;
	}

	this.render = function(ctx) {
	if (!this.isAlive())
	return;
	ctx.globalAlpha = this.m_alpha;
	var height = this.m_emitter.m_image.height * this.m_scale;
	var width = this.m_emitter.m_image.width * this.m_scale;
	// round it to a integer to prevent subpixel positioning
	var x = Math.round(this.m_x - width / 2);
	var y = Math.round(this.m_y + height / 2);
	ctx.drawImage(this.m_emitter.m_image, x, y, width, height);
	if (x < dirtyLeft) {
	dirtyLeft = x;
	}
	if (x + width > dirtyRight) {
	dirtyRight = x + width;
	}
	if (y < dirtyTop) {
	dirtyTop = y;
	}
	if (y + height > dirtyBottom) {
	dirtyBottom = y + height;
	}
	}
	};

	function render() {
	// time in milliseconds
	var timeElapsed = new Date().getTime() - lastRender;
	lastRender = new Date().getTime();
	context.clearRect(dirtyLeft, dirtyTop, dirtyRight - dirtyLeft, dirtyBottom - dirtyTop);
	dirtyLeft = 1000;
	dirtyTop = 1000;
	dirtyRight = 0;
	dirtyBottom = 0;

	smoke_1.update(timeElapsed);
	smoke_1.render(context);

	smoke_2.update(timeElapsed);
	smoke_2.render(context);

	smoke_3.update(timeElapsed);
	smoke_3.render(context);

	windVelocity += (Math.random() - 0.5) * 0.002;
	if (windVelocity > 0.015) {
	windVelocity = 0.015;
	}
	if (windVelocity < 0.0) {
	windVelocity = 0.0;
	}

	requestAnimFrame(render);
	}
	@import "compass/css3";
	* {
	box-sizing: border-box;
	}

	html,
	body {
	height: 100%;
	width: 100%;
	}

	body {
	margin: 0;
	background: darken(rgb(33,53,18), 10%);
	overflow: hidden;
	}

	%helper-alpha {
	position: absolute;
	left: 50%;
	top: 50%;
	}

	/**
	*
	* Absolute position in the center of the parent element (-50%, -50%).
	*
	*/
	%center {
	@extend %helper-alpha;
	@include transform (translate(-50%, -50%));
	}




	.wrapper {
	@extend %center;
	}




	#breakingbad {
	position: relative;
	width: 530px;
	border: .5em solid rgba(255, 255, 255, .1);
	padding: 1em;
	overflow: hidden;

	&:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	z-index: -1337;
	background: darken(rgb(33, 53, 18), 5%);
	}
	}

	span {
	color:#fff;
	}

	.chemical-element {
	width:165px;
	height:165px;
	position:relative;

	font: bold 95px Arial;
	color:#fafffb;

	padding:25px 25px 25px 30px;
	border:3px solid #DDFFE2;

	display:inline-block;
	background: linear-gradient(-45deg, rgba(92,190,115,1) 1%,rgba(24,43,4,1) 100%);

	box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
	}

	.chemical-element:nth-child(4) {
	margin-left:165px;
	padding-left:23px;
	}

	.desc {
	position:absolute;
	font: bold 13px Arial;
	color:rgba(244, 247, 245, .95);
	}

	.big {
	font: bold 20px Arial;
	}

	.medium {
	font: bold 17px Arial;
	}

	div[role="top-left"] {
	top:8px;
	left:10px;
	}

	div[role="top-right"] {
	top:8px;
	right:5px;
	text-align:right;
	width:25px;
	}

	div[role="bottom-left-1"] {
	bottom:20px;
	left:5px;
	text-align:left;
	}

	div[role="bottom-left-2"] {
	bottom:5px;
	left:5px;
	text-align:left;
	}

	.title-1,
	.title-2 {
	width:50px;
	display:inline-block;
	height: 130px;
	vertical-align: bottom;
	}

	.title-2 {
	height: 134px;
	}

	#smoke {
	position: absolute;
	z-index: -1;
	left: 22%;
	top: 0;
	}

	audio {
	display:none;
	}

	#player {
	position: fixed;
	top: 10%;
	right: 10%;
	transition: all .3s ease-in;
	opacity: .1;
	cursor: pointer;
	}

	#player:hover {
	opacity:1;
	}

	#player svg[role="playing"] {
	display:none;
	}