body{--t:.5; --scale:3;}
svg.root{width:1px;height:1px;position:absolute;left:-100em;}
svg{
  width: 100vw;
  height: 100vh;
  background:#e0cae0;
  fill-opacity:0.75;
}

symbol{overflow:visible}

svg use{transform:rotate(0deg); transition:transform calc(var(--t) * 1s);}

svg g.a{transition:transform calc(var(--t) * 1s);}
svg g.a{transform:scale(var(--scale)) rotate(-90deg);
filter:url('#f')
}


._2{--n : 2;}
._3{--n : 3;}
._4{--n : 4;}
._5{--n : 5;}

svg .a g:nth-of-type(1){transform:rotate(calc(-.5 * 180deg / var(--n)));}
svg .a g:nth-of-type(2){transform:rotate(calc( .5 * 180deg / var(--n)));}

svg .a g:nth-of-type(1) use:nth-of-type(2){transform:rotate(calc(-1deg * 180 / var(--n)));}
svg .a g:nth-of-type(1) use:nth-of-type(3){transform:rotate(calc(-2deg * 180 / var(--n)));}
svg .a g:nth-of-type(1) use:nth-of-type(4){transform:rotate(calc(-3deg * 180 / var(--n)));}
svg .a g:nth-of-type(1) use:nth-of-type(5){transform:rotate(calc(-4deg * 180 / var(--n)));}

svg .a g:nth-of-type(2) use:nth-of-type(2){transform:rotate(calc(1deg * 180 / var(--n)));}
svg .a g:nth-of-type(2) use:nth-of-type(3){transform:rotate(calc(2deg * 180 / var(--n)));}
svg .a g:nth-of-type(2) use:nth-of-type(4){transform:rotate(calc(3deg * 180 / var(--n)));}
svg .a g:nth-of-type(2) use:nth-of-type(5){transform:rotate(calc(4deg * 180 / var(--n)));}

#texto1 {
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: rgb(14, 0, 144); /* Color del texto */
}

#texto2 {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: rgba(5, 65, 118, 0.532); /* Color del texto */
}