<div>
    <canvas id="canvas"></canvas>
</div>

body{
  background:black;
  overflow:hidden;
  margin:0;
}
canvas{
  background:#000;
}

window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", onLoad, false);
window.requestAnimationFrame = 
window.requestAnimationFrame       || 
window.webkitRequestAnimationFrame || 
window.mozRequestAnimationFrame    || 
window.oRequestAnimationFrame      || 
window.msRequestAnimationFrame     || 
function (callback) {
    window.setTimeout(callback, 1000/60);
};
 var canvas, ctx, w, h, particles = [], probability = 0.04,
     xPoint, yPoint;
 function onLoad() {
     canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     resizeCanvas();     
     window.requestAnimationFrame(updateWorld);
 } 
 
 function resizeCanvas() {
     if (!!canvas) {
         w = canvas.width = window.innerWidth;
         h = canvas.height = window.innerHeight;
     }
 } 
 
 function updateWorld() {
     update();
     paint();
     window.requestAnimationFrame(updateWorld);
 } 
 
 function update() {
     if (particles.length < 500 && Math.random() < probability) {
         createFirework();
     }
     var alive = [];
     for (var i=0; i<particles.length; i++) {
         if (particles[i].move()) {
             alive.push(particles[i]);
         }
     }
     particles = alive;
 } 
 
 function paint() {
     ctx.globalCompositeOperation = 'source-over';
     ctx.fillStyle = "rgba(0,0,0,0.2)";
     ctx.fillRect(0, 0, w, h);
     ctx.globalCompositeOperation = 'lighter';
     for (var i=0; i<particles.length; i++) {
         particles[i].draw(ctx);
     }
 } 
 
 function createFirework() {
     xPoint = Math.random()*(w-200)+100;
     yPoint = Math.random()*(h-200)+100;
     var nFire = Math.random()*50+100;
     var c = "rgb("+(~~(Math.random()*200+55))+","
          +(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")";
     for (var i=0; i<nFire; i++) {
         var particle = new Particle();
         particle.color = c;
         var vy = Math.sqrt(25-particle.vx*particle.vx);
         if (Math.abs(particle.vy) > vy) {
             particle.vy = particle.vy>0 ? vy: -vy;
         }
         particles.push(particle);
     }
 } 
 
 function Particle() {
     this.w = this.h = Math.random()*4+1;  
     this.x = xPoint-this.w/2;
     this.y = yPoint-this.h/2;     
     this.vx = (Math.random()-0.5)*10;
     this.vy = (Math.random()-0.5)*10;    
     this.alpha = Math.random()*.5+.5;     
     this.color;
 } 
 
 Particle.prototype = {
     gravity: 0.05,
     move: function () {
         this.x += this.vx;
         this.vy += this.gravity;
         this.y += this.vy;
         this.alpha -= 0.01;
         if (this.x <= -this.w || this.x >= screen.width ||
             this.y >= screen.height ||
             this.alpha <= 0) {
                 return false;
         }
         return true;
     },
     draw: function (c) {
         c.save();
         c.beginPath();         
         c.translate(this.x+this.w/2, this.y+this.h/2);
         c.arc(0, 0, this.w, 0, Math.PI*2);
         c.fillStyle = this.color;
         c.globalAlpha = this.alpha;         
         c.closePath();
         c.fill();
         c.restore();
     }
 } 

<div id="jsi-fireworks-container" class="container"></div>

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #101010;
}
.container{
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
}
canvas{
    position: absolute;
    top: 0;
    left: 0;
}

