Rotating the Meterhand in CSS - html

I have this SVG image (shown below) and I need to make an animation on the meter dashboard hand. The animation I am trying to do is of it (the meter hand) rotating 90 degrees to the left and 90 degrees to the right (the animation keeps ongoing). Ideally, the animation property to do this kind of animation is Transform: rotate()" but another property can be used instead of it. Does anyone have an idea of how this can be done? I am using CSS and HTML.
This is the SVG:
This is how it needs to be rotated: (to the left)
Rotated the right :
This is the SVG code: (The meter hand has an id called "MeterHand") and the CSS that I tried (If you run it you will see that the SVG rotates as a whole and only rotates in one direction. The idea of the animation is to be able to rotate as the images shown above)
#MeterHand {
-webkit-animation: spin 4s linear;
-moz-animation: spin 4s linear;
animation: spin 4s linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(90deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(90deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
<path fill="none" d="M216 294H20.33"/>
<circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
<circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
<path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
<path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
<path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
<path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
<path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
<path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
<path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
<path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
<circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
<path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
</svg>


You have most of the code that you need already.
The main change that will get you most of the way there is to add transform-origin: 50%; to adjust the rotation point of the element.
You then need to add more steps to your animation to include the anti-clockwise rotation.
And also, animation-fill-mode: forwards; to stop the animation on the last frame.
#MeterHand {
transform-origin: 50%;
animation: spin 4s linear;
animation-fill-mode: forwards;
}
#keyframes spin {
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(120deg);
}
}
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" href="animation.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
<path fill="none" d="M216 294H20.33"/>
<circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
<circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
<path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
<path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
<path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
<path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
<path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
<path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
<path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
<path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
<circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
<path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
</svg>
</body>
</html>


You need to add a transform-origin to define which point the image should rotate around:
#MeterHand {
-webkit-animation: spin 4s linear;
-moz-animation: spin 4s linear;
animation: spin 4s linear;
transform-origin:50% 50% 0;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(90deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(90deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
}
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" href="animation.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
<path fill="none" d="M216 294H20.33"/>
<circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
<circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
<path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
<path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
<path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
<path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
<path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
<path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
<path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
<path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
<circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
<path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
</svg>
</body>
</html>

Related

How to make circle / g / path element in SVG pulse

I have an SVG of the following map:
On the map, you will notice the orange dots. I'm looking to make these dots pulsate like this:
.pulse {
margin:100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
<span class="pulse"></span>
Challenges:
html markup cannot be used within svg's, so using the span as the demo above is not an option.
In order to make sure the dots are still positioned correctly, I've added parent g elements and moved the child transform property onto the parent.
Here is the original (simplified) map:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
<defs>
<filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.271"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
<g id="Group_975" data-name="Group 975">
<g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
<circle id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" transform="translate(9.01 9.49)" fill="#ff7c81"/>
</g>
<circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
</g>
</g>
</svg>
Here is my attempt at applying the pulse effect:
.map--pulse {
margin: 100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
<defs>
<filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.271"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
<!-- dot here -->
<g class="map__group" id="Group_975" data-name="Group 975">
<g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
<g transform="translate(9.01 9.49)">
<circle class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
</g>
</g>
<circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
</g>
</g>
</svg>
</div>
As you can see, nothing happens.
I then thought maybe the effect needs to take place on a path rather than circle and tried:
<path class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
Instead of:
<circle class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
But all this did was hide my orange circle.
Is a pulse effect possible here?

Maybe so? Using CSS Animation for Map Markers
circle {
fill: gold;
opacity: 0.3;
transform-box: fill-box;
transform-origin: center;
}
svg > circle:last-child {
fill: gold;
opacity: 1;
}
#rp1 {
animation: ripple1 0.7s linear infinite;
}
#keyframes ripple1 {
0% {
transform: scale(2);
opacity: 0.3;
}
100% {
transform: scale(2.5);
opacity: 0.0;
}
}
#rp2 {
animation: ripple2 0.7s linear infinite;
}
#keyframes ripple2 {
0% {
transform: scale(1.5);
}
100% {
transform: scale(2);
}
}
#rp3 {
animation: ripple3 0.7s linear infinite;
}
#keyframes ripple3 {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
#rp4 {
animation: ripple4 0.7s linear infinite;
}
#keyframes ripple4 {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370" height="410" viewBox="0 0 37.013 41.348">
<defs>
<g id="Group_975" >
<circle id="rp1" cx="20" cy="20" r="1" />
<circle id="rp2" cx="20" cy="20" r="1" />
<circle id="rp3" cx="20" cy="20" r="1" />
<circle id="rp4" cx="20" cy="20" r="1" />
</g>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
</g>
<!-- dot here -->
<use xlink:href="#Group_975" x="1" y="3"/>
<circle r="1" cx="21" cy="23" />
</svg>
</div>
Option using a map in *.png format
The map image is added using the <image> tag
This will allow you to place markers on top of the map and link them to certain places on the map. The relative position of markers and places on the map will remain the same regardless of zooming and using any gadget.
.container {
width:100vw;
height:100vh;
}
circle {
fill: gold;
opacity: 1;
transform-box: fill-box;
transform-origin: center;
}
#anim-circle {
fill: crimson;
opacity: 0.3;
animation: ripple1 2s linear infinite;
}
#keyframes ripple1 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0.0;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 2200 1200" >
<image xlink:href="https://i.stack.imgur.com/cosLH.png" width="100%" height="100%" />
<!-- dot here -->
<defs>
<g id="Group_975">
<circle id="anim-circle" cx="250" cy="250" r="15"></circle>
<circle cx="250" cy="250" r="15"></circle>
</g>
</defs>
<use xlink:href="#Group_975" />
<use xlink:href="#Group_975" x="160" y="300" />
<use xlink:href="#Group_975" x="750" y="200" />
<use xlink:href="#Group_975" x="1435" y="650" />
</svg>
</div>

