SVG Animation with CSS and SVG mask - css

Question

I've started drawing a doughnut in SVG. And for some reason my mask doesnt work when I animate the bigger circle.(Bug on Chrome version 90.0.4430.212) I only plan to animate the bigger circle and not the whole SVG/Doughnut (I don't want the smaller circle to animate I only want the bigger circle to scale). How do you animate SVG elements with a mask?
https://codepen.io/markkkkkkk/pen/oNZWOOx
#myCircle {
animation-name: scaleKeyframe;
animation-duration: 1000ms;
animation-iteration-count: infinite;
transform-origin: 5px 5px;
animation-play-state: paused;
}
svg:hover #myCircle {
animation-play-state: running;
}
#keyframes scaleKeyframe {
from {
transform: scale(1);
}
to {
transform: scale(0.1);
}
}
<svg viewBox="0 0 40 10">
<mask id="myMask">
<rect width="100%" height="100%" fill="white" />
<circle cx="5" cy="5" r="2" fill="black" />
</mask>
<circle id="myCircle" cx="5" cy="5" r="4" mask="url(#myMask)" />
</svg>

Answer 1

I would still appreciate an answer about animating the element only and keeping the mask steady.
Just wrap your circle in a <g> element, then apply the mask to that instead.
<g mask="url(#myMask)">
<circle id="myCircle" cx="5" cy="5" r="4" />
</g>
Unfortunately, the bug is affecting this as well. Fixed in Chrome 91.0.4472.77
#myCircle {
animation-name: scaleKeyframe;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-play-state: paused;
transform-origin: 5px 5px;
}
svg:hover #myCircle {
animation-play-state: running;
}
#keyframes scaleKeyframe {
from {
transform: scale(1);
}
to {
transform: scale(0.1);
}
}
<svg viewBox="0 0 40 10">
<mask id="myMask">
<rect width="100%" height="100%" fill="white" />
<circle cx="5" cy="5" r="2" fill="black" />
</mask>
<g mask="url(#myMask)">
<circle id="myCircle" cx="5" cy="5" r="4" />
</g>
</svg>