Part of SVG changing in animation on hover

Question

Included here is an image of the svg file (could not upload svg file)

I would like to hover mouse over, and radiantly change background (to blue) only of the circle, from the inner circle to the edges, as an animation.

Even better if the animation was kind of wobbling effect from the middle of the circle and outwards. Nice if it was kind of "random" looking, the blue wobbling effect. Important it's animating from the middle of the circle, out towards the edge until the whole circle is blue. When mouse/hover is removed then the animation is backwards.

Is that possible in svg/css land and can someone point towards the right direction?

Answer 1

This is a slightly hacky way to do it, using a blue circle with a black stroke that starts so thick it fills its interior. Hovering over the circle causes the stroke to shrink to nothing.

.logo-background {
    fill: blue;
    stroke: black;
    stroke-width: 200;
    transition: stroke-width 500ms;
}
.logo-background:hover {
    stroke-width: 0;
}
.logo {
  fill: none;
  stroke: white;
  stroke-width: 5;
  pointer-events: none;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" height="100px">
  <defs>
    <clipPath id="circle-clip">
      <circle cx="100" cy="100" r="100" />
    </clipPath>
  </defs>

  <circle class="logo-background" cx="100" cy="100" r="100" clip-path="url(#circle-clip)" />
  <rect class="logo" x="60" y="60" width="80" height="80" rx="5" ry="5"/>
</svg>