var RENDERER = {
    LEAF_INTERVAL_RANGE : {min : 100, max : 200},
    FIREWORK_INTERVAL_RANGE : {min : 20, max : 200},
    SKY_COLOR : 'hsla(210, 60%, %luminance%, 0.2)',
    STAR_COUNT : 100,
    
    init : function(){
        this.setParameters();
        this.reconstructMethod();
        this.createTwigs();
        this.createStars();
        this.render();
    },
    setParameters : function(){
        this.$container = $('#jsi-fireworks-container');
        this.width = this.$container.width();
        this.height = this.$container.height();
        this.distance = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
        this.contextFireworks = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
        this.contextTwigs = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
        
        this.twigs = [];
        this.leaves = [new LEAF(this.width, this.height, this)];
        this.stars = [];
        this.fireworks = [new FIREWORK(this.width, this.height, this)];
        
        this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
        this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
        this.fireworkInterval = this.maxFireworkInterval;
    },
    reconstructMethod : function(){
        this.render = this.render.bind(this);
    },
    getRandomValue : function(range){
        return range.min + (range.max - range.min) * Math.random();
    },
    createTwigs : function(){
        this.twigs.push(new TWIG(this.width, this.height, 0, 0, Math.PI * 3 / 4, 0));
        this.twigs.push(new TWIG(this.width, this.height, this.width, 0, -Math.PI * 3 / 4, Math.PI));
        this.twigs.push(new TWIG(this.width, this.height, 0, this.height, Math.PI / 4, Math.PI));
        this.twigs.push(new TWIG(this.width, this.height, this.width, this.height, -Math.PI / 4, 0));
    },
    createStars : function(){
        for(var i = 0, length = this.STAR_COUNT; i < length; i++){
            this.stars.push(new STAR(this.width, this.height, this.contextTwigs, this));
        }
    },
    render : function(){
        requestAnimationFrame(this.render);
        
        var maxOpacity = 0,
            contextTwigs = this.contextTwigs,
            contextFireworks = this.contextFireworks;
        
        for(var i = this.fireworks.length - 1; i >= 0; i--){
            maxOpacity = Math.max(maxOpacity, this.fireworks[i].getOpacity());
        }
        contextTwigs.clearRect(0, 0, this.width, this.height);
        contextFireworks.fillStyle = this.SKY_COLOR.replace('%luminance', 5 + maxOpacity * 15);
        contextFireworks.fillRect(0, 0, this.width, this.height);
        
        for(var i = this.fireworks.length - 1; i >= 0; i--){
            if(!this.fireworks[i].render(contextFireworks)){
                this.fireworks.splice(i, 1);
            }
        }
        for(var i = this.stars.length - 1; i >= 0; i--){
            this.stars[i].render(contextTwigs);
        }
        for(var i = this.twigs.length - 1; i >= 0; i--){
            this.twigs[i].render(contextTwigs);
        }
        for(var i = this.leaves.length - 1; i >= 0; i--){
            if(!this.leaves[i].render(contextTwigs)){
                this.leaves.splice(i, 1);
            }
        }
        if(--this.leafInterval == 0){
            this.leaves.push(new LEAF(this.width, this.height, this));
            this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
        }
        if(--this.fireworkInterval == 0){
            this.fireworks.push(new FIREWORK(this.width, this.height, this));
            this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
            this.fireworkInterval = this.maxFireworkInterval;
        }
    }
};

<canvas id="canvas"></canvas>

body{
? background-color: #000;
}

canvas{
? display: block;
? margin: auto;
? -webkit-tap-highlight-color:rgba(0,0,0,0);
? -webkit-user-select:none;?
}

