JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="container">
    <div class="polygon">
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
    <div class="starfield"></div>
  </div>

CSS

$n: 16; // number of sides
$r: 25vmin; // inradius (apothem)
$a: 2 * $r * tan(180deg / $n); // side length

.container {
  position: relative;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  perspective: 3.125vmin;
}

.container::after {
  background-color: #340468;
  border-radius: 50%;
  content: "";
  height: 2.5vmin;
  width: 2.5vmin;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2.5vmin 2.5vmin #340468;
}

.side {
  background-image: url("https://assets.codepen.io/4725810/fractal-fire-sky-seamless-background.jpg");
  background-size: ($n * $a) 25%;
  height: 100vmin;
  position: absolute;
  transform-origin: 0;
  width: calc(#{$a} + 1px);
  animation: recolor var(--anim-length) infinite;
  opacity:1;
  @for $i from 1 through $n {
    &:nth-child(#{$i}) {
      background-position: ($a * $i * -1) 0;
      transform: rotatey(360deg / $n * $i) translate3d(-50%, -50%, $r);
    }
  }
}

@keyframes recolor {
  0%, 100%{filter: hue-rotate(0deg);}
  25%, 75%{filter: hue-rotate(-20deg);}
  50% {filter: hue-rotate(-90deg);}
}