In this example I have two separate SVG element (but it could be just one). In the first I define a <symbol> with a shadow and a circle that is animated. The first SVG takes up no space (width and height are 0).
In the second SVG you find the map. I didn't change anything here except the width. By using <use> I can now place the pulsating circle on the map. The nice thing about <use> is that it has it's own viewBox. So, the sizes defined in the symbol will scale according to the size used by the <use> element. Like this:
<use href="#pulse" width="4" height="4" x="21" y="27"/>
This will place the dot (21,27 from the upper left corner) according to the viewBox viewBox="0 0 37.013 41.348".
The two dots I already made are two different sizes -- the size can be adjusted according to the viewBox. The tricky part here is using transform/translate for placing the dot in the right spot. I'm not able to see what all you transform/translate one the <g>'s does. So, here a matter of experimenting.
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow" filterUnits="userSpaceOnUse">
<feDropShadow dx="0" dy="0" stdDeviation="0" flood-color="orange">
<animate attributeName="stdDeviation" values="0;2" dur="2s" repeatCount="indefinite" />
</feDropShadow>
</filter>
</defs>
<symbol id="pulse" viewBox="0 0 4 4">
<circle filter="url(#shadow)" cx="2" cy="2" r="1" fill="orange"/>
<circle cx="2" cy="2" r="1" fill="orange">
<animate attributeName="r" values="1;2" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite" />
</circle>
</symbol>
</svg>
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" viewBox="0 0 37.013 41.348">
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
</g>
<!-- dot here -->
<use href="#pulse" width="4" height="4" x="21" y="27"/>
<use href="#pulse" width="2" height="2" x="12" y="15"/>
</svg>
</div>
Update
To adjust the the "pulsation" you can play around with the attributes value, keyTimes and dur on the animation element. The value is a list of values that the attribute will have over the span of the duration (dur). It will have two or more values. If there are more than two values (like the animation of r in the below example), the keyTimes attribute can be used for setting the the intermediate pace. So here the value will be 0 at 0 seconds, 1 after 1.5 seconds (0.75), and 0 after 2 seconds (1).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="300">
<symbol id="pulse" viewBox="0 0 4 4">
<circle cx="2" cy="2" r="1" fill="orange"/>
<circle cx="2" cy="2" r="1" fill="orange">
<animate attributeName="r" values="1;2;1" keyTimes="0; 0.75; 1" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="2s" repeatCount="indefinite" />
</circle>
</symbol>
<use href="#pulse" x="0" y="0" width="10" height="10" />
<use href="#pulse" x="0" y="0" width="1.5" height="1.5" />
</svg>