(function() {
? var Fireworks, GRAVITY, K, SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage;?? ??? ??? ?
? canvas = document.getElementById("canvas");?? ??? ??? ?
? context = canvas.getContext("2d");?? ??? ??? ?
? canvas.width = window.innerWidth;?? ??? ??? ?
? canvas.height = window.innerHeight;?? ??? ??? ?
? stage = new createjs.Stage(canvas);?? ??? ??? ?
? stage.autoClear = false;?? ??? ??? ?
? ctx = canvas.getContext("2d");?? ??? ??? ?
? ctx.fillStyle = "rgba(0, 0, 0, 0)";?? ??? ??? ?
? ctx.fillRect(0, 0, canvas.width, canvas.height);?? ??? ??? ?
? createjs.Ticker.setFPS(50);?? ??? ??? ?
? createjs.Touch.enable(stage);?? ??? ??? ?
? stage.update();

? // 重力
? GRAVITY = 1;

? // 抵抗
? K = 0.9;

? // 速度
? SPEED = 12;

? // 從度數(shù)轉(zhuǎn)換為弧度
? ToRadian = function(degree) {
? ? return degree * Math.PI / 180.0;
? };

? // 制作煙花的class
? Fireworks = class Fireworks {
? ? constructor(sx = 100, sy = 100, particles = 70) {
? ? ? var circle, i, j, rad, ref, speed;
? ? ? this.sx = sx;
? ? ? this.sy = sy;
? ? ? this.particles = particles;
? ? ? this.sky = new createjs.Container();
? ? ? this.r = 0;
? ? ? this.h = Math.random() * 360 | 0;
? ? ? this.s = 100;
? ? ? this.l = 50;
? ? ? this.size = 3;
? ? ? for (i = j = 0, ref = this.particles; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
? ? ? ? speed = Math.random() * 12 + 2;
? ? ? ? circle = new createjs.Shape();
? ? ? ? circle.graphics.f(`hsla(${this.h}, ${this.s}%, ${this.l}%, 1)`).dc(0, 0, this.size);
? ? ? ? circle.snapToPixel = true;
? ? ? ? circle.compositeOperation = "lighter";
? ? ? ? rad = ToRadian(Math.random() * 360 | 0);
? ? ? ? circle.set({
? ? ? ? ? x: this.sx,
? ? ? ? ? y: this.sy,
? ? ? ? ? vx: Math.cos(rad) * speed,
? ? ? ? ? vy: Math.sin(rad) * speed,
? ? ? ? ? rad: rad
? ? ? ? });
? ? ? ? this.sky.addChild(circle);
? ? ? }
? ? ? stage.addChild(this.sky);
? ? }

? ? explode() {
? ? ? var circle, j, p, ref;
? ? ? if (this.sky) {
? ? ? ? ++this.h;
? ? ? ? for (p = j = 0, ref = this.sky.getNumChildren(); (0 <= ref ? j < ref : j > ref); p = 0 <= ref ? ++j : --j) {
? ? ? ? ? circle = this.sky.getChildAt(p);
? ? ? ? ? // 加速度
? ? ? ? ? circle.vx = circle.vx * K;
? ? ? ? ? circle.vy = circle.vy * K;
? ? ? ? ? // 位置計算
? ? ? ? ? circle.x += circle.vx;
? ? ? ? ? circle.y += circle.vy + GRAVITY;

? ? ? ? ? this.l = Math.random() * 100;
? ? ? ? ? // 粒度
? ? ? ? ? this.size = this.size - 0.001;
? ? ? ? ? if (this.size > 0) {
? ? ? ? ? ? circle.graphics.c().f(`hsla(${this.h}, 100%, ${this.l}%, 1)`).dc(0, 0, this.size);
? ? ? ? ? }
? ? ? ? }
? ? ? ? if (this.sky.alpha > 0.1) {
? ? ? ? ? this.sky.alpha -= K / 50;
? ? ? ? } else {
? ? ? ? ? stage.removeChild(this.sky);
? ? ? ? ? this.sky = null;
? ? ? ? }
? ? ? } else {?? ??? ?
? ? ? }
? ? }?? ??? ?
? };

? fireBoss = [];

? setInterval(function() {
? ? ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
? ? ctx.fillRect(0, 0, canvas.width, canvas.height);
? }, 40);

? setInterval(function() {
? ? var x, y;
? ? x = Math.random() * canvas.width | 0;
? ? y = Math.random() * canvas.height | 0;
? ? fireBoss.push(new Fireworks(x, y));
? ? return fireBoss.push(new Fireworks(x, y));
? }, 1300);

? repeat = function() {
? ? var fireworks, j, ref;
? ? for (fireworks = j = 0, ref = fireBoss.length; (0 <= ref ? j < ref : j > ref); fireworks = 0 <= ref ? ++j : --j) {
? ? ? if (fireBoss[fireworks].sky) {
? ? ? ? fireBoss[fireworks].explode();
? ? ? }
? ? }
? ? stage.update();
? };

? createjs.Ticker.on("tick", repeat);

? stage.addEventListener("stagemousedown", function() {
? ? fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
? ? return fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
? });?? ??? ??? ?
}).call(this);

<canvas id="canvas"></canvas>

html,body{
? margin:0px;
? width:100%;
? height:100%;
? overflow:hidden;
? background:#000;
}

#canvas{
? width:100%;
? height:100%;
}

