html, body, div {
  display: grid;
}

html {
  height: 100%;
}

body {
  overflow: hidden;
  perspective: 35em;
  background: #151515;
}

div, ::before {
  grid-area: 1/1;
  place-self: center;
  transform-style: preserve-3d;
}

/* the 3D assembly */
.a3d::before {
  /* assembly shadow */
  padding: calc(.5*4em/var(--tan));
  transform: translatey(calc(50% + 2*4em));
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.31), transparent) 50%/100% 4em no-repeat;
  content: "";
}

/* generic 3D shape; applies to all rounded corner prisms */
.s3d {
  /* middle index for petals
   * reference: 
   * https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/ 
   */
  --m: calc(.5*(var(--n) - 1));
  --abs: max(var(--i) - var(--m), var(--m) - var(--i));
  --pos: /* base position for prisms */
  	rotate(calc(var(--i)*-360deg/var(--n)))
  	translate(calc(.5*4em/var(--tan)))
  	rotatex(39deg);
  transform: var(--pos);
  /* may cause perf issues; comment out in that case */
  animation: r 8s linear infinite;
}

@keyframes r {
  0% {
    transform: var(--pos) rotate(1turn);
  }
}
/* generic 2D shape (applies to all prism faces) */
.s2d {
  color: hsl(calc(var(--i)*360deg/var(--n)), calc(35% + (var(--m) - var(--abs))*65%), var(--lum, 35%));
}

/* base face */
.s5gon {
  transform: translatez(0.375em);
  /* improves edge look, but may be a perf problem;
   * comment out in that case */
  filter: drop-shadow(0 0 1px currentcolor) drop-shadow(0 0 1px currentcolor);
  /**/
  /* use pseudo on the polygonal clipped shape
   * so parent can set a filter that applies to clipped shape, 
   * not to square HTML box it's in 
   */
}
.s5gon::before {
  padding: 4em;
  background: currentcolor;
  clip-path: polygon(45.2447174185% 3.4549150281%, 48.317959088% 2.08661968%, 51.682040912% 2.08661968%, 54.7552825815% 3.4549150281%, 92.7975432333% 31.0942352531%, 95.048553344% 33.5942352531%, 96.0881117981% 36.7936671932%, 95.7364694947% 40.139320225%, 81.2056189346% 84.860679775%, 79.5235780226% 87.774060095%, 76.8019786565% 89.7514177787%, 73.5114100917% 90.4508497187%, 26.4885899083% 90.4508497187%, 23.1980213435% 89.7514177787%, 20.4764219774% 87.774060095%, 18.7943810654% 84.860679775%, 4.2635305053% 40.139320225%, 3.9118882019% 36.7936671932%, 4.951446656% 33.5942352531%, 7.2024567667% 31.0942352531%);
  content: "";
}

/* prism shadow */
.shade {
  /* the shadow; remove if it causes perf issues *
  display: none;
  /**/
  transform: translatez(-0.375em) scale(1.1);
  filter: blur(5px);
}
.shade::before {
  background: rgba(0, 0, 0, 0.65);
}

/* generic lateral face */
.latf {
  --lum: 50%;
  /* make lateral faces brighter */
  height: 0.75em;
  background: currentcolor;
  /* improves edge look by covering gaps between 
   * corner rounding approximation segments; 
   * may however be be a perf problem; comment out if so */
  box-shadow: 1px 0 1px currentcolor, -1px 0 1px currentcolor;
}

/*  main lateral faces */
.main {
  width: 3.7618256147em;
  transform: rotate(calc(var(--j)*72deg)) translatey(3.2360679775em) rotatex(-90deg);
}

/* corner rounding lateral faces */
.crnr {
  width: 0.2691265459em;
  transform: rotate(calc((var(--j) + -.5)*72deg)) translatey(3.2em) rotate(calc((var(--k) + .5)*24deg + -.5*72deg)) translatey(0.6472135955em) rotatex(-90deg);
}