SVG renders correctly in live server but shows up as an error on html webpage

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>
I'm trying to insert an animated logo into my website. The logo is animated correctly and after having rendered it in CodePen I thought that it was all okay but for some reason on actual websites it just shows an error. Like so:
This page contains the following errors:
error on line 75 at column 6: Opening and ending tag mismatch: svg line 0 and g
Below is a rendering of the page up to the first error.
Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>

There was an extra group closing tag at the end and The XML declaration had some error though I'm not sure what that was about. Any way this below code works fine now.
Enjoy :)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build
0) -->
<svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 596.97 663.91"
style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-
dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24
264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/>
</g>
</svg>

CSS: transition only affecting last element

So I have 3 social media buttons on my website. I am adding a hover effect to them so yhey would turn red with a smooth transition effect.
But for some reason the transition effect is onlty applied to the last svg icon..
Why and how can I change it so it will be applied to all of them
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="25.029" height="25.029" viewBox="0 0 25.029 25.029">
<g id="Icon_feather-instagram" data-name="Icon feather-instagram" transform="translate(1.5 1.5)">
<path id="Path_1" data-name="Path 1" d="M8.507,3H19.522a5.507,5.507,0,0,1,5.507,5.507V19.522a5.507,5.507,0,0,1-5.507,5.507H8.507A5.507,5.507,0,0,1,3,19.522V8.507A5.507,5.507,0,0,1,8.507,3Z" transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_2" data-name="Path 2" d="M20.829,15.695a4.406,4.406,0,1,1-3.712-3.712,4.406,4.406,0,0,1,3.712,3.712Z" transform="translate(-5.408 -5.374)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_3" data-name="Path 3" d="M26.25,9.75h0" transform="translate(-9.177 -4.793)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="24.797" height="26.183" viewBox="0 0 24.797 26.183">
<path id="Icon_feather-github" data-name="Icon feather-github" d="M10.71,21.316C5.2,22.968,5.2,18.562,3,18.011M18.42,24.62V20.357a3.712,3.712,0,0,0-1.035-2.875c3.459-.386,7.093-1.7,7.093-7.71a5.991,5.991,0,0,0-1.651-4.13,5.584,5.584,0,0,0-.1-4.153s-1.3-.386-4.307,1.63a14.738,14.738,0,0,0-7.71,0C7.7,1.1,6.4,1.489,6.4,1.489a5.584,5.584,0,0,0-.1,4.153A5.992,5.992,0,0,0,4.652,9.805c0,5.97,3.635,7.281,7.093,7.71a3.712,3.712,0,0,0-1.035,2.842V24.62" transform="translate(-1.181 0.063)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="23.131" height="23.131" viewBox="0 0 23.131 23.131">
<path id="Icon_awesome-linkedin" data-name="Icon awesome-linkedin" d="M21.478,2.25H1.647A1.659,1.659,0,0,0,0,3.918v19.8a1.659,1.659,0,0,0,1.647,1.668H21.478a1.664,1.664,0,0,0,1.652-1.668V3.918A1.664,1.664,0,0,0,21.478,2.25ZM6.991,22.076H3.563V11.038H7V22.076ZM5.277,9.53A1.988,1.988,0,1,1,7.264,7.542,1.989,1.989,0,0,1,5.277,9.53ZM19.842,22.076H16.413v-5.37c0-1.28-.026-2.927-1.781-2.927-1.786,0-2.06,1.394-2.06,2.835v5.463H9.144V11.038h3.289v1.508h.046a3.611,3.611,0,0,1,3.248-1.781c3.47,0,4.115,2.287,4.115,5.261Z" transform="translate(0 -2.25)" fill="#fff"/>
</svg>
</div>
.socials:hover path{
fill: #FF4141;
transition: 0.5s ease;
}

It's because they have none as the initial value for the property fill, while the last one has #FFF. It's impossible to make a transition from no value. Replacing fill="none" by fill="#fff" in the path tags worked for me.
If you need them to be transparent, you can use a rgba value instead (rgba(255,255,255,0)).

Simulate eye blink animation on SVG element with CSS only

