Creative Letters Demo

Creative Letters Demo

by Luis Manuel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/segment-js/1.0.8/segment.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.6.min.js"></script>
<div class="text">Coming Soon</div>

CSS

body{
  text-align: center;
}

JavaScript

/**
 * letters - An experimental plugin for animating SVG letters using Segment.
 * @version v0.0.2
 * @link https://github.com/lmgonzalves/letters
 * @license MIT
 */
function Letters(e,i){this.el=e,this.text=e.innerHTML.toLowerCase(),e.innerHTML='<span style="position: absolute; visibility: hidden;">'+this.text+"</span>",this.init(i)}Letters.prototype={init:function(e){this.size=e&&e.hasOwnProperty("size")?e.size:100,this.weight=e&&e.hasOwnProperty("weight")?e.weight:1,this.rounded=e&&e.hasOwnProperty("rounded")?e.rounded:!1,this.color=e&&e.hasOwnProperty("color")?e.color:"#5F6062",this.duration=e&&e.hasOwnProperty("duration")?e.duration:1,this.delay=e&&e.hasOwnProperty("delay")?e.delay:[0,.05],this.fade=e&&e.hasOwnProperty("fade")?e.fade:.5,this.easing=e&&e.hasOwnProperty("easing")?e.easing:d3_ease.easeCubicInOut.ease,this.individualDelays=e&&e.hasOwnProperty("individualDelays")?e.individualDelays:!1,this.visible=!1,this._svgNS="http://www.w3.org/2000/svg",this.svgs=[],this.timer=[],this.segments=[],this.drawText()},drawText:function(){this.letters=this.text.replace(/[^a-z ]/g,"").split("");var e=this,i="number"==typeof e.size?e.size:e.size[0],n="number"==typeof e.weight?e.weight:e.weight[0],t="boolean"==typeof e.rounded?e.rounded:e.rounded[0],a="string"==typeof e.color?e.color:e.color[0],s="number"==typeof e.fade?e.fade:e.fade[0];e.renderAlphabet="number"==typeof e.weight&&"boolean"==typeof e.rounded?e.initAlphabet(n,t)&&!1:!0;var d=0;this.letters.forEach(function(g,l){i="number"==typeof e.size[l]?e.size[l]:i,n="number"==typeof e.weight[l]?e.weight[l]:n,t="boolean"==typeof e.rounded[l]?e.rounded[l]:t,a="string"!=typeof e.color&&"string"==typeof e.color[l]?e.color[l]:a,s="number"==typeof e.fade[l]?e.fade[l]:s,e.renderAlphabet&&e.initAlphabet(n,t)," "===g?(e.drawLetter(g,l,i),d++):e.segments[l-d]=e.drawLetter(g,l-d,i,n,t,a,s)}),this.letters=this.text.replace(/[^a-z]/g,"").split("")},drawLetter:function(e,i,n,t,a,s,d){if(" "!==e){var...