Shakey

Refresh page to repeat animation

<!-- SVG viewport -->
<svg width="512px" height="512px">
    <!-- canvas background -->
    <rect width="100%" height="100%" fill="#f0f0f0" />
    <!-- object to animate -->
    <rect width="128" height="128" x="-64" y="-64" transform="translate(256 256)" fill="tomato">
        <!-- animation -->
        <animateTransform attributeName="transform"
            type="scale"
            additive="sum"
            values="1,1;1.1,0.9;1,1;0.9,1.1;1,1"
            begin="1s"
            dur="0.5s"
            repeatCount="2"
        />
        <animateTransform attributeName="transform"
            type="rotate"
            additive="sum"
            values="0;3;0;-3;0"
            begin="1s"
            dur="0.125s"
            repeatCount="8"
        />
    </rect>
</svg>
Scroll to Top