JSFiddle - React, Tailwind, and code Playground

HTML

<section id="home">
  <svg version="1.1" id="circulo_claro" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 469.3 472.7" enable-background="new 0 0 469.3 472.7" xml:space="preserve">
    <circle fill="none" stroke="#FFE0C3" stroke-width="0.5" stroke-miterlimit="10" cx="449.5" cy="167.5" r="2.2" />
    <circle fill="none" stroke="#FFE0C3" stroke-width="0.5" stroke-miterlimit="10" cx="270.9" cy="12.9" r="2.2" />
    <polyline fill="none" stroke="#FFE0C3" stroke-width="0.5" stroke-miterlimit="10" points="459.5,203.2 457.7,205.8 455.1,204 " />
    <path fill="none" stroke="#FFE0C3" stroke-width="0.5" stroke-miterlimit="10" d="M455.1,278.9c-20.6,102.6-111.3,179.8-219.9,179.8
					c-123.9,0-224.4-100.5-224.4-224.4c0-111.6,81.5-204.2,188.2-221.5c11.8-1.9,23.9-2.9,36.2-2.9c11.4,0,22.7,0.9,33.7,2.5" />
    <path fill="none" stroke="#FFE0C3" stroke-width="0.5" stroke-miterlimit="10" d="M450,169.6c3.5,11.7,6.1,23.8,7.7,36.2" />
  </svg>

  <svg version="1.1" id="circulo_naranja" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 469.3 440.4" enable-background="new 0 0 469.3 440.4" xml:space="preserve">
    <path fill="none" stroke="#FF682C" stroke-width="0.5" stroke-miterlimit="10" d="M96.7,53.9C133.8,23.3,181.4,5,233.2,5
					c22.3,0,43.8,3.4,64,9.7" />
    <path fill="none" stroke="#FF682C" stroke-width="0.5" stroke-miterlimit="10" d="M35.8,305.1c-11.3-26.1-17.5-54.9-17.5-85.1
					c0-51.5,18.1-98.8,48.4-135.9" />
    <path fill="none" stroke="#FF682C" stroke-width="0.5" stroke-miterlimit="10" d="M358.9,394.3c-35.3,25.5-78.8,40.6-125.7,40.6
					c-76.2,0-143.1-39.6-181.3-99.4" />
    <path fill="none" stroke="#FF682C" stroke-width="0.5" stroke-miterlimit="10" d="M439,282c-10.6,35.3-30.1,66.8-55.8,91.9" />
    <path fill="none" stroke="#FF682C" stroke-width="0.5" stroke-miterlimit="10"...

CSS

section#home {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #FFE0C3;
  background-color: #460d00;
}

section#home #titulos {
  position: absolute;
  width: 100%;
  height: 130px;
  padding-left: 40px;
  bottom: 240px;
}

section#home #titulos::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 100%;
  background-color: #2b0800;
  transform: translate(-86%, -50%);
  -webkit-transform: translate(-86%, -50%);
  -ms-transform: translate(-86%, -50%);
}

section#home #circulo_claro {
  position: absolute;
  height: 405px;
  left: 0;
  bottom: 0;
  transform: translate(-43%, 45%) rotate(0deg);
  -webkit-transform: translate(0);
  -ms-transform: translate(-43%, 45%) rotate(0deg);
  animation: circulo_claro 30s infinite;
  -webkit-animation: circulo_claro 30s infinite;
  -ms-animation: circulo_claro 30s infinite;
}

section#home #circulo_naranja {
  position: fixed;
  height: 375px;
  left: 0;
  bottom: 0;
  overflow: hidden;
  transform: translate(-43%, 45%) rotate(360deg);
  -webkit-transform: translate(-43%, 45%) rotate(360deg);
  -ms-transform: translate(-43%, 45%) rotate(360deg);
  animation: circulo_naranja 80s infinite;
  -webkit-animation: circulo_naranja 80s infinite;
  -ms-animation: circulo_naranja 80s infinite;
}

@keyframes circulo_claro {
  50% {
    transform: translate(-43%, 45%) rotate(8deg);
    -webkit-transform: translate(-43%, 45%) rotate(8deg);
    -ms-transform: translate(-43%, 45%) rotate(8deg);
    -o-transform: translate(-43%, 45%) rotate(8deg);
  }
  ,
  100% {
    transform: translate(-43%, 45%) rotate(0deg);
    -webkit-transform: translate(-43%, 45%) rotate(0deg);
    -ms-transform: translate(-43%, 45%) rotate(0deg);
    -o-transform: translate(-43%, 45%) rotate(0deg);
  }
}

@keyframes circulo_naranja {
  to {
    transform: translate(-43%, 45%) rotate(0deg);
    -webkit-transform: translate(-43%, 45%) rotate(0deg);
    -ms-transform:...