JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="container-1">
    <svg viewBox="-100 -100 200 200">
        <circle cx="0" cy="0" r="50"></circle>
    </svg>
</div>

<button id="toggle">Toggle Size</button>

CSS

* {
    transition: all 250ms ease;
}

html, body {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}

div {
    padding: 0;
    margin: 0;
    border: 0;
}

#toggle {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}
#container {
    position: absolute;
    margin: auto;
    z-index: 1;
}

.container-1 {
    width: 100%;
    height: 100%; 
    /* Un-even width/height? No problem, preserveAspectRatio has your back */
}

.container-2 {
    width: 50%;
    height: 50%;
}

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

JavaScript

var currentState = false;
document.getElementById('toggle').onclick = function () {
    var container = document.getElementById('container')
    if (currentState)
        container.setAttribute('class', 'container-1');
    else
        container.setAttribute('class', 'container-2');
    
    currentState = !currentState;
}