JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://phrogz.net/svg/libraries/SVGPanUnscale.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" font-size="36">
  <g transform="matrix(1 0 0 1 0 0)">
    <g transform="translate(100 50)"><text x="0" y="1em">A!</text></g>
    <g transform="translate(200 150)"><text x="0" y="1em">B!</text></g>
    <g transform="translate(150 75)"><text x="0" y="1em">C!</text></g>
  </g>
</svg>

JavaScript

var root = document.querySelector('g'),
    text = document.querySelectorAll('text'),
    xf   = root.transform.baseVal.getItem(0);

setInterval(function(){
    var m = xf.matrix;
    m = m.scale(0.99).translate(10,0).rotate(1);
    xf.setMatrix(m);
    [].forEach.call(text,unscale);
},100);