Exploding SVG Tangram should start from first position

1

I want my svg tangram to explode beginning at the square arrangement and not from all different directions. I need to set the transformation origin to the starting position. I don’t know if my description of the problem is adequate. Please let me know. Codepen here: https://codepen.io/makamo66/pen/rNEzYed

2

I was finally able to fix this. I used transform-origin with the values from the translate starting position for example (here I set transform-origin to “20.7 10”) like this:

<g transform="translate(20.7,10) rotate(0)"> 
<polygon points="3.344,0 3.344,3.8 3.344,7.07 -0.304,10.87 -0.304,7.07 -0.304,3.8" fill="#42f8eb" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" transform-origin="20.7 10" from="10 10" to="20 24" dur="5s" begin="1s" repeatCount="1" fill="freeze" />
3

Good to hear you found a solution, and thank you for posting it. :+1: