Question

Can anyone answer this with an explanation? Please

Answer 1

$<svg width="150" height="150" viewBox="0 0 200 200"></p><p> <g transform="translate(100 100)"></p><p> <path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path></p><p> <animateTransform </p><p> attributeName="transform" </p><p> type="scale" </p><p> values="1; 1.5; 1.25; 1.5; 1.5; 1;" </p><p> dur="1s" </p><p> repeatCount="indefinite"</p><p> additive="sum"> </p><p> </animateTransform></p><p> </g></p><p></svg>$

$<svg id="wrap" width="300" height="300"></p><p> </p><p> <!-- background --></p><p> <svg></p><p> <circle cx="150" cy="150" r="130" style="stroke: lightblue; stroke-width:18; fill:transparent"/></p><p> <circle cx="150" cy="150" r="115" style="fill:#2c3e50"/></p><p> <path style="stroke: #2c3e50; stroke-dasharray:820; stroke-dashoffset:820; stroke-width:18; fill:transparent" d="M150,150 m0,-130 a 130,130 0 0,1 0,260 a 130,130 0 0,1 0,-260"></p><p> <animate attributeName="stroke-dashoffset" dur="6s" to="-820" repeatCount="indefinite"/></p><p> </path></p><p> </svg></p><p> </p><p> <!-- image --></p><p> <svg></p><p> <path id="hourglass" d="M150,150 C60,85 240,85 150,150 C60,215 240,215 150,150 Z" style="stroke: white; stroke-width:5; fill:white;" /></p><p> </p><p> <path id="frame" d="M100,97 L200, 97 M100,203 L200,203 M110,97 L110,142 M110,158 L110,200 M190,97 L190,142 M190,158 L190,200 M110,150 L110,150 M190,150 L190,150" style="stroke:lightblue; stroke-width:6; stroke-linecap:round" /></p><p> </p><p> <animateTransform xlink:href="#frame" attributeName="transform" type="rotate" begin="0s" dur="3s" values="0 150 150; 0 150 150; 180 150 150" keyTimes="0; 0.8; 1" repeatCount="indefinite" /></p><p> <animateTransform xlink:href="#hourglass" attributeName="transform" type="rotate" begin="0s" dur="3s" values="0 150 150; 0 150 150; 180 150 150" keyTimes="0; 0.8; 1" repeatCount="indefinite" /></p><p> </svg></p><p> </p><p> <!-- sand --></p><p> <svg></p><p> <!-- upper part --></p><p> <polygon id="upper" points="120,125 180,125 150,147" style="fill:#2c3e50;"></p><p> <animate attributeName="points" dur="3s" keyTimes="0; 0.8; 1" values="120,125 180,125 150,147; 150,150 150,150 150,150; 150,150 150,150 150,150" repeatCount="indefinite"/></p><p> </polygon></p><p> </p><p> <!-- falling sand --></p><p> <path id="line" stroke-linecap="round" stroke-dasharray="1,4" stroke-dashoffset="200.00" stroke="#2c3e50" stroke-width="2" d="M150,150 L150,198"></p><p> <!-- running sand --></p><p> <animate attributeName="stroke-dashoffset" dur="3s" to="1.00" repeatCount="indefinite"/></p><p> <!-- emptied upper --></p><p> <animate attributeName="d" dur="3s" to="M150,195 L150,195" values="M150,150 L150,198; M150,150 L150,198; M150,198 L150,198; M150,195 L150,195" keyTimes="0; 0.65; 0.9; 1" repeatCount="indefinite"/></p><p> <!-- last drop --></p><p> <animate attributeName="stroke" dur="3s" keyTimes="0; 0.65; 0.8; 1" values="#2c3e50;#2c3e50;transparent;transparent" to="transparent" repeatCount="indefinite"/></p><p> </path></p><p> </p><p> <!-- lower part --></p><p> <g id="lower"></p><p> <path d="M150,180 L180,190 A28,10 0 1,1 120,190 L150,180 Z" style="stroke: transparent; stroke-width:5; fill:#2c3e50;"></p><p> <animateTransform attributeName="transform" type="translate" keyTimes="0; 0.65; 1" values="0 15; 0 0; 0 0" dur="3s" repeatCount="indefinite" /></p><p> </path></p><p> <animateTransform xlink:href="#lower" attributeName="transform"</p><p> type="rotate"</p><p> begin="0s" dur="3s"</p><p> values="0 150 150; 0 150 150; 180 150 150"</p><p> keyTimes="0; 0.8; 1"</p><p> repeatCount="indefinite"/></p><p> </g></p><p> </p><p> <!-- lower overlay - hourglass --></p><p> <path d="M150,150 C60,85 240,85 150,150 C60,215 240,215 150,150 Z" style="stroke: white; stroke-width:5; fill:transparent;"></p><p> <animateTransform attributeName="transform"</p><p> type="rotate"</p><p> begin="0s" dur="3s"</p><p> values="0 150 150; 0 150 150; 180 150 150"</p><p> keyTimes="0; 0.8; 1"</p><p> repeatCount="indefinite"/></p><p> </path></p><p> </p><p> <!-- lower overlay - frame --></p><p> <path id="frame" d="M100,97 L200, 97 M100,203 L200,203" style="stroke:lightblue; stroke-width:6; stroke-linecap:round"></p><p> <animateTransform attributeName="transform"</p><p> type="rotate"</p><p> begin="0s" dur="3s"</p><p> values="0 150 150; 0 150 150; 180 150 150"</p><p> keyTimes="0; 0.8; 1"</p><p> repeatCount="indefinite"/></p><p> </path></p><p> </svg></p><p> </p><p></svg>$

$<svg width="150" height="150" viewBox="0 0 200 200"></p><p> <g transform="translate(100 100)"></p><p> <path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path></p><p> <animateTransform </p><p> attributeName="transform" </p><p> type="scale" </p><p> values="1; 1.5; 1.25; 1.5; 1.5; 1;" </p><p> dur="1s" </p><p> repeatCount="indefinite"</p><p> additive="sum"> </p><p> </animateTransform></p><p> </g></p><p></svg>$