SVG Gradient Text

index.html

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg-min.js"></script>
  <textarea cols="30" rows="5"></textarea>
  <div id="wrapper" width="80%" height="800px">
      <svg id="gradientText" width="100%" height="800px" viewBox="0 10 1200 100">
        <defs>
          <lineargradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="80%">
            <stop stop-color="#929395" offset="60%" />
            <stop stop-color="#7AB51D" offset="100%" />
          </lineargradient>
        </defs>
    
        <text x="0" y="80" font-family="Verdana, sans-serif" font-size="50px" line-height="30px" letter-spacing="2" font-weight="bold" fill="url(#textgradient)" stroke="none">
            Good day!
        </text>
      </svg>
  </div>

script.js

jQuery.extend({
    attributes : function(el) {
        var myObject = {};
        for (var attr, i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {
            attr = attrs.item(i);
            myObject[attr.nodeName] = attr.nodeValue;
        }
        return myObject;
    }
});

var paper, txt, textAttributes;
$(document).ready(function() {
    $('#gradientText').css({position:'relative',width: '100%', height:'100%'});
    $('#gradientText').attr('viewBox','0 19 1410 2830');
    //$('#gradientText').css('position','relative');
    function init() {
        // reset svg text
        $('#gradientText text, tspan').remove();
        paper = Snap("#gradientText");
    }
    
    textAttributes = $.attributes($('text')[0]);
    

    $('textarea').val(jQuery.trim($('text').text())).keyup(function() {

        //console.clear();
        init();

        var mytext = String(encodeURI($(this).val().toString())).split(/%0A|%0D/gi);
        console.dir(mytext);
        var i = 0;
        $(mytext).each(function(index) {
            mytext[i] = decodeURI(this.toString());
            if(!mytext[i].length)
                mytext[i]=' ';
            i++;
        });
        
        
        txt = paper.text(200, 200, mytext);

        $('text').attr(textAttributes);

        i=0;
        
        $('#gradientText text tspan').each(function() {
            var attr = {x:0,y:'50x', dx:0, dy:(i === 0 ? '0px':'50px')};
            $(this).attr(attr);
            i++;
        });
    });
});

SVG-Gradient-Text.markdown

SVG Gradient Text

A Pen by Raphael on CodePen.

License.