<div id="container">
  <div class="lettering">
    <h2>It's an</h2>
    <h1>illusion</h1>
  </div>
</div>
<p>Based on illustration by<br><a href="https://www.serifsupply.com/shop/its-an-illusion" target="_blank">Serif Supply</a></p>

@import url("https://fonts.googleapis.com/css?family=Poller+One|Arima+Madurai");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:before,
*:after {
  position: absolute;
  content: "";
}

:root {
  /* CHANGE TO CONTROL SCALE */
  --radius: 100px;
  /* CHANGE BORDER SIZE TO VIEW GRID */
  --sketch-grid: 0px dotted gray;
  --color-top: #cca27c;
  --color-bottom: #272727;
  /* CHANGE TO CONTROL TIMING OF ANIMATION */
  --animation-timing: 5s;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #e8e0d5;
}

#container {
  width: calc(var(--radius) * 4);
  height: calc(var(--radius) * 4);
  display: flex;
  justify-content: center;
  border: var(--sketch-grid);
}

p {
  font-family: "Arima Madurai", sans-serif;
  font-size: 12px;
  border: var(--sketch-grid);
  color: var(--color-top);
  text-align: center;
  z-index: 100;
  line-height: 1.25;
  
}

p a:link, p a:visited {
  text-decoration: underline;
  color: var(--color-top);
  transition: all 0.2s;
}

.lettering {
  position: relative;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  border-radius: 50%;
  border: var(--sketch-grid);
  top: calc(var(--radius) * 0.2);
}

h2 {
  border: var(--sketch-grid);
  height: var(--radius);
  color: var(--color-top);
  font-family: "Poller One", sans-serif;
  text-transform: uppercase;
}

h2 span {
  font-size: calc(var(--radius) / 5);
  height: var(--radius);
  position: absolute;
  width: calc(var(--radius) / 5);
  left: calc(var(--radius) - calc(calc(var(--radius) / 5) / 2));
  top: 0;
  transform-origin: bottom center;
  border: var(--sketch-grid);
}

h2 .char1 {
  transform: rotate(-32deg);
}

h2 .char2 {
  transform: rotate(-24deg);
}

h2 .char3 {
  transform: rotate(-12deg);
}

h2 .char4 {
  transform: rotate(-6deg);
}

h2 .char5 {
  transform: rotate(6deg);
}

h2 .char6 {
  transform: rotate(18deg);
}

h2 .char7 {
  transform: rotate(32deg);
}

h1 {
  font-family: "Arima Madurai", sans-serif;
  border: var(--sketch-grid);
  height: calc(var(--radius) * 3);
  color: var(--color-bottom);
  margin-top: calc(var(--radius) / -2);
  width: calc(var(--radius) * 3);
  margin-left: calc(var(--radius) / -2);
  text-transform: uppercase;
}

h1 span {
  font-size: calc(var(--radius) * 1.5);
  height: auto;
  line-height: calc(var(--radius) * 1.5);
  position: absolute;
  width: auto;
  border: var(--sketch-grid);
  animation: breathe ease-in-out infinite;
  transition: font-weight 0.2s;
}

h1 span:nth-child(odd) {
  animation-delay: 1s;
}

h1 span:nth-child(even) {
  animation-delay: 1.5s;
}

h1 .char1 {
  margin-left: calc(var(--radius) * 0.5);
  margin-top: calc(var(--radius) * 0.1);
  font-size: calc(var(--radius) * 1.2);
  animation-duration: var(--animation-timing);
}

h1 .char2 {
  margin-left: calc(var(--radius) * 0.8);
  margin-top: calc(var(--radius) * 0.3);
  font-size: calc(var(--radius) * 1.5);
  animation-duration: calc(var(--animation-timing) * 1.2);
}

h1 .char3 {
  margin-left: calc(var(--radius) * 1.3);
  margin-top: calc(var(--radius) * 0);
  font-size: calc(var(--radius) * 1.5);
  animation-duration: calc(var(--animation-timing) * 1.15);
}

h1 .char4 {
  margin-left: calc(var(--radius) * 2);
  margin-top: calc(var(--radius) * 0.4);
  font-size: calc(var(--radius) * 1.3);
  animation-duration: calc(var(--animation-timing) * 1.3);
}

h1 .char5 {
  margin-left: calc(var(--radius) * -0.1);
  margin-top: calc(var(--radius) * 1.2);
  animation-duration: calc(var(--animation-timing) * 0.98);
  font-size: calc(var(--radius) * 1.4);
}

h1 .char6 {
  margin-left: calc(var(--radius) * 0.7);
  margin-top: calc(var(--radius) * 1.6);
  animation-duration: calc(var(--animation-timing) * 1.25);
  font-size: calc(var(--radius) * 1.2);
}

h1 .char7 {
  margin-left: calc(var(--radius) * 1.15);
  margin-top: calc(var(--radius) * 1.7);
  animation-duration: calc(var(--animation-timing) * 1.2);
  font-size: calc(var(--radius) * 1.4);
}

h1 .char8 {
  margin-left: calc(var(--radius) * 2.15);
  margin-top: calc(var(--radius) * 1.6);
  animation-duration: calc(var(--animation-timing) * 1.15);
  font-size: calc(var(--radius) * 1.3);
}

@keyframes breathe {
  0% {
    transform: scale(1) rotate(0deg) skew(0deg, 0deg) translateY(0px);
    opacity: 1;
  }
  25% {
    transform: scale(1) rotate(3deg) skew(2deg, 2deg) translateY(2px);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2) rotate(-3deg) skew(-2deg, -2deg) translateY(-2px);
    opacity: 1;
  }
  75% {
    transform: scale(1.1) rotate(3deg) skew(2deg, 2deg) translateY(2px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg) skew(0deg, 0deg) translateY(0px);
  }
  opacity: 1;
}

$(function () {
  $("h1").lettering();
  $("h2").lettering();
});


// INSPIRED BY ILLUSTRATION FROM SERIF SUPPLY
// https://www.serifsupply.com/shop/its-an-illusion