JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svg-container" class="svg-container">
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900" version="1.1">
 <g id="g4" fill="none" transform="matrix(1.7656463,0,0,1.7656463,324.90716,255.00942)">
  <g id="g6" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path8" d="m-122.3,84.285s0.1,1.894-0.73,1.875c-0.82-0.019-17.27-48.094-37.8-45.851,0,0,17.78-7.353,38.53,43.976z"/>
  </g>
  <g id="g10" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path12" d="m-118.77,81.262s-0.55,1.816-1.32,1.517c-0.77-0.298,0.11-51.104-19.95-55.978,0,0,19.22-0.864,21.27,54.461z"/>
  </g>
  <g id="g14" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path16" d="m-91.284,123.59s1.636,0.96,1.166,1.64c-0.471,0.67-49.642-12.13-59.102,6.23,0,0,3.68-18.89,57.936-7.87z"/>
  </g>
  <g id="g18" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path20" d="m-94.093,133.8s1.856,0.4,1.622,1.19c-0.233,0.79-50.939,4.13-54.129,24.53,0,0-2.46-19.08,52.507-25.72z"/>
  </g>
  <g id="g22" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path24" d="m-98.304,128.28s1.778,0.66,1.432,1.41-50.998-3.34-57.128,16.37c0,0,0.35-19.24,55.696-17.78z"/>
  </g>
  <g id="g26" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path28" d="m-109.01,110.07s1.31,1.38,0.67,1.9-44.38-25.336-58.53-10.29c0,0,8.74-17.147,57.86,8.39z"/>
  </g>
  <g id="g30" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path32" d="m-116.55,114.26s1.45,1.22,0.88,1.81c-0.58,0.59-46.97-20.148-59.32-3.6,0,0,6.74-18.023,58.44,1.79z"/>
  </g>
  <g id="g34" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path36" d="m-119.15,118.34s1.6,1,1.11,1.67c-0.49,0.66-49.27-13.56-59.25,4.51,0,0,4.22-18.77,58.14-6.18z"/>
  </g>
  <g id="g38" stroke-width="0.17200001" stroke="#000" fill="#FFF">
   <path id="path40"...

CSS

.svg-container {
  transform-origin:top left;
  transform: translate3d(0,0,0) perspective(0);
  width: 50px;
  height: 50px;
}

#svg2 {
  width: 100%;
  height: 100%;
}

JavaScript

var zoomDirection = 1;
var maxZoom = 20;
var minZoom = 1;
var zoom = 1;
var zoomStep = 0.2;

var svgContainer = document.getElementById('svg-container');

function animateScale() {
  var nextStep = zoomStep * zoomDirection;
  
  zoom += nextStep;
  
  svgContainer.style.transform = 'scale3d(' + zoom + ', ' + zoom + ', 1)';
  
  if( zoom > maxZoom || zoom < minZoom) {
    zoomDirection *= -1;
  }
  
  requestAnimationFrame(animateScale);
}

animateScale();