I have the following section of an SVG file (it's basically a hyphen character drawn out).
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
I want to animate a sort of eye blink on that part of the SVG file so that the shape ends up looking like this.
<path fill="#000000" d="m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z" fill-rule="nonzero"></path>
I can't figure out how to do this with CSS only. One "blink" is the first step. Of course, the next step is to time a few different blinks so that it looks natural. Here's the entire SVG shape -- I'd be "blinking" the left and right eyes at the same time. I wish I could provide more detail here, but I'm a novice.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
</g>
</svg>
After playing around a bit more I have this using SMIL
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
Now I don't know if this is possible, but I'd like to iterate each blink at somewhat random intervals. Or at the very least, something like this:
blink.........blink.blink..............blink......blink.
I don't know how to loop these animations, but I'm learning a lot here tonight. :)

Here's an answer using SMIL, I've just pasted the d values into the animate element's values attribute. I've used keyTimes so that there's a pause between winks.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" keyTimes="0 ; 0.1 ; 0.2 ; 1" />
</path>
</g>
</svg>

.st0{fill:#232323;}
.st1{fill:#FFFFFF;}
#keyframes open {
0% { ry: 61.7; }
95% { ry: 61.7; }
100% { ry: 0; }
}
.left-eye, .right-eye {
animation-name: open;
animation-duration: 2s;
animation-iteration-count: infinite;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 752.9 752.9" style="enable-background:new 0 0 752.9 752.9;" xml:space="preserve">
<g id="circle" transform="translate(-17.5 -17.5) scale(0.3431372549019608)">
<g>
<circle vector-effect="non-scaling-stroke" class="st0" cx="1148.1" cy="1148.1" r="1097.1"/>
</g>
</g>
<g id="icon" transform="translate(-16.325252525252523 -16.361616161616162) scale(0.3232323232323232)">
<g>
<ellipse class="st1 left-eye" cx="998.4" cy="1304.6" rx="41.1" ry="61.7"/>
<ellipse class="st1 right-eye" cx="1409.8" cy="1304.6" rx="41.1" ry="61.7"/>
<path class="st1" d="M1368.7,1510.3h-329.1c-11.4,0-20.6,9.2-20.6,20.6c0,11.4,9.2,20.6,20.6,20.6h329.1
c11.4,0,20.6-9.2,20.6-20.6C1389.3,1519.5,1380,1510.3,1368.7,1510.3z"/>
<path class="st1" d="M1753.5,816.9l-287.9-288c-3.9-3.8-9.1-5.9-14.6-6H751.5c-56.8,0-102.8,46.1-102.9,102.9v1152
c0.1,56.8,46.1,102.8,102.9,102.9h905.1c56.8,0,102.8-46.1,102.9-102.9V831.5c0-2.7-0.5-5.4-1.6-7.9
C1756.9,821.1,1755.4,818.8,1753.5,816.9L1753.5,816.9z M1533.2,810.9c-34.1,0-61.7-27.6-61.7-61.7V593.1l217.8,217.8H1533.2z
M1656.7,1839.5H751.5c-34.1,0-61.7-27.6-61.7-61.7v-1152c0-34.1,27.6-61.7,61.7-61.7h678.9v185.2
c0.1,56.8,46.1,102.8,102.9,102.9h185.2v925.7C1718.4,1811.8,1690.7,1839.4,1656.7,1839.5L1656.7,1839.5z"/>
</g>
</g>
</svg>

svg code HTML 5 path golden spiral

i am looking to create a text animation along a spiral path
something on the lines of this http://www.html5canvastutorials.com/labs/html5-canvas-spiral-text/
my attempt is to make the path a golden spiral instead of the one in the above code. the svg code for the golden spiral is given below... i have tried replacing the path data, but only the first curve loads...
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="ARC">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M32,87.344c0,327.678,265.635,593.313,593.313,593.313"/>
</g>
<g id="ARC_1_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M625.313,680.656C827.829,680.656,992,516.485,992,313.969"/>
</g>
<g id="ARC_2_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M992,313.969c0-125.162-101.464-226.625-226.625-226.625"/>
</g>
<g id="ARC_3_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062"/>
</g>
<g id="ARC_4_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563"/>
</g>
<g id="ARC_5_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5"/>
</g>
<g id="ARC_6_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064"/>
</g>
<g id="ARC_7_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435"/>
</g>
</svg>

Simply append the paths' d attribute and delete the rest of your arcs:
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M32,87.344c0,327.678,265.635,593.313,593.313,593.313
M625.313,680.656C827.829,680.656,992,516.485,992,313.969
M992,313.969c0-125.162-101.464-226.625-226.625-226.625
M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062
M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563
M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5
M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064
M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435
"/>