[Challenge Accepted] [SVG/Canvas] Como faz?

[danilowoz]

Galera, estou com um desafio insano: como posso fazer o texto ir percorrendo de forma animada o path do SVG ou em Canvas infinitamente?

Foi até aonde eu consegui chegar, porém ele não percorre infinatemente, o fim do texto sempre aparece

<svg x="0px" y="0px" width="301px" height="450.1px" viewBox="0 0 301 450.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="raios"d="M35.5,454.6l28.9-211.9H0.5V0.5l182,0.3l-17.6,133.6h102.6L44.1,442.8"/>
  </defs>

  <use xlink:href="#raios" fill="none" />

  <text font-size="14">
    <textPath xlink:href="#raios">
				Loremt ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
    	<animate attributeName="startOffset" from="0" to="100%" dur="10s" repeatCount="indefinite"/>
    </textPath>
  </text>
</svg>

[danilowoz]

@willianjusten mestre SVG, é possível? 😄

[rubenmarcus]

@danilowoz não sei se estou ajudando mas aqui tem um exemplo parecido, não sei se daria uma luz pra alguma idéia https://codepen.io/designhooks/pen/bNMbrr

[willianjusten]

Eita que só li isso agora =o

Então, o que você quer é uma parada bem complicadinha de fazer. Porque você quer 2 efeitos e em conjunto. Um deles é o textPath para ele possuir a forma do path passado e o motionPath que é mover o texto ao decorrer desse path.

Em SVG, o máximo que dá para chegar (até onde eu sei) é usando o SMIL para fazer exatamente o que você fez...Mesmo usando o indefinite ele estará indo de 0% para 100% =/

Eu pensei em utilizar o motion-path do css, tipo isso. Mas por ser um texto, cai no problema dele precisar ter a forma que você quer, senão ficaria um texto bizarrão só seguindo o caminho, que não é o desejado...

O exemplo que o @rubenmarcus passou acima não serve, pois é trabalhando com stroke-dashoffset, que é super comum para criar aqueles efeitos de "desenhar", mas não rola para o texto passeando como você quer...=/

Vou tentar esboçar alguma ideia, a maior dificuldade está sendo realmente para unir os 2 efeitos. Se fosse um texto num círculo era fácil =p

[danilowoz]

@willianjusten massa!
Então fiz alguns testes assim:

<animate attributeName="startOffset" from="-100%" to="0%" dur="30s" repeatCount="indefinite"/>

O from vindo de -100e vai para 0 e deixei um texto gigante dentro do <textPath/>, assim da a impressão que esta infinito. Porém, por exemplo em um círculo ficaria estranho.

See: https://codepen.io/danilowzn/pen/qXmXrw

[Sophmrs]

Repetir o path duas vezes e animar até 50% parece funcionar bem.

https://codepen.io/theomg/pen/rzYWbQ

[willianjusten]

Ah essas soluções de contorno xD
Pow @theomg , o seu exemplo eu tive a sensação que "quebra" nas curvas, aí me pareceu meio estranho....

[Sophmrs]

@willianjusten Você diz lá embaixo aonde o ângulo é mais agudo?
Talvez arredondar as pontas fique mais bacana, mas a quebra do texto é igual aos demais.

Edit: Atualizei o pen https://codepen.io/theomg/pen/rzYWbQ com curvas e ele realmente quebra bem mais suave. Dar mais abertura para os ângulos internos também pode evitar mais a sobreposição dos caracteres.

[danilowoz]

@theomg me pareceu muito bom!

[willianjusten]

Ficou incrível hein @theomg 👏