<img id="path" src="https://zeplin.io/img/bgPath.svg">

<img id="zeplin" src="https://zeplin.io/img/icZeplin.svg" alt="zeplin">
@keyframes whoosh {
  from { motion-offset: 0%; }
  to { motion-offset: 100%; }
}

#path {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 100%;
}

#zeplin {
    motion-path: path("M1528,74 C1528,74 1373,133.857147 1268.50505,133.857143 C1164.0101,133.857138 1044.60849,63.2746747 942.414141,45.2857143 C840.219794,27.2967539 749.351683,18.0222476 595.72201,85.3965342 C442.092336,152.770821 424.504306,178.600216 316.186064,168.137541 C294.677978,156.981816 226.287635,133.857145 219.453224,52.0727741 C212.618812,-29.7115971 316.186058,-10.3505382 284.713623,99.4034497 C253.241188,209.157438 1.06334642,60.6018191 1.06334642,60.6018191");
    motion-rotation: reverse 20deg;
    
    animation-name: whoosh;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.