andrewgremlich/headspace-dot.html

## headspace-dot.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      :root {
        --smile-stroke-width: 8px;

        --face-full: 500px;
        --face-small: 300px;
        --face-arc-transparent: var(--smile-stroke-width) solid transparent;

        --eye-stroke-width: 5px;
        --eye-arc-transparent: var(--eye-stroke-width) solid transparent;

        --animation-mode: 6s normal ease infinite;
      }

      html,
      body {
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      #headspace-container {
        width: var(--face-full);
        height: var(--face-full);
        position: relative;
      }

      #orange-main {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        width: var(--face-full);
        height: var(--face-full);

        border-radius: 50%;
        background: #ff7300;
        animation: headspaceCircleGrow var(--animation-mode);
      }

      @keyframes headspaceCircleGrow {
        0% {
          width: var(--face-full);
          height: var(--face-full);
        }

        50% {
          width: var(--face-small);
          height: var(--face-small);
        }

        100% {
          width: var(--face-full);
          height: var(--face-full);
        }
      }

      #face {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        width: 200px;
        height: 200px;

        display: grid;
        grid-template-rows: 60% 40%;
        grid-template-columns: 50% 50%;

        animation: shrinkingFace var(--animation-mode);
      }

      @keyframes shrinkingFace {
        0% {
          width: 200px;
          height: 200px;
          top: -300px;
        }

        50% {
          width: 50px;
          height: 50px;
          top: -200px;
        }

        100% {
          width: 200px;
          height: 200px;
          top: -300px;
        }
      }

      .eye {
        width: 50px;
        height: 50px;

        border-left: var(--eye-arc-transparent);
        border-right: var(--eye-arc-transparent);
        border-bottom: var(--eye-stroke-width) solid black;
        border-radius: 50%;

        justify-self: center;
        align-self: end;

        animation: shrinkingEyes var(--animation-mode);
      }

      @keyframes shrinkingEyes {
        0% {
          width: 50px;
          height: 50px;
        }

        50% {
          width: 20px;
          height: 20px;
        }

        100% {
          width: 50px;
          height: 50px;
        }
      }

      #smile {
        width: 100%;
        height: 100px;

        border-left: var(--face-arc-transparent);
        border-right: var(--face-arc-transparent);
        border-bottom: var(--smile-stroke-width) solid black;
        border-radius: 50%;

        grid-column-start: 1;
        grid-column-end: 3;
        justify-self: center;
        align-self: end;
      }
    </style>
  </head>
  <body>
    <div id="headspace-container">
      <div class="circle" id="orange-main"></div>
      <div id="face">
        <div class="eye" id="eye-left"></div>
        <div class="eye" id="eye-right"></div>
        <div id="smile"></div>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>

	<style>
	:root {
	--smile-stroke-width: 8px;

	--face-full: 500px;
	--face-small: 300px;
	--face-arc-transparent: var(--smile-stroke-width) solid transparent;

	--eye-stroke-width: 5px;
	--eye-arc-transparent: var(--eye-stroke-width) solid transparent;

	--animation-mode: 6s normal ease infinite;
	}

	html,
	body {
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
	}

	#headspace-container {
	width: var(--face-full);
	height: var(--face-full);
	position: relative;
	}

	#orange-main {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	width: var(--face-full);
	height: var(--face-full);

	border-radius: 50%;
	background: #ff7300;
	animation: headspaceCircleGrow var(--animation-mode);
	}

	@keyframes headspaceCircleGrow {
	0% {
	width: var(--face-full);
	height: var(--face-full);
	}

	50% {
	width: var(--face-small);
	height: var(--face-small);
	}

	100% {
	width: var(--face-full);
	height: var(--face-full);
	}
	}

	#face {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	width: 200px;
	height: 200px;

	display: grid;
	grid-template-rows: 60% 40%;
	grid-template-columns: 50% 50%;

	animation: shrinkingFace var(--animation-mode);
	}

	@keyframes shrinkingFace {
	0% {
	width: 200px;
	height: 200px;
	top: -300px;
	}

	50% {
	width: 50px;
	height: 50px;
	top: -200px;
	}

	100% {
	width: 200px;
	height: 200px;
	top: -300px;
	}
	}

	.eye {
	width: 50px;
	height: 50px;

	border-left: var(--eye-arc-transparent);
	border-right: var(--eye-arc-transparent);
	border-bottom: var(--eye-stroke-width) solid black;
	border-radius: 50%;

	justify-self: center;
	align-self: end;

	animation: shrinkingEyes var(--animation-mode);
	}

	@keyframes shrinkingEyes {
	0% {
	width: 50px;
	height: 50px;
	}

	50% {
	width: 20px;
	height: 20px;
	}

	100% {
	width: 50px;
	height: 50px;
	}
	}

	#smile {
	width: 100%;
	height: 100px;

	border-left: var(--face-arc-transparent);
	border-right: var(--face-arc-transparent);
	border-bottom: var(--smile-stroke-width) solid black;
	border-radius: 50%;

	grid-column-start: 1;
	grid-column-end: 3;
	justify-self: center;
	align-self: end;
	}
	</style>
	</head>
	<body>
	<div id="headspace-container">
	<div class="circle" id="orange-main"></div>
	<div id="face">
	<div class="eye" id="eye-left"></div>
	<div class="eye" id="eye-right"></div>
	<div id="smile"></div>
	</div>
	</div>
	</body>
	</html>