<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/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.