42Dispersion: Polar Coordinates

III · Particles & Play

Angle and distance instead of x/y — even spread around the circle.

Click

Source

3 files

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CodeSandbox</title>
  </head>
  <body>
    <style>
      @keyframes fadeToTransparent {
        to {
          opacity: 0;
        }
      }
      
      @keyframes disperse {
        to {
          transform: translate(var(--x), var(--y));
        }
      }
      
      .particle {
        animation:
          fadeToTransparent var(--fade-duration) forwards,
          disperse 500ms forwards var(--particle-curve);
      }
      
    </style>
    
    <button class="particleButton">
      <svg
        viewBox="0 0 24 24"
        fill="none"
        aria-hidden="true"
      >
        <path
          d="M3.68546 5.43796C8.61936 1.29159 11.8685 7.4309 12.0406 7.4309C12.2126 7.43091 15.4617 1.29159 20.3956 5.43796C26.8941 10.8991 13.5 21.8215 12.0406 21.8215C10.5811 21.8215 -2.81297 10.8991 3.68546 5.43796Z"
          stroke="white"
          stroke-width="2"
          stroke-linecap="round"
        />
      </svg>
      <span class="visually-hidden">Like this post</span>
    </button>
  </body>
</html>