?function initVars(){

? pi=Math.PI;
? ctx=canvas.getContext("2d");
? canvas.width=canvas.clientWidth;
? canvas.height=canvas.clientHeight;
? cx=canvas.width/2;
? cy=canvas.height/2;
? playerZ=-25;
? playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
? scale=600;
? seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
? seeds=new Array();
? sparkPics=new Array();
? s="https://cantelope.org/NYE/";
? for(i=1;i<=10;++i){
? ? sparkPic=new Image();
? ? sparkPic.src=s+"spark"+i+".png";
? ? sparkPics.push(sparkPic);
? }
? sparks=new Array();
? pow1=new Audio(s+"pow1.ogg");
? pow2=new Audio(s+"pow2.ogg");
? pow3=new Audio(s+"pow3.ogg");
? pow4=new Audio(s+"pow4.ogg");
? frames = 0;
}

function rasterizePoint(x,y,z){

? var p,d;
? x-=playerX;
? y-=playerY;
? z-=playerZ;
? p=Math.atan2(x,z);
? d=Math.sqrt(x*x+z*z);
? x=Math.sin(p-yaw)*d;
? z=Math.cos(p-yaw)*d;
? p=Math.atan2(y,z);
? d=Math.sqrt(y*y+z*z);
? y=Math.sin(p-pitch)*d;
? z=Math.cos(p-pitch)*d;
? var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
? if(!uc) return {x:0,y:0,d:-1};
? var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
? var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
? if(!z)z=.000000001;
? if(ua>0&&ua<1&&ub>0&&ub<1){
? ? return {
? ? ? x:cx+(rx1+ua*(rx2-rx1))*scale,
? ? ? y:cy+y/z*scale,
? ? ? d:Math.sqrt(x*x+y*y+z*z)
? ? };
? }else{
? ? return {
? ? ? x:cx+(rx1+ua*(rx2-rx1))*scale,
? ? ? y:cy+y/z*scale,
? ? ? d:-1
? ? };
? }
}

function spawnSeed(){
??
? seed=new Object();
? seed.x=-50+Math.random()*100;
? seed.y=25;
? seed.z=-50+Math.random()*100;
? seed.vx=.1-Math.random()*.2;
? seed.vy=-1.5;//*(1+Math.random()/2);
? seed.vz=.1-Math.random()*.2;
? seed.born=frames;
? seeds.push(seed);
}

 <div id="WebGL-output"></div>

body {
     margin: 0;
     overflow: hidden;
     background: -webkit-linear-gradient(0deg, rgb(0, 12, 91), rgb(0, 0, 0));
     background: linear-gradient(0deg, rgb(0, 12, 91), rgb(0, 0, 0));
 }

let scene,
camera,
renderer,
orbitControls,
planeMesh,
canvasTexture,
isAutoLaunch = true;

const gravity = new THREE.Vector3(0, -0.005, 0);
const friction = 0.998;
const noise = new SimplexNoise();
const textureSize = 128.0;
const fireworksInstances = [];

let outputDom;

const getOffsetXYZ = i => {
? const offset = 3;
? const index = i * offset;
? const x = index;
? const y = index + 1;
? const z = index + 2;
? return { x, y, z };
};

const getOffsetRGBA = i => {
? const offset = 4;
? const index = i * offset;
? const r = index;
? const g = index + 1;
? const b = index + 2;
? const a = index + 3;
? return { r, g, b, a };
};

const gui = new dat.GUI();
const guiControls = new function () {
? this.ParticleSize = 300;
? this.AutoLaunch = true;
}();
gui.add(guiControls, 'ParticleSize', 100, 600);
gui.add(guiControls, 'AutoLaunch').onChange(e => {
? isAutoLaunch = e;
? outputDom.style.cursor = isAutoLaunch ? 'auto' : 'pointer';
});

const getRandomNum = (max = 0, min = 0) => Math.floor(Math.random() * (max + 1 - min)) + min;

const launchFireWorks = () => {
? if (fireworksInstances.length > 5) return;
? const fw = Math.random() > 8 ? new BasicFIreWorks() : new RichFIreWorks();
? fireworksInstances.push(fw);
? scene.add(fw.meshGroup);
};

