around the world

Animated personal logomark

by Nicholas Berlette

HTML

<script src="https://unpkg.com/windicss-runtime-dom"></script>
<!-- start emblem -->
<div class="bg-inherit min-w-screen min-h-screen w-full h-screen m-0 p-12 relative" style="box-shadow:0 -3rem 15rem -2rem inset #0009;">
  <div class="flex flex-col place-items-center justify-around items-center align-center text-center absolute top-1/2 -translate-y-1/2 left-1/2 transform -translate-x-1/2 w-auto h-[60vh] <md:w-[80vw] max-w-[80vw] max-h-[50vh]">
      <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 transform animate__flipInY animate__animated animate__once" style="animation-delay:1s;" id="nb-emblem">
        <g id="nb">
          <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" class="letter-n text-inherit group-hover:animate-pulse" id="n-b" />
        </g>
				<use href="#b" />
				<g id="ukraine-overlay" opacity="0" class="group-hover:!opacity-100 transition-opacity duration-700 ease-in">
<!-- 					<path fill="#044bbb" d="M-571-473H662v822H-571z" clip-path="url(#a)" style="transform-origin:50% 100%;transform:scaleY(0);" /> -->
					<path fill="#ffc50000" d="M-571 50H662v411H-571z" clip-path="url(#a)" class="group-hover:!fill-[#ffc500ff] hover:!fill-[#ffc500ff] !transition-[fill] duration-1000 ease-in" />	
					<clipPath id="a"><use href="#n-b" overflow="visible"/></clipPath>
				</g>
      </svg>
    <!-- end emblem -->
			<h1 class="animate__animate animate__backInDown text-4xl font-[Metropolis] font-black tracking-tight">Nicholas Berlette</h1>
			<h2 class="animate__animate animate__backInUp text-2xl font-[Metropolis] font-light lowercase tracking-tight">Fullstack Developer</h2>
 ...

CSS

@import "https://unpkg.com/[email protected]/animate.css";
@import "https://unpkg.com/@typehaus/[email protected]/index.css";
@import "https://unpkg.com/open-props";

/* 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: 4;
  transform-origin: 35.75% 35.75%;
}

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

#nb-emblem {
	/* transition: transform 0.5s 1s ease-in, opacity 0.666s 1.1s ease-in; */
	/* transform-origin: 50% 100%; */
	/* transform: perspective(500px) scale3d(var(--tw-scale-x, 0), var(--tw-scale-y, 0), var(--tw-scale-z, 1)); */
	/* opacity: 0; */
	filter: drop-shadow(0 0.1rem 0.2rem #0003);
}

#ukraine-overlay {
	transition: 0.5s fill 1.5s ease-in;
}

/* 	#ukraine-overlay path {
		fill: #044bbb;
		transition: inherit !important;	
	} */
	#ukraine-overlay path {
		fill: #ffc50000;
		transition: 0.5s fill 2s ease-in, 0.6 transform 3s ease-in !important;
	}
	
/* emblem #1 */
#nb-emblem .letter-n {
	fill: #112233;
  transition: fill 2.5s ease-out, stroke 1s 3s;
}

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

#nb-emblem .inner-circle {
  transition: stroke-width 6s, transform 2s, stroke 1.33s 2.5s ease-in;
}

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

#nb-emblem .outer-circle {
  stroke-dasharray: 20 4;
  stroke-dashoffset: 20;
	stroke-opacity: 0.5;
  transition: stroke-width 1s, transform 1s, stroke-dasharray 5s ease-in-out, stroke-dashoffset 3s linear, stroke .75s 2.66s ease-in, stroke-opacity 2s;
	animation: 1s micropulse 5s ease-in infinite paused;
	stroke-linecap: round;

}


#nb-emblem:hover .outer-circle {
  /* animation: 1s spin infinite linear, 3s fragment...