JSFiddle - React, Tailwind, and code Playground

by wbhood24

HTML

<body class="home">
  <svg preserveAspectRatio="xMidYMid slice">
    <svg version="1.1" id="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="100%" height="100%"  xml:space="preserve">

    <mask id="mask" maskUnits="userSpaceOnUse">
      <rect x="0" y="0" width="100%" height="100%"/>
      <svg version="1.1" baseProfile="tiny" class="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px" y="0px" viewBox="0 0 241.5 242" xml:space="preserve">
      <g class ="first-ring-path">
        <g>
          <g>
            <path  d="M118.4,237.5c-8.5,0-16.9-0.9-25.1-2.7c-2.8-0.6-4.6-3.4-3.9-6.2c0.6-2.8,3.4-4.5,6.2-3.9
              c7.5,1.6,15.2,2.5,22.9,2.5c20.7,0,40.7-6,58-17.3c2.4-1.6,5.6-0.9,7.2,1.5c1.6,2.4,0.9,5.6-1.5,7.2
              C163.1,230.9,141.1,237.5,118.4,237.5z"/>
          </g>
          <g>
            <path   d="M192.5,209.2c-1.4,0-2.8-0.6-3.9-1.7c-1.9-2.1-1.7-5.4,0.4-7.3c3.9-3.5,7.5-7.3,10.9-11.3
              c1.8-2.2,5.1-2.5,7.3-0.7s2.5,5.1,0.7,7.3c-3.6,4.4-7.7,8.6-11.9,12.4C195,208.7,193.7,209.2,192.5,209.2z"/>
          </g>
          <g>
            <path  d="M214.6,181.9c-0.9,0-1.8-0.2-2.6-0.7c-2.5-1.4-3.3-4.6-1.9-7.1c9.3-16,14.1-34.3,14.1-52.9
              c0-4.9-0.3-9.8-1-14.5c-0.4-2.8,1.6-5.4,4.4-5.8c2.8-0.4,5.4,1.6,5.8,4.4c0.7,5.2,1.1,10.6,1.1,15.9c0,20.4-5.4,40.5-15.5,58.1
              C218.1,181,216.4,181.9,214.6,181.9z"/>
          </g>
          <g>
            <path  d="M224.7,94.1c-2.2,0-4.3-1.4-4.9-3.7c-2.3-7.7-5.6-15.1-9.6-22.1c-1.4-2.5-0.6-5.6,1.9-7.1
              c2.5-1.4,5.6-0.6,7.1,1.9c4.4,7.7,8,15.8,10.5,24.2c0.8,2.7-0.7,5.6-3.4,6.4C225.7,94,225.2,94.1,224.7,94.1z"/>
          </g>
          <g>
            <path  d="M206.4,58.7c-1.5,0-3.1-0.7-4.1-2c-10.9-14.2-25.3-25.4-41.7-32.5c-2.6-1.1-3.8-4.2-2.7-6.8
             ...

CSS

body {
  background-color: red;
}
.home {
  background-image: url('../images/ontocore_home_background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.home-overlay {
  height: 4000;
  background-image: url('../images/ontocore_home_overlay.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

svg  {
    width: 100%;
    height: 100%;
    overflow:hidden;
}

svg mask rect {
    fill: rgba(255, 255, 255, 0.6);
}
svg > rect {
    fill: white;
    // -webkit-mask: url(#mask);
    // -moz-mask: url(#mask);
    // mask: url(#mask);
}
.first-ring-path{
  -moz-animation:spin 20s infinite linear;
	-webkit-animation:spin 20s infinite linear;
	animation:spin 20s infinite linear;
}


@-moz-keyframes spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(-360deg); }
}