Simple Svg Text Animation Technique

path { fill:none; stroke:#f00; stroke-width:1; }
.shade { stroke-width:2; fill:#efefef; }
.letter { stroke-width:2; fill:#efefef; }
.bubble { stroke-width:2; fill:#efefef; }

<div class="full-sketch-container">
<svg xmlns="http://www.w3.org/2000/svg" width="703" height="195" viewBox="0 0 703 195">
<path class="bubble" fill-rule="evenodd" clip-rule="evenodd" d="M390.951,0c2,0,3.999,0,5.999,0c9.102,4.218-0.374,16.836-4.999,21.997
c-23.17,25.857-70.77,49.47-87.989,80.99c12.009-4.81,24.488-27.966,44.994-20.998c-1.101,13.564-12.827,16.502-15.998,27.997
c10.959,0.546,17.761-11.51,26.997-15.998c-8.624,9.742-18.809,23.139-36.995,19.997c-2.265-14.116,12.358-19.499,16.997-29.996
c-23.669,3.994-28.95,26.376-51.993,30.996c1.626-9.372,7.301-14.696,11.999-20.997c-1.27-1.846-4.013,3.253-6,4
c1.444-7.317,10.27-10.643,14.998-15.998C333.684,53.99,355.622,18.251,390.951,0z M379.952,8.999
c-21.54,17.829-35.314,43.05-53.993,62.992c-0.39,1.086-1.2,2.4,0,1c12.731-10.043,25.808-20.249,37.995-30.996
C375.841,31.514,391.482,21.386,394.95,3C388.928,2.37,383.741,5.863,379.952,8.999z"/>
<path class="bubble" fill-rule="evenodd" clip-rule="evenodd" d="M258.968,93.988c-2.317-2.25-3.277,5.339-7.999,4
c4.283-5.383,9.29-10.041,14.998-13.999c-0.745-2.255-5.608-0.391-7.999-1c0.048-4.285,6-2.666,9.999-3
c12.331-9,16.524-26.138,34.996-28.997c-6.136,10.862-16.172,17.823-22.997,27.997c2.367,2.3,8.974,0.358,12.998,1
c-1.889,4.109-10.991,1.007-14.998,3c-6.225,7.5-15.816,16.765-14.998,27.997c11.198-2.8,16.839-11.157,24.997-16.998
c-4.673,8.669-22.29,26.768-36.995,18.998C250.717,103.735,254.956,98.976,258.968,93.988z"/>
<path class="bubble" fill-rule="evenodd" clip-rule="evenodd" d="M483.939,53.993c-0.898,5.648-7.28,10.425-11.998,8.999
C469.885,54.39,477.534,50.88,483.939,53.993z"/>
<path class="bubble" fill-rule="evenodd" clip-rule="evenodd" d="M580.928,93.988c0,0.667,0,1.333,0,2c-6.779,3.323-12.28,12.912-21.998,9.999
c-7.638,5.222-19.948,13.506-31.995,7.999c-5.596-12.136,4.349-22.785,12.998-26.996c-3.103-1.323-10.7,0.518-14.998-2
c3.709,19.756-58.459,50.104-43.995,12.999c-0.239-1.535-1.646-0.147-1.999,1c5.468-8.97,20.088-21.25,35.995-19.998
c5.424,0.427,12.537,5.955,19.998,5.999c13.91,0.083,29.566-11.942,35.995-1c0.593,10.258-5.157,14.174-8.999,19.998
C571.757,104.148,573.291,96.018,580.928,93.988z M486.939,112.986c13.558-1.244,32.503-16.038,28.996-30.997
C503.464,85.52,489.906,96.62,486.939,112.986z M533.934,112.986c14.771-1.411,30.247-15.563,30.996-30.997
C550.221,84.058,537.653,96.625,533.934,112.986z"/>
<path class="bubble" fill-rule="evenodd" clip-rule="evenodd" d="M219.973,94.988c-12.805,6.284-20.381,22.823-39.995,18.997
c-2.717-12.944,9.597-18.898,14.998-26.996c-6.611,3.054-9.726,9.605-16.998,11.999c8.972-8.026,14.934-19.063,31.996-18.998
c-5.243,11.088-15.33,17.333-19.998,28.996c22.192-0.807,27.783-26.876,51.994-28.996c-5.133,11.531-16.666,16.663-19.998,29.996
c10.497,0.414,16.807-11.793,25.997-15.998c-8.763,9.271-18.097,23.182-35.995,19.997C208.042,104.866,216.455,99.94,219.973,94.988
z"/>
<path class="bubble" fill-rule="evenodd" clip-rule="evenodd" d="M404.949,94.988c-12.805,6.284-20.381,22.823-39.995,18.997
c-2.717-12.944,9.597-18.898,14.998-26.996c-6.611,3.054-9.726,9.605-16.997,11.999c8.972-8.026,14.934-19.063,31.995-18.998
c-5.242,11.088-15.329,17.333-19.997,28.996c22.192-0.807,27.782-26.876,51.993-28.996c-5.133,11.531-16.665,16.663-19.997,29.996
c10.497,0.414,16.807-11.793,25.997-15.998c-8.764,9.271-18.098,23.182-35.996,19.997C393.019,104.866,401.432,99.94,404.949,94.988
z"/>
<path class="letter" fill-rule="evenodd" clip-rule="evenodd" d="M438.945,117.985c12.4-6.931,23.695-14.967,33.995-23.997
c-6.703,14.116-23.644,17.451-35.995,27.996c-11.546,9.858-20.57,28.206-33.996,41.995c-14.327,14.716-32.277,34.064-56.992,28.996
c-0.494-20.901,18.473-30.476,31.996-39.995c14.131-9.946,32.492-17.521,44.994-27.996c13.081-10.96,16.385-27.66,29.996-37.995
c-5.365,0.647-10.939,9.715-17.998,11.999c8.6-8.398,15.15-18.846,31.996-18.998C458.749,93.794,447.44,104.483,438.945,117.985z
M358.955,171.979c-3.551,4.342-8.604,11.638-5.999,18.998c17.28,0.951,29.693-12.547,38.995-22.998
c10.268-11.535,18.896-25.451,27.996-36.995c0.22-1.257,1.558-2.043-1-2C400.718,143.588,373.836,153.78,358.955,171.979z"/>
<path class="shade" fill-rule="evenodd" clip-rule="evenodd" d="M0,101.987c2.826-10.438,17.563-14.682,19.998-5
c2.25,8.949-7.802,5.655-7.999,15.999c4.609,4.98,15.378,4.816,21.997,3.999c34.739-4.292,68.363-35.035,89.989-54.993
c7.972-7.356,16.155-15.231,20.998-22.997c-24.259-3.293-62.156-4.835-76.99,9.999c-13.669,13.669-4.385,35.09,7.999,37.996
c-13.078-3.084-19.666-10.013-19.998-21.998c-0.62-22.379,22.745-31.853,42.995-32.996c16.508-0.932,36.778,6.773,47.994,5
c5.554-0.878,9.887-9.187,13.999-6c1.507,4.08-7.078,6.79-2,7.999c21.262,3.4,40.642-3.208,48.994-15.998
c-6.1,17.715-22.467,28.545-33.996,41.995c-11.6,13.532-25.495,28.96-27.996,46.995c13.54-1.129,20.056-14.601,28.996-16.998
c0.122,7.079-38.281,31.424-38.995,12.998c-0.846-21.857,32.295-41.236,38.995-56.993c-18.521,15.876-38.674,32.752-55.993,48.994
c-5.728,5.371-11.335,12.289-18.998,13.998c10.173-23.49,28.615-44.041,38.995-63.992c-26.167,23.676-63.237,65.408-107.986,69.992
C14.403,121.685,4.487,118.621,0,107.986C0,105.986,0,103.987,0,101.987z M123.984,89.989c-0.39,1.086-1.2,2.4,0,1
c20.792-17.205,40.839-35.151,62.992-50.994c-8.46,2.128-22.517,3.126-31.996,1C143.862,56.54,135.279,74.62,123.984,89.989z"/>
</svg>
</div>
<input type="button" value="Play Again" onclick="reloadPage()">

<script>
var supportsInlineSvg = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
}());
var supportsInputRange = (function() {
var input = document.createElement('input');
input.setAttribute('type', 'range');
return input.type != 'text';
}());
document.documentElement.className += (supportsInlineSvg ? ' inline-svg' :'') + (supportsInputRange ? ' input-range' :'');
</script>
<script>
function reloadPage()
{
window.location.reload();
}
</script>
<script>
(function() {
if (!supportsInlineSvg) return;
function toArray(arr) {
return Array.prototype.slice.call(arr);
}
var svg = document.querySelector('.full-sketch-container svg');
svg.parentNode.style.display = 'block';
svg.style.visibility = 'hidden';
function fullSketch() {
svg.style.visibility = '';
var paths = toArray(svg.querySelectorAll('path:not(.shade)'));
paths.push(svg.querySelector('.shade'));
var begin = 0;
var durations = paths.map(function(path) {
var length = path.getTotalLength();
var className = path.getAttribute('class') || '';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// no classList on svg elements in Safari
if (className.indexOf('shade') != -1) {
return 5;
}
else if (className.indexOf('letter') != -1) {
return Math.pow(length, 0.5) * 0.02;
}
else {
return Math.pow(length, 0.5) * 0.03;
}
});
paths[0].getBoundingClientRect();
paths.forEach(function(path, i) {
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + durations[i] + 's ' + begin + 's ease-in-out';
path.style.strokeDashoffset = '0';
begin += durations[i] + 0.001;
});
}
window.addEventListener('load', fullSketch);
}());
</script>

Tagged in:

• SVG text animtion
• text animation svg
• SVG Animation
• svg path animation