Here is the code where Im creating the svg paths for different animation, but the offset is not changing via JS code.
The offset is changing via HTML but not vis Jquery.
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 800" width="400" height="600">
<!-- Ripple Group -->
<g id="rippleGroup" transform="translate(-10, 20) scale(1.5)" opacity="1">
<circle cx="100" cy="100" r="0" fill="#94c9ff">
<animate attributeName="r" values="0;130" dur="3s" begin="0s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="3s" begin="0s" repeatCount="indefinite" />
</circle>
<circle cx="100" cy="100" r="0" fill="#94c9ff">
<animate attributeName="r" values="0;110" dur="3s" begin="0.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="3s" begin="0.5s" repeatCount="indefinite" />
</circle>
<circle cx="100" cy="100" r="0" fill="#94c9ff">
<animate attributeName="r" values="0;90" dur="3s" begin="1s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="3s" begin="1s" repeatCount="indefinite" />
</circle>
</g>
<!-- Main Group -->
<g id="mainGroup" opacity="1" transform="translate(10, 10)">
<svg y="50" x="40" width="500" height="500">
<!-- Group for iPhone Outline -->
<g id="iphoneOutlineGroup">
<!-- iPhone Outline -->
<rect x="42" y="10" width="100" height="200" rx="15" fill="#FFF" stroke="#000" stroke-width="8" />
<rect x="67" y="10" width="50" height="6" rx="5" fill="#000" stroke="#000" stroke-width="8" />
</g>
<!-- Define the auth group with centering transformation -->
<g id="authGroup" transform="translate(-7,-35)" opacity="1">
<!-- Group for the face elements -->
<g id="faceGroup">
<!-- Face -->
<!-- Left Eye -->
<rect id="leftEye" x="82" y="132" width="10" height="10" rx="5" fill="#D3D3D3">
<animate attributeName="height" values="10;2;10" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" />
<animate attributeName="y" values="132;136;132" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" />
</rect>
<!-- Right Eye -->
<rect id="rightEye" x="103" y="132" width="10" height="10" rx="5" fill="#D3D3D3">
<animate attributeName="height" values="10;2;10" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" />
<animate attributeName="y" values="132;136;132" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" />
</rect>
<!-- Mouth -->
<path d="M 85 155 Q 100 165 110 155" fill="none" stroke="#D3D3D3" stroke-width="5" />
</g>
<!-- Group for L shapes and Fillers -->
<g id="lShapesGroup">
<!-- L Shape -->
<rect x="63" y="110" width="70" height="70" rx="8" fill="none" stroke="#D3D3D3" stroke-width="6" />
<!-- Fillers -->
<rect x="81" y="110" width="32" height="5" fill="#FFF" stroke="#FFF" stroke-width="6" />
<rect x="81" y="180" width="32" height="5" fill="#FFF" stroke="#FFF" stroke-width="6" />
<!-- Fillers -->
<rect x="62" y="130" width="5" height="32" fill="#FFF" stroke="#FFF" stroke-width="6" />
<rect x="132" y="130" width="5" height="32" fill="#FFF" stroke="#FFF" stroke-width="6" />
<!-- Scanning Bar -->
<rect x="70" y="118" width="57" height="6" rx="3" fill="#94ffff" stroke="#94ffff" stroke-width="1">
<animate attributeName="y" values="118;172;118" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" />
</rect>
<rect x="70" y="118" width="57" height="65" rx="3" fill="#94ffff" stroke="#94ffff" stroke-width="0" opacity="0.2">
<animate attributeName="height" values="0;65;0" dur="1.5s" keyTimes="0;0.5;1" repeatCount="indefinite" />
</rect>
</g>
</g>
<!-- Success/Failure SVG -->
<g id="succesGroup" opacity="0">
<svg x="-5" y="10" width="1000" height="500">
<!-- Circle with green fill color -->
<circle cx="100" cy="100" r="80" fill="red">
<!-- Zoom-in pulsating animation -->
<animate attributeName="r" values="0;95;75;80;80;80;80;80;80;80;80;0;0" dur="2s" repeatCount="indefinite" />
</circle>
<!-- Tick Path -->
<svg id="successTick" x="20" y="-150" viewBox="0 0 600 100" opacity="0">
<path id="tickPath" d="M30 50 L45 65 L70 35" fill="none" stroke="white" stroke-width="6" stroke-dasharray="120" stroke-dashoffset="0" stroke-linecap="round" opacity="0">
<!-- Animation for tick path -->
<animate attributeName="stroke-dashoffset" values="120;60;0;0;0;0;0;0;120;120" dur="2s" begin="0.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;1;1;1;1;1;0;0;0;0;0" dur="2s" begin=".5s" repeatCount="indefinite" />
</path>
</svg>
<!-- X Mark Path -->
<svg id="failureX" x="50" y="50" height="100px" width="100px" viewBox="0 0 100 100" opacity="1">
<!-- Group for X mark -->
<g transform="translate(50, 50)" id="xGroup" stroke="white" stroke-width="5" scale="0">
<!-- X mark paths -->
<path id="xPath1" d="M -20 -20 L 20 20" />
<path id="xPath2" d="M -20 20 L 20 -20" />
<!-- Animation for pulsating effect -->
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="0;0;1.4;0.8;1.2;1.2;1.2;1.2;1.2;1;0;0" begin="0s" dur="2s" repeatCount="indefinite" additive="sum" />
</g>
</svg>
</svg>
</g>
<!-- Animation for zoom in appear -->
<animateTransform attributeName="1transform" attributeType="XML" type="scale" values="1;1.1;1" dur="2s" begin="0s" />
<animateTransform attributeName="1transform" attributeType="XML" type="translate" from="100,200" to="0,0" dur="1s" fill="freeze" begin="0s" />
<!-- Animation for opacity -->
<animate attributeName="1opacity" from="0" to="1" dur="2s" fill="freeze" begin="0s" />
</svg>
</g>
</svg>
</body>
</html>