JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="child">
      <svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>
    </svg>
  </div>
</div>

CSS

.container {
  background-color: grey;
  height: 600px;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.child {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  flex: 1 0 auto;
  align-self: center;
  font-size: 5em;
  animation: changesize 3s infinite;
  
}

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

.st0{fill:#00748A;}
.st1{fill:#D3D938;}

@keyframes changesize {
  0% { width: 100%; height: 100%; }
  50% { width: 500%; height: 500%; }
  100% { width: 100%; height: 100%; }
}