<svg viewBox="0 0 100 50">
<g class="grid" fill="#fff" stroke="none" opacity="0.5">
<rect width="100" height=".1" x="0" y="10" />
<rect width="100" height=".1" x="0" y="20" />
<rect width="100" height=".1" x="0" y="30" />
<rect width="100" height=".1" x="0" y="40" />
<rect height="100" width=".1" x="10" y="0" />
<rect height="100" width=".1" x="20" y="0" />
<rect height="100" width=".1" x="30" y="0" />
<rect height="100" width=".1" x="40" y="0" />
<rect height="100" width=".1" x="50" y="0" />
<rect height="100" width=".1" x="60" y="0" />
<rect height="100" width=".1" x="70" y="0" />
<rect height="100" width=".1" x="80" y="0" />
<rect height="100" width=".1" x="90" y="0" />
</g>
<rect class="rect" x="0" y="15" width="20" height="20" rx="2" fill="#8d3dae" />
</svg>
// Easily animate across the parent element using SVG units!
gsap.to('.rect', {
duration: 1,
x: 100, // animate across the entire SVG
xPercent: -100, // offset by the purple square's width to prevent overflowing
repeat: -1,
yoyo: true
})