#example-element{width:24px;height:24px;background:#2bc4a2;clip-path:polygon(0% 0%,70% 0%,100% 50%,70% 100%,0% 100%,30% 50%);animation:distance 3s infinite normal ease-in-out;animation-play-state:paused}#example-element.running{animation-play-state:running}.wrapper{height:220px;width:200px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 140" width="200" height="140"><path d="M 0 60 L 100 60 L 50 10 L 0 60" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>') no-repeat,url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -140 150 230" width="200" height="230"><path d="M 0 70 L 56 70 L 98 0 L 42 0 L 0 70" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>')}@keyframes distance{to{offset-distance:100%}}#playback{position:absolute;top:0;left:0;font-size:1em}