SVG Animation Example Drifting Particles

<!doctype html>
<title>Example</title>
<style>
  .particle-bg {
    background: #1a1a1a;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
  }
  .particle {
    fill: rgba(255, 255, 255, 0.3);
    animation: drift 15s linear infinite;
  }
  .p1 { animation-duration: 12s; animation-delay: 0s; }
  .p2 { animation-duration: 18s; animation-delay: -5s; }
  .p3 { animation-duration: 14s; animation-delay: -2s; }
  .p4 { animation-duration: 20s; animation-delay: -10s; }
  .p5 { animation-duration: 16s; animation-delay: -7s; }

@keyframes drift {
    from { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.5; }
    80% { opacity: 0.5; }
    to { transform: translateY(-100px) translateX(20px); opacity: 0; }
  }
</style>