Is there a way to check if an animation is playing on an SVG

I have an issue with an SVG that shows an ugly default state prior to the anim starting.

I had hoped I could set the visibility of the SVG to hidden then check the SVG anim status is playing using js or css and set the visibility to visible.

Unfortunately I have no idea how to do this and I'm struggling to find any helpful documentation.

Edit, thanks for the reminder.

SVG code below, I had attempted to embed on Codepen, but the issue doesn't present itself there:

<svg class="animated-shapes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="1920" height="1080" viewBox="0 0 1920 1080" style="width:100%;height:100%;">
    <defs>
        <clipPath id="_R_G_L_1_C_0">
            <path id="_R_G_L_1_C_0_P_0" fill-rule="nonzero" d="M435.2 47.4 C435.2,47.4 435.26,963.2 435.26,963.2 C435.26,963.2 1328.24,964.9 1328.24,964.9 C1328.24,964.9 1328.19,49.1 1328.19,49.1 C1328.19,49.1 435.2,47.4 435.2,47.4z " />
        </clipPath>
        <clipPath id="_R_G_L_1_G_G_0_L_0_C_0">
            <path id="_R_G_L_1_G_G_0_L_0_C_0_P_0" fill-rule="nonzero" d="M-421.26 -251.83 C-421.26,-251.83 -427.12,43.59 -427.12,43.59 C-427.12,43.59 -124.86,43.44 -124.86,43.44 C-124.86,43.44 -124.72,-249.69 -124.72,-249.69 C-124.72,-249.69 -421.26,-251.83 -421.26,-251.83z " />
        </clipPath>
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_1_G_G_0_L_0_G_G_0_D_0_P_0" fill="freeze" attributeName="rx" from="0" to="856" keyTimes="0;0.0519481;0.5844156;0.8961039;1" values="0;0;0;856;856" keySplines="1 0.007 0.281 1;1 0.007 0.281 1;1 0.007 0.281 1;0 0 0 0" calcMode="spline" />
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_1_G_G_0_L_0_G_G_0_D_0_P_0" fill="freeze" attributeName="ry" from="0" to="856" keyTimes="0;0.0519481;0.1038961;0.6363636;0.9480519;1" values="0;0;0;0;856;856" keySplines="1 0.007 0.281 1;1 0.007 0.281 1;1 0.007 0.281 1;1 0.007 0.281 1;0 0 0 0" calcMode="spline" />
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_1_G_G_0_L_0_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.0519481;0.0519481;0.0519494;1" values="0;0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
        <animateMotion repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_1_G" fill="freeze" keyTimes="0;0.2597403;0.5844156;1" path="M1554 579.5 C1554,579.5 1554,579.5 1554,579.5 C1554,579.5 564,579.5 564,579.5 C564,579.5 564,579.5 564,579.5 " keyPoints="0;0;1;1" keySplines="0.333 0 0.667 1;0.333 0 0.667 1;0 0 0 0" calcMode="spline" />
        <animateTransform repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_1_G" fill="freeze" attributeName="transform" from="1.07523 1.18148" to="1.07523 1.18148" type="scale" additive="sum" keyTimes="0;1" values="1.07523 1.18148;1.07523 1.18148" keySplines="0 0 1 1" calcMode="spline" />
        <animateTransform repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_1_G" fill="freeze" attributeName="transform" from="-960 -540" to="-960 -540" type="translate" additive="sum" keyTimes="0;1" values="-960 -540;-960 -540" keySplines="0 0 1 1" calcMode="spline" />
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_1_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.2337662;0.2337675;1" values="0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
        <clipPath id="_R_G_L_0_C_0">
            <path id="_R_G_L_0_C_0_P_0" fill-rule="nonzero" d="M433.86 48.24 C433.86,48.24 433.94,965.1 433.94,965.1 C433.94,965.1 1326.51,965.1 1326.51,965.1 C1326.51,965.1 1326.43,48.25 1326.43,48.25 C1326.43,48.25 433.86,48.24 433.86,48.24z " />
        </clipPath>
        <clipPath id="_R_G_L_0_G_G_0_L_0_C_0">
            <path id="_R_G_L_0_G_G_0_L_0_C_0_P_0" fill-rule="nonzero" d="M-421.26 -251.83 C-421.26,-251.83 -427.12,43.59 -427.12,43.59 C-427.12,43.59 -124.86,43.44 -124.86,43.44 C-124.86,43.44 -124.72,-249.69 -124.72,-249.69 C-124.72,-249.69 -421.26,-251.83 -421.26,-251.83z " />
        </clipPath>
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_0_G_G_0_L_0_G_G_0_D_0_P_0" fill="freeze" attributeName="rx" from="0" to="856" keyTimes="0;0.0519481;0.5844156;0.8961039;1" values="0;0;0;856;856" keySplines="1 0.007 0.281 1;1 0.007 0.281 1;1 0.007 0.281 1;0 0 0 0" calcMode="spline" />
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_0_G_G_0_L_0_G_G_0_D_0_P_0" fill="freeze" attributeName="ry" from="0" to="856" keyTimes="0;0.0519481;0.1038961;0.6363636;0.9480519;1" values="0;0;0;0;856;856" keySplines="1 0.007 0.281 1;1 0.007 0.281 1;1 0.007 0.281 1;1 0.007 0.281 1;0 0 0 0" calcMode="spline" />
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_0_G_G_0_L_0_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.0519481;0.0519481;0.0519494;1" values="0;0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
        <animateMotion repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_0_G" fill="freeze" keyTimes="0;0.0519481;0.2337662;1" path="M2500 578 C2500,578 2500,578 2500,578 C2500,578 1524,580 1524,580 C1524,580 1524,580 1524,580 " keyPoints="0;0;1;1" keySplines="0.75 0 0.67 0.958;0.75 0 0.67 0.958;0 0 0 0" calcMode="spline" />
        <animateTransform repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_0_G" fill="freeze" attributeName="transform" from="1.07523 1.18148" to="1.07523 1.18148" type="scale" additive="sum" keyTimes="0;1" values="1.07523 1.18148;1.07523 1.18148" keySplines="0 0 1 1" calcMode="spline" />
        <animateTransform repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_0_G" fill="freeze" attributeName="transform" from="-960 -540" to="-960 -540" type="translate" additive="sum" keyTimes="0;1" values="-960 -540;-960 -540" keySplines="0 0 1 1" calcMode="spline" />
        <animate repeatCount="" dur="3.2083333s" begin="0s" xlink:href="#_R_G_L_0_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.0519481;0.0519494;1" values="0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
        <animate attributeType="XML" attributeName="opacity" dur="3s" from="0" to="1" xlink:href="#time_group" />
    </defs>
    <g id="_R_G">
        <g id="_R_G_L_1_G_M">
            <g id="_R_G_L_1_G">
                <g clip-path="url(#_R_G_L_1_C_0)">
                    <g id="_R_G_L_1_G_G_0_L_0_G_M">
                        <g id="_R_G_L_1_G_G_0_L_0_G" transform=" translate(1362.867, 988.867) scale(3.36941, 3.36941) translate(123, -49)">
                            <g clip-path="url(#_R_G_L_1_G_G_0_L_0_C_0)">
                                <g id="_R_G_L_1_G_G_0_L_0_G_G_0_D_0_P_0_G_0_T_0" transform=" translate(-125.867, 42.133) translate(0, 0)">
                                    <rect id="_R_G_L_1_G_G_0_L_0_G_G_0_D_0_P_0" fill="#7db496" fill-opacity="1" fill-rule="nonzero" width="544.266" height="544.266" transform="translate(-272.133 -272.133)" x="0" y="0" />
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
        <g id="_R_G_L_0_G_M">
            <g id="_R_G_L_0_G">
                <g clip-path="url(#_R_G_L_0_C_0)">
                    <g id="_R_G_L_0_G_G_0_L_0_G_M">
                        <g id="_R_G_L_0_G_G_0_L_0_G" transform=" translate(1358.867, 988.867) scale(3.36941, 3.36941) translate(123, -49)">
                            <g clip-path="url(#_R_G_L_0_G_G_0_L_0_C_0)">
                                <g id="_R_G_L_0_G_G_0_L_0_G_G_0_D_0_P_0_G_0_T_0" transform=" translate(-124.867, 42.133) translate(0, 0)">
                                    <rect id="_R_G_L_0_G_G_0_L_0_G_G_0_D_0_P_0" fill="#da7360" fill-opacity="1" fill-rule="nonzero" width="544.266" height="544.266" transform="translate(-272.133 -272.133)" x="0" y="0" />
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
    <g id="time_group" />
</svg>

Solution

You can detect when an SVG animation starts and ends with the beginEvent endEvent events of SVGAnimationElement. Get a reference to the animation element of the SVG you'd like to listen for and listen to the events.

document.getElementById("myAnimation").addEventListener("beginEvent", () => {
    // Make it visible here
}

It's supported on all browsers (except Safari doesn't let you use the callback properties onBegin and onend).

I might also suggest looking into beginElement to possibly start the animation manually.