text gradient svg and js version

by tomik23

HTML

<svg id="test">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="#30CFD0"></stop>
      <stop offset="100%" stop-color="#330867"></stop>
    </linearGradient>
  </defs>
  <text id="text" x="0" y="0" fill="url(#gradient)">Hello</text>
</svg>

CSS

svg {
  font-size: 20vw;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid blue;
}

JavaScript

function getStyles() {
  var svg = document.getElementById('test');
  var text = document.getElementById('text');
  var box = text.getBBox();

  svg.setAttribute('width', box.width);
  svg.setAttribute('height', box.height);
  svg.setAttribute('viewBox', box.x + ' ' + box.y + ' ' + box.width + ' ' + box.height);
}

window.addEventListener('resize', getStyles);
document.addEventListener('DOMContentLoaded', getStyles());