translate

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/translate/s.svg

code:s.svg

<style>

@keyframes translateAnimation {

0% { transform: translate(-400px, 0px); }

50% { transform: translate(0px, 0px); }

100% { transform: translate(400px, 0px); }

}

animation: translateAnimation 1s linear infinite;

transform-origin: top left; /* Specify the origin of skew */

}

</style>

<rect x="0" y="0" width="100%" height="100%" fill="#f6f6f6" />

<g id="dots">

<rect x="0" y="0" width="200" height="200" fill="#5c89c0"/>

<rect x="200" y="0" width="200" height="200" fill="#9cbce3"/>

<rect x="0" y="200" width="200" height="200" fill="#e4d7b5"/>

<rect x="200" y="200" width="200" height="200" fill="#6e733b"/>

</g>

</svg>