Edit on
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-svg">

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <circle cx="0.7" cy="0.7" r="0.3"/>
      <circle cx="0.5" cy="0.5" r="0.3"/>
    </clipPath>
  </defs>
</svg>
img {
  width: 120px;
  margin: 20px;
  animation: move 2s alternate infinite linear;
}

@keyframes move {
  to {
    margin-left: 100px;
  }
}

.clip-svg {
  clip-path: url(#myClip);
}

body {
  background: linear-gradient(
    to bottom,
    red,
    yellow
  );
}

body, html {
  height: 100%;
}
Rerun