const autoLaunch = () => {
? if (!isAutoLaunch) return;
? if (Math.random() > 0.7) launchFireWorks();
};

const drawRadialGradation = (ctx, canvasRadius, canvasW, canvasH) => {
? ctx.save();
? const gradient = ctx.createRadialGradient(canvasRadius, canvasRadius, 0, canvasRadius, canvasRadius, canvasRadius);
? gradient.addColorStop(0.0, 'rgba(255,255,255,1.0)');
? gradient.addColorStop(0.5, 'rgba(255,255,255,0.5)');
? gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
? ctx.fillStyle = gradient;
? ctx.fillRect(0, 0, canvasW, canvasH);
? ctx.restore();
};

const getTexture = () => {
? const canvas = document.createElement('canvas');
? const ctx = canvas.getContext('2d');

? const diameter = textureSize;
? canvas.width = diameter;
? canvas.height = diameter;
? const canvasRadius = diameter / 2;

? drawRadialGradation(ctx, canvasRadius, canvas.width, canvas.height);
? const texture = new THREE.Texture(canvas);
? texture.type = THREE.FloatType;
? texture.needsUpdate = true;
? return texture;
};

canvasTexture = getTexture();

const getPointMesh = (num, vels, type) => {

? const bufferGeometry = new THREE.BufferGeometry();
? const vertices = [];
? const velocities = [];
? const colors = [];
? const adjustSizes = [];
? const masses = [];
? const colorType = Math.random() > 0.3 ? 'single' : 'multiple';
? const singleColor = getRandomNum(100, 20) * 0.01;
? const multipleColor = () => getRandomNum(100, 1) * 0.01;
? let rgbType;
? const rgbTypeDice = Math.random();
? if (rgbTypeDice > 0.66) {
? ? rgbType = 'red';
? } else if (rgbTypeDice > 0.33) {
? ? rgbType = 'green';
? } else {
? ? rgbType = 'blue';
? }
? for (let i = 0; i < num; i++) {
? ? const pos = new THREE.Vector3(0, 0, 0);
? ? vertices.push(pos.x, pos.y, pos.z);
? ? velocities.push(vels[i].x, vels[i].y, vels[i].z);
? ? if (type === 'seed') {
? ? ? let size;
? ? ? if (type === 'trail') {
? ? ? ? size = Math.random() * 0.1 + 0.1;
? ? ? } else {
? ? ? ? size = Math.pow(vels[i].y, 2) * 0.04;
? ? ? }
? ? ? if (i === 0) size *= 1.1;
? ? ? adjustSizes.push(size);
? ? ? masses.push(size * 0.017);
? ? ? colors.push(1.0, 1.0, 1.0, 1.0);
? ? } else {
? ? ? const size = getRandomNum(guiControls.ParticleSize, 10) * 0.001;
? ? ? adjustSizes.push(size);
? ? ? masses.push(size * 0.017);
? ? ? if (colorType === 'multiple') {
? ? ? ? colors.push(multipleColor(), multipleColor(), multipleColor(), 1.0);
? ? ? } else {
? ? ? ? switch (rgbType) {
? ? ? ? ? case 'red':
? ? ? ? ? ? colors.push(singleColor, 0.1, 0.1, 1.0);
? ? ? ? ? ? break;
? ? ? ? ? case 'green':
? ? ? ? ? ? colors.push(0.1, singleColor, 0.1, 1.0);
? ? ? ? ? ? break;
? ? ? ? ? case 'blue':
? ? ? ? ? ? colors.push(0.1, 0.1, singleColor, 1.0);
? ? ? ? ? ? break;
? ? ? ? ? default:
? ? ? ? ? ? colors.push(singleColor, 0.1, 0.1, 1.0);}

? ? ? }
? ? }
? }
? bufferGeometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3).setDynamic(true));
? bufferGeometry.addAttribute('velocity', new THREE.Float32BufferAttribute(velocities, 3).setDynamic(true));
? bufferGeometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 4).setDynamic(true));
? bufferGeometry.addAttribute('adjustSize', new THREE.Float32BufferAttribute(adjustSizes, 1).setDynamic(true));
? bufferGeometry.addAttribute('mass', new THREE.Float32BufferAttribute(masses, 1).setDynamic(true));