Breaking Bad

by TimPietrusky

HTML

<section>
    <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">

        <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="#FFFFFF" 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="#FFFFFF" d="M239.547,58.836c-1.689,0.422-4.875,3.5-3.25,9.125
    c0.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.182
    c3.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.125
    s10.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.438
    C240.804,60.949,241.36,58.383,239.547,58.836z"/>
<g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M281.297,30.461c0-1.5-11.625-6.125-14.875-7.125
            c-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.75
            s12.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.08
            c-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.789
            C273.6,42.004,272.496,45.934,272.214,47.756z"/>
    </g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF"...

CSS

* {
    box-sizing: border-box;
}

body {
  margin-top:15px;
    
  background:#000;
  background: 
        -webkit-linear-gradient(left, rgba(33,53,18,.3) 0%,rgba(38,88,19,.4) 30%,rgba(73,91,9,.3) 74%,rgba(24,43,4,.3) 100%),
        #000;
}

section {
    position:relative;
    width:400px;
    margin:0 auto;
    overflow:show;
}

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: -webkit-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 {
  width:50px;
  display:inline-block;
  height: 130px;
  vertical-align: bottom;
}




#smoke {
    position:absolute;
    z-index:-1;
    left:30%;
    top:-15px;
}

JavaScript

/**
  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
**/

/**
 * 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;

init();

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

function init() {
    var canvas = document.getElementById('smoke');
    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/img/lab/smoke_1.png';
    img_smoke_2.src = 'http://timpietrusky.com/img/lab/smoke_2.png';
    img_smoke_3.src = 'http://timpietrusky.com/img/lab/smoke_3.png';
    
    img_smoke_1.onload = function() {
        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);
        
 ...