Zigii's post in SVG Animation was marked as the answer
September 9, 2022
Thanks for advice, @Jack and @Rodrigo
I found the following code (below) which solved my problem.
It creates a series of SVG rectangles dynamically (my 'sawdust') and appends these to the main SVG (the circular saw), making alignment pretty much a breeze.
All sorted.
const svgns = "http://www.w3.org/2000/svg";
const demo = document.querySelector("#demo");
for (let i = 0; i < 200; i++) {
let newRect = document.createElementNS(svgns, "rect");
demo.appendChild(newRect);
gsap.set(newRect, {
attr: {
x:100,
y:425,
width: "random(10, 20)",
height: "random(10, 30)",
fill: "random([#000000, #A9A9A9, #d3d3d3, #C0C0C0, #B2BEB5, #708090])"
}
});
gsap.to(newRect, {
duration: 2,
opacity:0,
physics2D: {
velocity: "random(200, 650)",
angle: "random(250, 255)",
gravity: 300
},
delay: "random(0, 2.5)",
});