CPOMS logo

by mikecmpbll

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="logo">
   <circle cx="50" cy="50" r="36" stroke="transparent" stroke-width="6" fill="none" class="trans" />
   <circle cx="50" cy="50" r="30" stroke="#9B3265" stroke-width="5" fill="none" class="reg" />
   <circle cx="50" cy="50" r="22" stroke="transparent" stroke-width="11" fill="none" class="trans" />
   <circle cx="50" cy="50" r="13" stroke="#9B3265" stroke-width="5" fill="none" class="reg" />
</svg>

CSS

.logo circle {
  filter: brightness(120%);
  transition: all 0.8s;
}

.logo circle.trans:hover + circle, .logo circle.reg:hover {
  stroke: #c7528b;
  transition: all 0.1s;
}