JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<svg class="svg--defs" width="265px" height="305px" viewbox="0 0 265 305" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <!--0 0 265 305-->
      <radialGradient id="gradientFill">
          <stop offset="0%" stop-color="rgba(247,243,229,.21)" />
          <stop offset="100%" stop-color="rgba(212,206,186,.21)" />
        </radialGradient>
    <polygon id="poly--hexagon" fill="#ffffff" fill-opacity="0" points="132.5 0 264.568874 76.25 264.568874 228.75 132.5 305 0.431125923 228.75 0.431125923 76.25 "></polygon>
    <mask id="mask-2">
      <polygon points="145.5 1 290.536119 106.374908 235.137251 276.875092 55.862749 276.875092 0.463881265 106.374908 "></polygon>
    </mask>
    <g id="g--pentagon">
      <polygon id="poly--pentagon" points="145.5 1 290.536119 106.374908 235.137251 276.875092 55.862749 276.875092 0.463881265 106.374908 "></polygon>
    </g>
    <g id="g--pentagon-skin">
      <g id="g--pentagon-pathes" transform="translate(-11, -4)">
        <path id="Path-1" d="M120.531158,27.6534578 L119.438553,28.4876333 L120.174448,29.6487079 L141.508432,63.3088642 L142.43453,64.7700346 L143.749774,63.6462875 L187.722431,26.075975 L189.158765,24.8487684 L187.637911,23.7280115 L157.012911,1.15965214 L156.10712,0.492151437 L155.212799,1.17494216 L120.531158,27.6534578 Z M155.233183,3.57472286 L185.858183,26.1430822 L185.773663,23.7951187 L141.801007,61.3654312 L144.042349,61.7028546 L122.708365,28.0426983 L122.351654,30.0379485 L157.033295,3.55943284 L155.233183,3.57472286 Z"></path>
        <path id="Path-2" d="M55.5039923,76.1802942 L54.9297803,76.5695725 L54.8545494,77.2592082 L50.9932213,112.655693 L50.8725647,113.761741 L51.8960134,114.198153 L92.6108571,131.559481 L93.5617269,131.964944 L94.2791459,131.220724 L113.466646,111.316427 L113.781754,110.989547 L113.862692,110.54279 L120.243552,75.3220865 L120.437693,74.2504781 L119.478868,73.7340565 L86.6390246,56.0465565 L85.8385673,55.6154312...

SCSS

// not sure how to resize yet... this math confuses me.
$sides-num: 12;
$sides: #{$sides-num}n;
$side-size: 150px;
$height: $side-size * 1;
$translate: $side-size*.69;

$circle-max: 5;
$angleY: 360/$circle-max;
$angleX: 26.5;

$magic-number: 3px;

@mixin sizes {
  width: $side-size;
  height: $height;
}


@mixin cap ($direct: top){
  $begin: 1;
  $end: $circle-max;
  
  @if ($direct == bottom){
      $begin: $circle-max + 1;
      $end: $circle-max*2;
      }
  
  @for $item from $begin through $end {
    $pos: #{$sides}+#{$item};
    $rotateY: $item * $angleY;
    
    $rotateX: 180 - $angleX;
    
    @if ($direct == bottom){
      $rotateX: -$angleX;
      }
    
    $translateZ: $translate;
    $translateY: $magic-number;
    @if ($direct == bottom){
      $translateY: -$translateY;
      }
    
    &__side:nth-child(#{$pos}) {
      transform: 
        translateY($translateY)
        rotateY(#{$rotateY}deg)
        rotateX(#{$rotateX}deg)
        translateZ($translateZ);
      }
    }
}



HTML, BODY {
  height: 100%;
  }

BODY {
  background: linear-gradient(180deg, rgba(247,243,229,1) 0%, rgba(212,206,186,1) 100%);
  perspective: 1250px;
  perspective-origin: center 0;
  }

.svg--defs {
  position: absolute;
  }
.svg--use {
  width: 100%;
  height: 100%;
  }

#g--pentagon {
  transform-origin: $side-size/2 $height/2.5;
  transform: scale(1);
    fill: url(#gradientFill);
  }
.g--texture {
  //fill: red;
}
.poly--stroke {
    
    stroke: rgba(212, 206, 186,1);
    stroke-width: 3;
    //stroke-dasharray: .65% 6%;
  }
  
.shape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  @include sizes;
  margin: auto;
    
  
  &__container {
    position: relative;
    @include sizes;
    animation: 30s rotate infinite linear;  
    transform-style: preserve-3d;
    }
  
  &__side {
    position: absolute;
    @include sizes;
    }
  
  //@include colorize();
  
  @include cap();
  @include cap(bottom);
  
  &__side:nth-child(#{$sides} + 11) {
...