I've written some code that rotates the entirety of the svg, but I don't know how to rotate the individual bodies.
<!DOCTYPE html>
<html lang="en">
<head>
<div class="content">
<object id="demo-svg" data="./assets/test-graphic.svg" type="image/svg+xml" width="100%" height="100%"></object>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
<script type="text/css">
body, html{ margin:0 } svg, g { transform-origin: unset unset; } path { transform-origin: 50% 50%; transform-box: fill-box; }
</script>
</div>
</head>
<div>
<script>
anime({
targets: 'path',
scale: [0.1, 1],
opacity: [0.1, 1],
rotate: "1turn",
duration: 7000
});
</script>
</div>
</html>The total svg code is much too large to paste in, so here's a snippet
<linearGradient id="linear-gradient" x1="69" y1="559.5" x2="1875" y2="559.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#22b226"/><stop offset="1" stop-color="#2112b5"/>
for context, this gradient pairs to the path below.
<path d="M657,540a3,3,0,0,0-3,3v33a3,3,0,0,0,6,0V543A3,3,0,0,0,657,540Z" transform="translate(-69 -56)" fill="url(#linear-gradient)"/>
If you want to target an individual part, target an individual part. Give them an ID or some other means of referring to them and go nuts.
var tl = anime.timeline({
duration: 700,
easing: "easeOutElastic(1, 1)",
endDelay: 400,
loop: true
})
.add({
targets: "svg",
scale: [0, 1]
})
.add({
targets: ".eye",
scaleY: [1, 0, 1, 0, 1],
easing: "easeInOutSine"
});
for (i = 0; i < 10; i++)
tl.add({
targets: ".pupil",
translateX: anime.random(-12, 12),
translateY: anime.random(-12, 12)
});
tl.add({
targets: "svg",
scale: 0,
easing: "easeInElastic(1, 1)",
endDelay: 1000
});<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<svg width="100vmin" height="100vmin" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="40" stroke-width="6" stroke="#1F1F1F" fill="#AF87CC" transform-origin="60 60" />
<g class="eye" transform-origin="60 60">
<circle class="pupil" cx="60" cy="60" r="24" />
<circle cx="77" cy="43" r="10" fill="#FFFFFF" />
</g>
</svg>