Приветствую всех знатоков.
Недавно начал изучать построение svg анимации .
Создал свою первую анимацию:
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 126 126" >
<path id="path1" fill="none" stroke ="black" stroke-dasharray= "96" stroke-dashoffset="0" d="m 28.272967,18.598612 12.88506,7.144321 9.88082,-9.573664 L 28.272967,3.6872358 5.6593968,16.032404 19.008987,23.731028" style="stroke-width:0.165;">
<animate id="p1" attributeName="stroke-dashoffset" begin="0s" values="96;0" dur="4s" repeatCount="1" fill="freeze" calcMode="linear"/>
</path>
<path id="path2" fill="none" stroke ="black" stroke-dasharray= "92" stroke-dashoffset="0" d="M 28.272967,3.6872358 V 18.598612 l -9.26399,5.132416 31.95371,17.474162 -0.35791,14.528154 -13.73797,-7.578865" style="stroke-width:0.165;">
<animate id="p2" attributeName="stroke-dashoffset" begin="0s" values="92;0" dur="4s" repeatCount="1" fill="freeze" calcMode="linear"/>
</path>
<path id="path3" fill="none" stroke ="black" stroke-dasharray= "76" stroke-dashoffset="0" d="m 5.6593898,16.032404 -0.07996,14.863474 31.2873772,17.258601 -8.87561,5.28981 -0.15611,14.77451" style="stroke-width:0.165;">
<animate id="p3" attributeName="stroke-dashoffset" begin="0s" values="76;0" dur="4s" repeatCount="1" fill="freeze" calcMode="linear"/>
</path>
<path id="path4" fill="none" stroke ="black" stroke-dasharray= "81" stroke-dashoffset="0" d="M 50.604767,55.733344 27.835087,68.218799 5.0692028,55.733344 l 9.8808242,-9.570243 13.04117,7.281188" style="stroke-width:0.165;">
<animate id="p4" attributeName="stroke-dashoffset" begin="0s" values="81;0" dur="4s" repeatCount="1" fill="freeze" calcMode="linear"/>
</path>
</svg>
И возник вопрос.
Каким образом после отработки данной анимации мне сделать наложение какой-либо фигуры с плавным возникновением.
Средний
