<div class="container">
<svg id="Layer_1" data-name="Layer 1" width="50vh" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140.05 97.52">
<path class="path" d="m8.72,1.69c-3.05,7.12-2.68,15.88.99,22.92,2.44,4.69,6.89,9.14,11.49,11.48.57.29.95.63.89.79-.07.15-4.46,10.03-9.78,21.94-3.55,7.96-7.1,15.93-10.65,23.9l-.99,2.23,12.4,5.53c4.19,1.87,8.38,3.74,12.57,5.6.2.08,11.33-24.91,12.06-27.06,2.64-7.91,1.24-17.22-3.63-24.04-2.34-3.28-5.98-6.49-9.07-8.02-1.01-.5-1.44-.83-1.37-1.07.05-.19,2.47-5.65,5.36-12.14,2.89-6.48,5.21-11.83,5.16-11.88-.07-.07-16.31-7.35-23.99-10.75l-1-.44-.44,1.03m11.97,5.19c13.18,5.88,12.13,5.39,12.13,5.62,0,.11-2.1,4.91-4.66,10.68-1.7,3.82-3.4,7.65-5.09,11.48l-.43.99-1.22-.62c-4.42-2.24-8.63-6.53-10.93-11.14-3.02-6.07-3.69-12.35-1.97-18.56.47-1.71,1.07-3.3,1.23-3.3.05,0,4.98,2.18,10.95,4.84m69.39-2.03c-12.11.71-24.15,6.86-32.12,16.43-11.71,14.03-14.01,33.69-5.88,50.04,4.64,9.32,11.47,16.16,20.86,20.86,12.89,6.45,28.07,6.45,40.96,0,4.94-2.48,7.94-4.61,11.81-8.41,2.7-2.65,4.4-4.71,6.38-7.72,7.28-11.11,9.35-24.94,5.7-37.96-1.36-4.85-4.21-10.61-7.35-14.84-1.92-2.59-6.5-7.22-9.02-9.12-9.14-6.87-19.58-9.96-31.33-9.27m9.68,1.25c30.39,4.42,47.62,36.97,34.22,64.64-3.35,6.91-8.91,13.26-15.54,17.73-8.15,5.5-18.99,8.32-28.63,7.44-9.3-.85-18.01-4.35-24.9-9.99-1.98-1.62-5.89-5.63-7.33-7.53-4.11-5.39-7.22-12.25-8.53-18.85-2.46-12.39.66-25.9,8.29-35.9,7.2-9.44,17.82-15.75,29.47-17.52,3.04-.46,9.85-.47,12.95-.02m-10.28,21.78c-7.48,1.25-13.83,6.12-17.15,13.13-1.65,3.48-2.09,5.62-2.07,10.03.02,3.01.11,4.05.51,5.51,2.25,8.23,8.19,14.32,16.38,16.78,1.93.58,2.39.63,6.26.63s4.31-.04,6.26-.64c10.03-3.05,16.52-11.32,16.97-21.58.28-6.58-2.1-12.67-6.79-17.36-5.35-5.35-12.88-7.75-20.37-6.5m9.03,1.24c9.72,2.36,16.65,10.68,17.19,20.64.47,8.76-4.41,17.06-12.32,20.97-3.74,1.85-5.69,2.3-9.96,2.31-4.27,0-6.21-.44-9.96-2.31-6.34-3.14-10.48-8.6-11.96-15.72-1.44-6.98.89-14.6,6.06-19.8,3.67-3.68,8.01-5.81,13.54-6.63,1.4-.21,5.61.1,7.42.53m-71.03,10.52c5.17,3.85,8.7,9.43,10.11,15.92.85,3.92.47,9.25-.94,13.4-.7,2.05-11.26,25.76-11.47,25.76-.16,0-22.99-10.16-23.12-10.29-.04-.04,4.45-10.23,9.98-22.64,3.52-7.9,7.03-15.79,10.55-23.69l.5-1.12,1.57.86c.86.47,2.14,1.28,2.84,1.81" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-miterlimit="10"/>
</svg></div>
<!-- iO Logo -->
<a href="https://www.iodigital.com" aria-label="visit iodigital.com" class="template-io-logo">
<svg width="1.5rem" height="1.5rem" color="currentColor" viewBox="0 0 57 39" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#c0)"><path d="M8.58455 14.3293L0 33.6085L9.91384 38.024L14.0829 28.6586C16.5231 23.1788 14.0597 16.7648 8.58455 14.3293Z" fill="currentColor"></path><path d="M3.08002 0C0.644549 5.47515 3.1079 11.8892 8.58306 14.3293L12.9985 4.41545L3.08002 0Z" fill="currentColor"></path><path d="M37.5952 10.9689C42.745 10.9689 46.9374 15.1612 46.9374 20.311C46.9374 25.4608 42.745 29.6532 37.5952 29.6532C32.4454 29.6532 28.2531 25.4608 28.2531 20.311C28.2531 15.1612 32.4454 10.9689 37.5952 10.9689ZM37.5952 1.62207C27.2724 1.62207 18.9062 9.98818 18.9062 20.311C18.9062 30.6339 27.2724 39 37.5952 39C47.918 39 56.2842 30.6339 56.2842 20.311C56.2842 9.99282 47.918 1.62207 37.5952 1.62207Z" fill="currentColor"></path></g><defs><clipPath id="c0"><rect width="56.2853" height="39" fill="white"></rect></clipPath></defs></svg>
</a>
@property --rotateH {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.container {
--color-hue: hsl(var(--rotateH) 37% 30%);
--color-black: #000;
color: hsl(var(--rotateH) 95% 70%);
animation: spinH 20s infinite 2s;
}
svg {
animation: stroke 20s infinite 2s;
stroke-dasharray: 500;
filter: drop-shadow(0 0 3px #fff);
}
.container::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
margin: 0 auto;
filter: blur(150px);
background-image: conic-gradient(
from var(--rotate),
var(--color-hue),
var(--color-black),
var(--color-hue),
var(--color-black)
);
animation: spin 20s linear infinite;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
background: #000;
}
@keyframes stroke {
0%,
100% {
stroke-dashoffset: 500;
}
50% {
stroke-dashoffset: 0;
}
}
@keyframes spinH {
0% {
--rotateH: 0deg;
}
100% {
--rotateH: 360deg;
}
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 720deg;
}
}
/**
Template styles
*/
.template-io-logo {
--io-logo-color: rgba(0, 0, 0, 1);
--io-logo-background: rgba(255, 255, 255, 0.7);
position: fixed;
bottom: 1rem;
left: 1rem;
display: flex;
place-items: center;
padding: 0.5rem;
background-color: var(--io-logo-background);
backdrop-filter: blur(0.125rem);
color: var(--io-logo-color);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.