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?

@mamounothman One is required to post a [mcve] here, within the question, and not any third party site. — Rob, Feb 07 '20 at 14:02
Its not an issue, its a question if this is even possible, and if it is, them how would it be possible? — Raf A., Feb 07 '20 at 14:03

score 1 · Accepted Answer · answered Feb 07 '20 at 13:53

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>

Part of SVG changing in animation on hover

1 Answers1