<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>
body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
}

svg {
  border: solid 2px white;
  max-height: 80vh;
  max-width: 80vw;
}
// 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
})
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://unpkg.com/gsap@3/dist/CSSRulePlugin.min.js
  3. https://assets.codepen.io/16327/CustomBounce3.min.js
  4. https://assets.codepen.io/16327/CustomEase3.min.js
  5. https://assets.codepen.io/16327/CustomWiggle3.min.js
  6. https://assets.codepen.io/16327/DrawSVGPlugin3.min.js
  7. https://unpkg.com/gsap@3/dist/Draggable.min.js
  8. https://unpkg.com/gsap@3/dist/EaselPlugin.min.js
  9. https://unpkg.com/gsap@3/dist/EasePack.min.js
  10. https://assets.codepen.io/16327/Flip.min.js
  11. https://assets.codepen.io/16327/GSDevTools3.min.js
  12. https://assets.codepen.io/16327/InertiaPlugin.min.js
  13. https://assets.codepen.io/16327/MorphSVGPlugin3.min.js
  14. https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js
  15. https://assets.codepen.io/16327/MotionPathHelper.min.js
  16. https://assets.codepen.io/16327/PhysicsPropsPlugin3.min.js
  17. https://assets.codepen.io/16327/Physics2DPlugin3.min.js
  18. https://unpkg.com/gsap@3/dist/PixiPlugin.min.js
  19. https://assets.codepen.io/16327/ScrambleTextPlugin3.min.js
  20. https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js
  21. https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js
  22. https://assets.codepen.io/16327/SplitText3.min.js
  23. https://unpkg.com/gsap@3/dist/TextPlugin.min.js
  24. https://assets.codepen.io/16327/ScrollSmoother.min.js
  25. https://unpkg.com/gsap/dist/Observer.min.js