JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<!--
Compare the zoom in Firefox & Chrome. Ffx keeps the vector data intact and repaints at multiple cycles while scaling, keeping image integrity but with awful performance. Chrome converts the data to a bitmap and scales that before repainting the SVG at the end; the image quality is poorer, but performance much better.
-->
<img src="//openclipart.org/people/sirgazil/nino.svg">
<button>zoom</button>

CSS

body { overflow: hidden; }
img {
    display: block;
    height: auto;
    max-width: 500px;
    -webkit-transform-origin: 25% 50%;
    -webkit-transition: -webkit-transform 2s;
    transform-origin: 25% 50%;
    transition: transform 2s;
    width: 100%;
}
.zoom {
    -webkit-transform: scale(10);
    transform: scale(10);
}

JavaScript

var img = document.querySelector('img'),
    btn = document.querySelector('button');
function imgZoom() {
     img.classList.toggle('zoom');
}
btn.addEventListener('click', imgZoom);
img.addEventListener('click', imgZoom);