Breaking Bad
How do I make an 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).. What is a breaking bad? How do you make a breaking bad? This script and codes were developed by Tim Pietrusky on 20 June 2022, Monday.
Breaking Bad - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Breaking Bad</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='css/agdeh.css'> <link rel="stylesheet" href="css/style.css">
</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
-->
<!-- 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 src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Breaking Bad - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { height: 100%; width: 100%;
}
body { margin: 0; background: #090f05; overflow: hidden;
}
.wrapper { position: absolute; left: 50%; top: 50%;
}
/** * * Absolute position in the center of the parent element (-50%, -50%). * */
.wrapper { -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#breakingbad { position: relative; width: 530px; border: 0.5em solid rgba(255, 255, 255, 0.1); padding: 1em; overflow: hidden;
}
#breakingbad:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; z-index: -1337; background: #15220c;
}
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, #5cbe73 1%, #182b04 100%); box-shadow: inset 0 0 0 1px rgba(0, 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, 0.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 - Script Codes JS Codes
/** 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);
}
Developer | Tim Pietrusky |
Username | TimPietrusky |
Uploaded | June 20, 2022 |
Rating | 4.5 |
Size | 10,835 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Kudos Please | 6,624 Kb |
Blurry Sweetness | 4,034 Kb |
Asdf | 16,941 Kb |
Bullshit Job Title Generator | 7,583 Kb |
Gravatar URL Generator | 5,813 Kb |
Full Horizontal | 4,103 Kb |
Select | 4,112 Kb |
Playlist UI for Rodeo 004 | 6,848 Kb |
Webs Pricing Table | 7,716 Kb |
Star Wars opening crawl from 1977 | 9,093 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Count up | Alanshortis | 2,391 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Nice textured background | Hans | 2,659 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!