SVG с заливкой текста

artem 
Код вставляем как php, чтобы не изменялся и не урезался
<svg viewBox="0 0 600 300" >

  <!-- Pattern -->
  <pattern 
           id="p-fire" 
           viewBox="30 100 186 200"
           patternUnits="userSpaceOnUse"
           width="216" height="200"
           x="-70" y="35">
    <image xlink:href="http://artemzeus.ru/sites/default/files/inline-images/fire.gif" width="256" height="300"/>
 </pattern>

  <!-- Text -->
  <text text-anchor="middle"
        x="50%"
        y="50%"
        dy="26pt"
        style="fill: url(#p-fire); stroke: #330000;    stroke-width: 8;    stroke-opacity: .5;    font-size: 160pt;
    font-family: Open Sans, Impact; "
        >
    Text
  </text>

</svg>

Другие примеры и оригинал статьи тут:
http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/

Теги