CODEWITHSUNDEEP
animationsvg
user3821345
user3821345

Reputation: 648

SVG text animate font styles

I want to make an animation that looks like a google search box

I have a text path where the word appears in a 'bold' font.

I would like the word to animate so that the first letter appears 'regular', then the first and second, then the first second and third etc.

Is this possible to do with an svg animation?

 <svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

  <path id="path1">
    <animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" />
  </path>

// this text "types"

  <text font-size="90" font-family="Montserrat" fill='black'>
    <textPath xlink:href="#path1">Google is</textPath>
  </text>

// I want this text to animate the "font-style"

  <text font-size="90" font-family="Montserrat" fill='black' x="100" y="200">
    Google is gold
    <animate attributeType="CSS" ....  />
  </text>

Upvotes: 1

Views: 1415

Answers (1)

Robert Longson
Robert Longson

Reputation: 124109

You'd need to put the letters in separate tags within the textPath so you can target them individually with animations.

I've just done the first letter but you could extend this to all the letters if you wished.

 <svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

  <path id="path1">
    <animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" />
  </path>

// this text "types"

  <text font-size="90" font-family="Montserrat" fill='black'>
    <textPath xlink:href="#path1">Google is</textPath>
  </text>

// I want this text to animate the "font-style"

  <text font-size="90" font-family="Montserrat" fill='black' x="100" y="200">
    <tspan>G<animate attributeType="CSS" attributeName="font-weight" from="700" to="100" dur="1s" begin="0s" repeatCount="indefinite"/></tspan>oogle is gold
    
  </text>

Upvotes: 4

Related Questions