<svg viewBox="0 0 100 100">
  <defs>
    <mask id="mask">
      <path d="M 50 96 a 46 46 0 0 1 0 -92 46 46 0 0 1 0 92" class="logoPath" id="logo-path" />
    </mask>
  </defs>
  
  <foreignObject class="logoWrap" mask="url(#mask)" x="0" y="0" width="100" height="100">
    <div class="logoGradient" xmlns="http://www.w3.org/1999/xhtml"></div>
  </foreignObject>
</svg>
svg {
  max-width: 240px;
  transform-origin: bottom;
  animation: scaleStart 0.5s ease-out forwards;
}

.logoWrap {
  transform: rotate(270deg);
  transform-origin: 50px 50px;
  animation: colorRotate 7.5s 0.5s infinite linear;
  will-change: transform;
}

.logoGradient {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%);
}

.logoBack {
  fill: black;
}

.logoPath {
  stroke: white;
  stroke-width: 8;
  stroke-dasharray: 288.5;
  stroke-dashoffset: -288.5;
  stroke-linecap: round;
  fill: none;
  transform-origin: 50px 50px;
  will-change: stroke-dashoffset, transform;
  animation:
    pathStroke 3.75s 0.5s infinite ease-in-out,
    pathRotate 7.5s 0.5s infinite cubic-bezier(1,.5,0,.5);
}

@keyframes scaleStart {
  0% { transform: scale(0.5); }
  60% {
    transform: scale(1.25);
    animation-timing-function: ease-in;
  }
  100% { transform: scale(1); }
}

@keyframes colorRotate {
  from { transform: rotate(270deg); }
  to { transform: rotate(-90deg); }
}

@keyframes pathStroke {
  0% { stroke-dashoffset: 288.5; }
  40%, 70% { stroke-dashoffset: 577; }
  100% { stroke-dashoffset: 865.5; }
}

@keyframes pathRotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-540deg); }
  100% { transform: rotate(-1080deg); }
}
View Compiled
// In reference to: https://css-tricks.com/my-struggle-to-use-and-animate-a-conic-gradient-in-svg/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.