JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<svg id="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
   <defs>
     <pattern xmlns="http://www.w3.org/2000/svg" id="imgTest" patternUnits="userSpaceOnUse" width="800" height="800">
       <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://i.imgur.com/XAiiY3y.jpg" x="0" y="0" width="800" height="800"/>
     </pattern>
  </defs>
  <path d="M160.199,693.384c0,0-359.163-359.763,0-718.926s718.926,0,718.926,0L160.199,693.384z M807.662,120.995c0,0,359.163,359.763,0,718.926s-718.926,0-718.926,0L807.662,120.995z" fill="url(#imgTest)"/>
</svg>

CSS

html,body{
  position: relative;
  min-height: 100%;
}

body{
  background-color: #3f506b;
  background: rgb(49,70,102);
  background: -moz-linear-gradient(left,  rgba(49,70,102,1) 0%, rgba(93,110,135,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(49,70,102,1) 0%,rgba(93,110,135,1) 100%);
  background: linear-gradient(to right,  rgba(49,70,102,1) 0%,rgba(93,110,135,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#314666', endColorstr='#5d6e87',GradientType=1 );
  margin: 0;
}

body:before{
  content: '';
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(https://i.imgur.com/XAiiY3y.jpg);
  background-position: center center;
  background-size: cover;
  opacity: 0.1;
}

#logo{
  height: auto;
  width: 100vh;
  position: fixed;
  left: 50%;
  //top: 50%;
  //transform: translateY(-50%);
  bottom: 0;
}

JavaScript

/**
 * Superhero SVG Test
 */

(function(){
  var _logo = document.getElementById('logo');
  var logoSize = function(){
    _logo.style.width = Math.max((window.innerWidth / 2), window.innerHeight);
  }
  logoSize();
  window.addEventListener('resize', logoSize);
})();