<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mathdotrandom/pen/ompBE?depth=everything&order=popularity&page=62&q=card&show_forks=false" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">html,body{
padding:0;
margin:0;
overflow:none;
width:100%;
height:100%;
}
body {
background:url('https://i.imgur.com/UMnw0tW.jpg');
font-family: 'Ubuntu', sans-serif;
background-position:center center;
background-size:cover;
color: #121212;
}
.loader{
position:absolute;
top:50%;
margin:-240px;
left:50%;
width:480px;
height:480px;
}
.loader h1{
position: absolute;
top:0px;
left:0px;
text-align: center;
width:100%;
top:0px;
line-height:420px;
font-size:24px;
color:rgba(0,0,0,0.24);
font-weight:100;
}</style></head><body>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300' rel='stylesheet' type='text/css'>
<div class="loader">
<canvas width="480px" height="480px" id="loader"></canvas>
<h1>Loading</h1>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
Loadr = new (function Loadr(id){
// # Defines
const max_size = 24;
const max_particles = 1500;
const min_vel = 20;
const max_generation_per_frame = 10;
// #Variables
// sometimes i wrote code horrible enouhg to make eyes bleed
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
var height = canvas.height;
var center_y = height/2;
var width = canvas.width;
var center_x = width / 2;
var animate = true;
var particles = [];
var last = Date.now(),now = 0;
var died = 0,len = 0,dt;
function isInsideHeart(x,y){
x = ((x - center_x) / (center_x)) * 3;
y = ((y - center_y) / (center_y)) * -3;
// Simplest Equation of lurve
var x2 = x * x;
var y2 = y * y;
// Simplest Equation of lurve
return (Math.pow((x2 + y2 - 1), 3) - (x2 * (y2 * y)) < 0);
}
function random(size,freq){
var val = 0;
var iter = freq;
do{
size /= iter;
iter += freq;
val += size * Math.random();
}while( size >= 1);
return val;
}
function Particle(){
var x = center_x;
var y = center_y;
var size = ~~random(max_size,2.4);
var x_vel = ((max_size + min_vel) - size)/2 - (Math.random() * ((max_size + min_vel) - size));
var y_vel = ((max_size + min_vel) - size)/2 - (Math.random() * ((max_size + min_vel) - size));
var nx = x;
var ny = y;
var r,g,b,a = 0.05 * size;
this.draw = function(){
r = ~~( 255 * ( x / width));
g = ~~( 255 * (1 - ( y / height)));
b = ~~( 255 - r );
ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
ctx.beginPath();
ctx.arc(x,y,size,0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
this.move = function(dt){
nx += x_vel * dt;
ny += y_vel * dt;
if( !isInsideHeart(nx,ny)){
if( !isInsideHeart(nx,y)){
x_vel *= -1;
return;
}
if( !isInsideHeart(x,ny)){
y_vel *= -1;
return;
}
// Lets do the crazy furbidden
x_vel = -1 * y_vel;
y_vel = -1 * x_vel;
return;
}
x = nx;
y = ny;
}
}
function movementTick(){
var len = particles.length;
var dead = max_particles - len;
for( var i = 0; i < dead && i < max_generation_per_frame; i++ ){
particles.push(new Particle());
}
// Update the date
now = Date.now();
dt = last - now;
dt /= 1000;
last = now;
particles.forEach(function(p){
p.move(dt);
});
}
function tick(){
ctx.clearRect(0,0,width,height);
particles.forEach(function(p){
p.draw();
});
requestAnimationFrame(tick);
}
this.start = function(){
}
this.done = function(){
}
setInterval(movementTick,16);
tick();
})("loader");
//# sourceURL=pen.js
</script>
</body></html>
