JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<svg viewBox="0 0 150 150">
  <defs>
    <path id="estrella" vector-effect="non-scaling-stroke"
    d="M 5.6422869,3.6069931 C -5.0125576,-7.0369911 -5.0125576,-7.0369911 -5.0125576,-7.0369911 M 7.5875579,-3.6676829 C -6.9578279,0.23768544 -6.9578279,0.23768544 -6.9578279,0.23768544 M 2.2601348,-8.9896753 C -1.6304057,5.5596793 -1.6304057,5.5596793 -1.6304057,5.5596793" />
  </defs>
  <g transform="translate(35,5)" >
    <g class="topSide">
      <circle cx="0" cy="0" r="2" />
      <rect x="0" y="0" width="2" height="10" />
      <use href="#estrella"
        stroke="red" stroke-width="1.5px"
      class="rot"/>
    </g>
  </g>
  <g transform="translate(85,15)" >
    <g class="">
      <circle cx="0" cy="0" r="2" />
      <rect x="0" y="0" width="2" height="10" />
      <use href="#estrella"
        stroke="red" stroke-width="1.5px"
      class="rot"/>
    </g>
  </g>
  <g transform="translate(20,15)" >
    <g class="leftSide">
      <circle cx="0" cy="0" r="2" />
      <rect x="0" y="0" width="2" height="10" />
      <use href="#estrella"
        stroke="red" stroke-width="1.5px"
      class="rot"/>
    </g>
  </g>
  <g transform="translate(40,15)" >
    <g class="rightSide">
      <circle cx="0" cy="0" r="2" />
      <rect x="0" y="0" width="2" height="10" />
      <use href="#estrella"
        stroke="red" stroke-width="1.5px"
      class="rot"/>
    </g>
  </g>

CSS

@keyframes rotBomba {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.rot {
 transform-box: fill-box;
  transform-origin: center;
  animation-direction: normal;
  animation-duration:6s;
  animation-name: rotBomba;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.leftSide {
    transform:  scale(1,0.86) rotate(30deg) skewX(30deg);
}
.rightSide {
  transform: scale(1,0.86) rotate(-30deg) skewX(-30deg);
}
.topSide {
  transform: scale(1,0.86) rotate(30deg) skewX(-30deg);
}