CODEWITHSUNDEEP
htmlcsssvg
conner.xyz
conner.xyz

Reputation: 7275

Is it possible to distort SVG text dynamically?

Is it possible to distort SVG text dynamically?

For example, could you apply filters with shifting parameters based on some temporal data?

Thanks.

Upvotes: 0

Views: 520

Answers (1)

Robby Cornelissen
Robby Cornelissen

Reputation: 97150

Yes, it's possible:

let step = () => {
  let blur = document.querySelector('svg > #blur > feGaussianBlur');
  let value = parseFloat(blur.getAttribute('stdDeviation'));
  blur.setAttribute('stdDeviation', value * 1.05);
  
  requestAnimationFrame(step);
};

requestAnimationFrame(step);
<svg width="250" height="100"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
  </filter>

  <text x="15" y="50" font-size="35" filter="url(#blur)">Hello world!</text>
</svg>

Probably better to use CSS or SMIL animation though (SMIL snippet provided by @kaiido):

<svg width="250" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0">
      <animate attributeType="XML" attributeName="stdDeviation" from="0" to="5" dur="1s" begin="0s; backward.end + 1s" id="forward" />
      <animate attributeType="XML" attributeName="stdDeviation" from="5" to="0" dur="1s" begin="forward.end" id="backward" />
    </feGaussianBlur>
  </filter>

  <text x="15" y="50" font-size="35" filter="url(#blur)">Hello world!</text>
</svg>

Upvotes: 5

Related Questions