<svg width="300" height="300">
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect fill="url(#linear-gradient)" width="100%" height="100%"/>
    </mask>
 
    <linearGradient id="linear-gradient" spreadMethod="reflect" gradientTransform="translate(0, 0)">
      <stop offset="0" stop-color="#000" />
      <stop offset="1" stop-color="#fff" />
    </linearGradient>
  </defs>
  
  <circle cx="50%" cy="50%" r="50%" fill="#fff"/>
  <circle cx="50%" cy="50%" r="50%" fill="#f00" mask="url(#mask)"/>
</svg>

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23969696' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

anime({
  targets: "#linear-gradient",
  gradientTransform: 'translate(2, 0)',
  loop: true,
  duration: 3000,
  easing: 'linear'
})