The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

background: #000;

dabblet.html

<canvas width="600" height="720" id="can"   class="slide-canvas"></canvas>

dabblet.js

var canvas = document.getElementById("can");
             var ctx = canvas.getContext("2d");

             //Make the canvas occupy the full page
             var W = 600, H = 720;
             canvas.width = W;
             canvas.height = H;

            var radCounst = 0;

             var particles = [];

             //Lets create some particles now
             var particle_count = 100;
             for(var i = 0; i < particle_count; i++)   {
                 particles.push(new particle());
             }

              function particle()   {
                 //speed, life, location, life, colors
                 //speed.x range = -2.5 to 2.5
                 //speed.y range = -15 to -5 to make it move upwards
                 //lets change the Y speed to make it look like a flame
                 this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};
                 this.location = {x: W/2, y: H/2};
                 //radius range = 10-30
                 this.radius = 40+Math.random()*20;
                 //life range = 20-30
                 this.life = 40+Math.random()*40;
                 this.remaining_life = this.life;
                 //colors
                 this.r = 255;
                 this.g = Math.round(Math.random()*200);
                 this.b = Math.round(Math.random()*70);
             }

             function draw()
             {
                 //Painting the canvas black
                 //Time for lighting magic
                 //particles are painted with "lighter"
                 //In the next frame the background is painted normally without blending to the
                 //previous frame
                 ctx.globalCompositeOperation = "source-over";
                 ctx.clearRect(0, 0, W, H);
                 ctx.globalCompositeOperation = "lighter";

                 for(var i = 0; i < particles.length; i++)
                 {
                     var p = particles[i];
                     ctx.beginPath();
                     //changing opacity according to the life.
                     //opacity goes to 0 at the end of life of a particle
                     p.opacity = Math.round(p.remaining_life/p.life*100)/100
                     //a gradient instead of white fill
                     var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
                     gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
                     gradient.addColorStop(0.3, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
                     gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
                     ctx.fillStyle = gradient;
                     ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
                     ctx.fill();

                     //lets move the particles
                     p.remaining_life--;
                     p.radius -= p.radius/20;
                     p.location.x += p.speed.x;
                     p.location.y += p.speed.y;

                     //regenerate particles
                     if(p.remaining_life < 0 || p.radius < 0)
                     {
                         //a brand new particle replacing the dead one
                         particles[i] = new particle();
                     }
                 }
             }

             setInterval(draw, 50);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}