Animated SVG Logos

Various animated SVG logos to convey a change in page's loading state

by Nicholas Berlette

HTML

<script src="https://unpkg.com/windicss-runtime-dom"></script>
<!-- start emblem 1 -->
<div class="bg-inherit min-w-screen min-h-screen w-full h-full m-0 p-12">
  <div class="flex-col place-items-center justify-around sm:gap-x-5 gap-y-10 gap-6 grid-cols-12 mx-24 grid self-center items-center align-center text-center">
    <div class="col-span-6 sm:col-span-3">
      <svg viewBox="-20 -20 140 140" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="fill-none stroke-current stroke-0 text-inherit group" id="nb-emblem">
        <g id="nb-ukraine-emblem">
          <circle cx="50" cy="50" r="50" class="stroke-current fill-transparent outer-circle" id="c-o" />
          <circle cx="50" cy="50" r="40" class="stroke-current fill-transparent inner-circle" id="c-i" />
          <path d="M34.5,31 l0,38 l8,0 l0,-24 l15,24 l8,0 l0,-38 l-8,0 l0,24 l-15,-24 Z" fill="transparent" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" class="letter-n text-inherit" id="n-b" />
        </g>
				<use href="#b" />
				<path fill="#004bbb" d="M-571-373H662v822H-571z" clip-path="url(#a)"/><path fill="#ffc500" d="M-571 48H662v411H-571z" clip-path="url(#a)"/><clipPath id="a"><use href="#n-b" overflow="visible"/></clipPath>
      </svg>
    </div>
    <!-- end emblem 1 -->


    <!-- start emblem 2 -->
    <div class="col-span-6 sm:col-span-3">
      <svg viewBox="-20 -20 140 140" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="fill-none stroke-current stroke-0 text-inherit group" id="nb-emblem-2">
        <g>
          <circle cx="50" cy="50" r="50" class="stroke-current fill-transparent outer-circle group-hover:animate-pulse group-hover:text-violet-500/60" />
          <circle cx="50" cy="50" r="40" class="stroke-current fill-transparent inner-circle" />
          <path d="M34.5,31 l0,38 l8,0 l0,-24 l15,24 l8,0 l0,-38 l-8,0 l0,24 l-15,-24 Z" fill="transparent" stroke="currentColor" stroke-width="1.5"...

CSS

/* all emblems */
[id^="nb-emblem"] {
  cursor: wait;
}

[id^="nb-emblem"] .letter-n {
  stroke-width: 1;
  transform-origin: 35.75% 35.75%;
}

[id^="nb-emblem"]:hover .letter-n {
  fill: black;
  animation-play-state: running;
}

[id^="nb-emblem"] .inner-circle {
  stroke-width: 2;
  transform-origin: 35.75% 35.75%;
}

[id^="nb-emblem"] .outer-circle {
  stroke-width: 2;
  transform-origin: 35.75% 35.75%;
}

/* emblem #1 */
#nb-emblem .letter-n {
  transition: fill 2.5s ease-out, stroke 1s 3s;
}

#nb-emblem:hover .letter-n {
  fill: transparent;
  animation-play-state: running;
	stroke: #ffc50099;
}

#nb-emblem .inner-circle {
  transition: stroke-width 5s, transform 2s, stroke 1s 3s ease-in;
}

#nb-emblem:hover .inner-circle {
	stroke: #004bbb;
  stroke-width: 8 !important;
  transform: scale(1.1);
}

#nb-emblem .outer-circle {
  stroke-dasharray: 20 4;
  stroke-dashoffset: 20;
  transition: stroke-width 1s, transform 1s, stroke-dasharray 5s ease-in-out, stroke-dashoffset 3s linear, stroke .75s 4s ease-in;
}

#nb-emblem:hover .outer-circle {
  /* animation: 1s spin infinite linear, 3s fragment infinite linear; */
	stroke-dasharray: 360 360;
	stroke-dashoffset: 20;
	stroke: #ffc500;
}

/* emblem #2 */
#nb-emblem-2 .letter-n {
  animation: 10s fragment 1 linear forwards;
  animation-play-state: paused;
  transition: fill 2.5s ease-out;
}

#nb-emblem-2:hover .letter-n {
  fill: white;
  animation-play-state: running;
}

#nb-emblem-2 .inner-circle {
  transition: stroke-width 5s, transform 2s;
}

#nb-emblem-2:hover .inner-circle {
  stroke-width: 8 !important;
  transform: scale(1.1);
}

#nb-emblem-2 .outer-circle {
  stroke-dasharray: 320 360;
  stroke-dashoffset: 0;
  transition: stroke-width 1s, transform 1s, color 1s;
}

/* emblem #3 */
#nb-emblem-3 .letter-n {
  /* animation: 10s trace 1 linear forwards; */
  /* animation-play-state: paused; */
  animation-duration: 1.2s;
  stroke-width: .5;
  transition: fill 2.5s ease-out, stroke-width 0.666s...