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


<style>

  #inkCanvas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 1000;

  }

</style>


<script>

  const canvas = document.getElementById('inkCanvas');

  const ctx = canvas.getContext('2d');


  let particles = [];


  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;


  window.addEventListener('resize', () => {

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;

  });


  document.addEventListener('mousemove', (e) => {

    createInkParticles(e.pageX, e.pageY);

  });


  function createInkParticles(x, y) {

    // Change the number of particles created per mouse move event by adjusting the loop limit

    for (let i = 0; i < 7; i++) {

      particles.push(new Particle(x, y));

    }

  }


  class Particle {

    constructor(x, y) {

      this.x = x;

      this.y = y;


      // Change the initial size of the particles by adjusting the multiplier and addition

      this.size = Math.random() * 5 + 1; 


      // Adjust the speed of the particles by changing the multiplier and subtraction values

      this.speedX = Math.random() * 2 - 1; 

      this.speedY = Math.random() * 2 - 1;


      // Modify the lifespan of particles by changing the random range

      this.life = Math.random() * 100 + 50; 


      // Change the color of particles by editing the HSL values

      this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; 

    }


    update() {

      // Adjust particle movement speed by modifying the speedX and speedY values

      this.x += this.speedX;

      this.y += this.speedY;


      // Decrease particle lifespan per frame

      this.life--;


      // Adjust the rate at which the particles shrink by changing the multiplier

      this.size *= 0.95; 

    }


    draw() {

      ctx.fillStyle = this.color;

      ctx.beginPath();


      // You can change the shape of the particles by replacing ctx.arc with another drawing method

      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); 

      ctx.fill();

    }

  }


  function handleParticles() {

    for (let i = 0; i < particles.length; i++) {

      particles[i].update();

      particles[i].draw();


      // Remove particles when their lifespan ends

      if (particles[i].life <= 0) {

        particles.splice(i, 1);

        i--;

      }

    }

  }


  function animate() {

    // Clear the canvas for the next frame

    ctx.clearRect(0, 0, canvas.width, canvas.height);


    // Change the composite operation for different blending effects

    ctx.globalCompositeOperation = 'lighter';


    handleParticles();


    // Recursively call animate() to create an animation loop

    requestAnimationFrame(animate);

  }


  animate();

</script>