Skip to content

Instantly share code, notes, and snippets.

@johnmichel

johnmichel/index.html

Created July 19, 2012 02:33
Show Gist options
  • Save johnmichel/3140385 to your computer and use it in GitHub Desktop.
Save johnmichel/3140385 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Breaking Bad &middot; CodePen</title>
<!--
Copyright (c) 2012 John Michel, http://codepen.io/johnmichel
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<style>
* {
box-sizing: border-box;
}
body {
margin-top:15px;
background:#000;
background:
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;
height: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: 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:30%;
top:-15px;
}
audio {
display:none;
}
#player {
position:fixed;
top:20px;
right:20px;
transition:all .3s ease-in;
opacity:.1;
cursor:pointer;
}
#player:hover {
opacity:1;
}
#player svg[role="playing"] {
display:none;
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: normal !important;
word-spacing: 0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
window.alert = function(){};
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
</head>
<body>
<!--
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
-->
<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>​
<!-- 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 src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://codepen.io/javascripts/libs/modernizr.js"></script>
<script>
(function() {
/**
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/audio/lab/breaking_bad_intro.ogg' :
'http://timpietrusky.com/audio/lab/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/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';
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);
}
})();
</script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/johnmichel/pen/izCEm">Edit this Pen</a>
</div>
</body>
</html>
Raw
index.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/audio/lab/breaking_bad_intro.ogg' :
'http://timpietrusky.com/audio/lab/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/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';
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);
}
Raw
markup.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
-->
<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>​
<!-- 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>
Raw
style.css
* {
box-sizing: border-box;
}
body {
margin-top:15px;
background:#000;
background:
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;
height: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: 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:30%;
top:-15px;
}
audio {
display:none;
}
#player {
position:fixed;
top:20px;
right:20px;
transition:all .3s ease-in;
opacity:.1;
cursor:pointer;
}
#player:hover {
opacity:1;
}
#player svg[role="playing"] {
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment