Particle System Generator

Ready to use:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Particle System</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        body {
          overflow: hidden;
          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        }

        #particleCanvas {
          display: block;
          width: 100vw;
          height: 100vh;
        }
      </style>
    </head>
    <body>
      <canvas id="particleCanvas"></canvas>

      <script>
        const canvas = document.getElementById('particleCanvas');
        const ctx = canvas.getContext('2d');

        let particles = [];
        const particleCount = 100;
        const particleSize = 3;
        const particleColor = '#FF8C00';
        const particleSpeed = 1;
        const particleType = 'stars';

        const initParticles = () => {
          particles = [];
          for (let i = 0; i < particleCount; i++) {
            particles.push({
              x: Math.random() * canvas.width,
              y: Math.random() * canvas.height,
              vx: (Math.random() - 0.5) * particleSpeed * 2,
              vy: (Math.random() - 0.5) * particleSpeed * 2,
              size: Math.random() * particleSize + 1
            });
          }
        };

        const drawStar = (ctx, x, y, size) => {
          const spikes = 5;
          const outerRadius = size;
          const innerRadius = size * 0.4;
          let rot = Math.PI / 2 * 3;
          const step = Math.PI / spikes;

          ctx.beginPath();
          ctx.moveTo(x, y - outerRadius);
          for (let i = 0; i < spikes; i++) {
            ctx.lineTo(x + Math.cos(rot) * outerRadius, y + Math.sin(rot) * outerRadius);
            rot += step;
            ctx.lineTo(x + Math.cos(rot) * innerRadius, y + Math.sin(rot) * innerRadius);
            rot += step;
          }
          ctx.closePath();
          ctx.fill();
        };

        const animate = () => {
          ctx.clearRect(0, 0, canvas.width, canvas.height);

          particles.forEach(particle => {
            particle.x += particle.vx;
            particle.y += particle.vy;

            if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
            if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;

            particle.x = Math.max(0, Math.min(canvas.width, particle.x));
            particle.y = Math.max(0, Math.min(canvas.height, particle.y));

            ctx.fillStyle = particleColor;
            ctx.shadowColor = particleColor;
            ctx.shadowBlur = 10;
            
            if (particleType === 'stars') {
              drawStar(ctx, particle.x, particle.y, particle.size);
            } else if (particleType === 'fire') {
              ctx.globalAlpha = 0.8;
              ctx.beginPath();
              ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
              ctx.fill();
              ctx.globalAlpha = 1;
            } else if (particleType === 'bubbles') {
              ctx.beginPath();
              ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
              ctx.strokeStyle = particleColor;
              ctx.lineWidth = 2;
              ctx.stroke();
            } else {
              ctx.beginPath();
              ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
              ctx.fill();
            }
          });

          requestAnimationFrame(animate);
        };

        const resizeCanvas = () => {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          initParticles();
        };

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        animate();
      </script>
    </body>
    </html>