<svg width="500" height="500" viewbox="0 0 500 500">
  <circle cx="250" cy="250" r="200" />
</svg>

<svg>
  <defs>
    <pattern id="avatar" width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
      <image xlink:href='https://assets.codepen.io/9632/S6g8rNmQ_400x400.jpg' width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>
  </defs>
</svg>
:root {
  --transition: all .35s ease-in-out;
}

svg {
  fill: url(#avatar);
  stroke-width: 20px;
}

svg {
  filter: grayscale(1);
  transition: var(--transition);
}

circle {
  stroke: hsl(39 100 49 / .5);
  stroke-dasharray: 0;
  transform: rotate(5deg);
  transform-origin: center;
  transition: var(--transition);
}

svg:hover {
  filter: grayscale(0);
}

svg:hover circle {
  stroke: hsl(39 100 49 / 1);
  stroke-dasharray: 10 20;
  transform: rotate(0);
  transform-origin: center;
}

/* DEMO STYLES */
body {
  background: #333;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.