Pakistan Independence Day

HTML

CSS

JS

const flagCanvas = document.getElementById('flag');
const fctx = flagCanvas.getContext('2d');
flagCanvas.width = 320;
flagCanvas.height = 200;
let flagOffset = 0;
function drawFlag() {
  fctx.clearRect(0, 0, flagCanvas.width, flagCanvas.height);
  const rows = 40;
  const cols = 64;
  for(let y = 0; y < rows; y++){
    for(let x = 0; x < cols; x++){
      const wave = Math.sin((x/cols*2*Math.PI)+flagOffset) * 5;
      const xx = x * 5;
      const yy = y * 5 + wave;
      if(xx < flagCanvas.width*0.3){
        fctx.fillStyle = '#fff';
        fctx.fillRect(xx, yy, 5, 5);
      }
      else {
        fctx.fillStyle = '#006600';
        fctx.fillRect(xx, yy, 5, 5);
      }
    }
  }
  fctx.fillStyle = '#fff';
  fctx.beginPath();
  fctx.arc(165 + Math.sin(flagOffset)*2, 100, 35, 0.25*Math.PI, 1.75*Math.PI);
  fctx.fill();
  fctx.fillStyle = '#006600';
  fctx.beginPath();
  fctx.arc(170 + Math.sin(flagOffset)*2, 100, 28, 0.25*Math.PI, 1.75*Math.PI);
  fctx.fill();
  function drawStar(cx, cy, spikes, outerRadius, innerRadius){
    let rot = Math.PI/2*3;
    let x = cx;
    let y = cy;
    let step = Math.PI / spikes;
    fctx.beginPath();
    fctx.moveTo(cx, cy-outerRadius)
    for(let i=0;i<spikes;i++){
      x = cx + Math.cos(rot) * outerRadius;
      y = cy + Math.sin(rot) * outerRadius;
      fctx.lineTo(x,y)
      rot += step
      x = cx + Math.cos(rot) * innerRadius;
      y = cy + Math.sin(rot) * innerRadius;
      fctx.lineTo(x,y)
      rot += step
    }
    fctx.lineTo(cx, cy-outerRadius)
    fctx.closePath();
    fctx.fillStyle = '#fff';
    fctx.fill();
  }
  drawStar(190 + Math.sin(flagOffset)*2, 100, 5, 15, 7);
  flagOffset += 0.05;
  requestAnimationFrame(drawFlag);
}
drawFlag();
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Firework {
  constructor(x, y, color){
    this.x = x;
    this.y = y;
    this.particles = [];
    this.color = color;
    for(let i=0;i<40;i++){
      this.particles.push({
        x: x,
        y: y,
        dx: (Math.random()-0.5)*8,
        dy: (Math.random()-0.5)*8,
        alpha: 1
      });
    }
  }
  draw(){
    this.particles.forEach(p => {
      ctx.beginPath();
      ctx.arc(p.x, p.y, 3, 0, Math.PI*2);
      ctx.fillStyle = `rgba(${this.color.r},${this.color.g},${this.color.b},${p.alpha})`;
      ctx.fill();
    });
  }
  update(){
    this.particles.forEach(p => {
      p.x += p.dx;
      p.y += p.dy;
      p.alpha -= 0.02;
    });
    this.particles = this.particles.filter(p => p.alpha>0);
    this.draw();
  }
}
let fireworks = [];
function animate() {
  ctx.fillStyle = 'rgba(17,17,17,0.2)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
  fireworks.forEach(fw => fw.update());
  requestAnimationFrame(animate);
}
canvas.addEventListener('click', (e)=>{
  const colors = [{r:0,g:255,b:0},{r:255,g:255,b:255},{r:0,g:102,b:0}];
  const color = colors[Math.floor(Math.random()*colors.length)];
  fireworks.push(new Firework(e.x,e.y,color));
});
setInterval(() => {
  const colors = [{r:0,g:255,b:0},{r:255,g:255,b:255},{r:0,g:102,b:0}];
  const color = colors[Math.floor(Math.random()*colors.length)];
  const x = Math.random()*canvas.width;
  const y = Math.random()*canvas.height/2;
  fireworks.push(new Firework(x,y,color));
}, 1000);
window.addEventListener('resize', ()=>{
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});
animate();

Ad #1

Ad #2