The fire particles are generated with canvas and SVG for elastic effect.
A Pen by Bhakti Al Akbar on CodePen.
The fire particles are generated with canvas and SVG for elastic effect.
A Pen by Bhakti Al Akbar on CodePen.
<h1>Move around</h1> | |
<canvas id="canvas"></canvas> | |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
<filter id="goo"> | |
<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" /> | |
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 60 -9"/> | |
</filter> | |
</svg> |
var canvas = document.getElementById("canvas"), | |
ctx = canvas.getContext("2d"); | |
var w = canvas.width = window.innerWidth; | |
var h = canvas.height = window.innerHeight; | |
var numParticles = 50, | |
particles = [], | |
radius = 12, | |
speed = 0.1; | |
function randomize(min, max) { | |
return Math.round(Math.random() * (max - min) + min); | |
}; | |
var pos = { | |
x: w/2, | |
y: h/2 | |
}; | |
var colors = ["#e67e22", "#e74c3c", "blue"]; | |
// clone object pos | |
var accel = JSON.parse(JSON.stringify(pos)); | |
document.body.addEventListener("mousemove", function(e){ | |
pos.x = e.clientX; | |
pos.y = e.clientY; | |
}); | |
for(var i = 0; i < numParticles; i++){ | |
particles.push(new generate()); | |
}; | |
function generate(){ | |
this.x = pos.x; | |
this.y = pos.y; | |
this.radius = randomize(3,6); | |
this.color = colors[Math.floor(Math.random() * colors.length)]; | |
this.vx = randomize(-2, 2); | |
this.vy = randomize(5, 10); | |
this.life = randomize(20, 30); | |
}; | |
render(); | |
function render(){ | |
ctx.clearRect(0, 0, w, h); | |
accel.x += (pos.x - accel.x) * 0.15; | |
accel.y += (pos.y - accel.y) * 0.15; | |
ctx.beginPath(); | |
ctx.fillStyle = "#f1c40f"; | |
ctx.arc(accel.x, accel.y, radius, 0, Math.PI * 2, false); | |
ctx.fill(); | |
ctx.globalCompositeOperation = "xor"; | |
for(var j = 0; j < particles.length; j++){ | |
var p = particles[j]; | |
ctx.beginPath(); | |
ctx.fillStyle = p.color; | |
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false); | |
ctx.fill(); | |
p.x += p.vx; | |
p.y -= p.vy; | |
p.radius -= 0.075; | |
p.life--; | |
if(p.life < 0 || p.radius < 0){ | |
particles[j] = new generate(); | |
} | |
} | |
requestAnimationFrame(render); | |
} | |
// credit | |
balapaCop("Elastic Fire", "rgba(255,255,255,.5)"); |
<script src="//codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js"></script> |
@import "bourbon"; | |
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700); | |
body { | |
overflow: hidden; | |
background: #191747; | |
} | |
svg { | |
pointer-events: none; | |
} | |
#canvas { | |
-webkit-filter: url("#goo"); | |
filter: url("#goo"); | |
} | |
h1 { | |
color: #fff; | |
text-align: center; | |
font-family: Quicksand; | |
letter-spacing: 10px; | |
font-size: 20px; | |
text-transform: uppercase; | |
@include position(fixed, 100px 0 x 0); | |
} |