SVG animation issue with <style> tag - html

Question

I am trying to add the CSS code inside the HTML but I am having trouble getting the SVG animation to work. What am I doing wrong here? My guest is that I am referencing <style> wrongly but after a couple of tries I can't make it work.
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<svg class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
</svg>
</svg>
CodePen
Thank you in advance.

Answer 1

Your animation works. You messed up stroke color definition. hsl(210, 70%, 75%);
and circle elements opening tag is missing closing bracket >
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" > </circle>
html, body {
height: 100%;
background-color: #000000;
}
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
transform-origin:center center;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70%, 75%);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<g class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</g>
</svg>

Answer 2

you need to close the html tag for circle
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
should be
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>