I have this logo which looks like an S.
<svg width="505" height="732" viewBox="0 0 505 732" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M484.345 238.096C429.731 258.576 385.358 258.576 323.918 238.096C325.056 216.478 308.409 169.208 253.945 173.243C207.865 176.656 201.038 214.203 201.038 238.096C201.038 354.15 323.918 350.736 323.918 487.27C323.918 507.75 321.87 558.95 259.065 558.95C196.259 558.95 187.385 511.163 190.798 487.27H20" stroke="black" stroke-width="50"/>
</svg>
I want to do a reveal animation where the S reveals from the center and the grows i.e. it should initially be empty and then the S appears right from the center of the SVG until it grows and becomes the SVG. How do I do this? I already tried animateTransform with scale and transform but I couldn't get it to work.
First transform/translate the path so that 0,0 is in the middle of the path (or draw the path so that 0,0 is in the middle...) -- this will be the origin of the transform/scale. Second, create the g element that will be scaled, and third, move the path back into the middle of the view box by adding a second g element.
svg {
border: solid black thin;
}<svg height="200" viewBox="0 0 480 440" fill="none" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(215 220)">
<g transform="scale(0)">
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="0" to="1" dur="2s" fill="freeze" repeatCount="1" />
<path transform="translate(-232.17 -366)" d="M484.345 238.096C429.731 258.576 385.358 258.576 323.918 238.096C325.056 216.478 308.409 169.208 253.945 173.243C207.865 176.656 201.038 214.203 201.038 238.096C201.038 354.15 323.918 350.736 323.918 487.27C323.918 507.75 321.87 558.95 259.065 558.95C196.259 558.95 187.385 511.163 190.798 487.27H20" stroke="black" stroke-width="50"/>
</g>
</g>
</svg>