diff --git a/dist/leon.js b/dist/leon.js
new file mode 100644
index 0000000..2d1c57b
--- /dev/null
+++ b/dist/leon.js
@@ -0,0 +1 @@
+var LeonSans=function(t){var r={};function e(i){if(r[i])return r[i].exports;var n=r[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=r,e.d=function(t,r,i){e.o(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:i})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,r){if(1&r&&(t=e(t)),8&r)return t;if(4&r&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&r&&"string"!=typeof t)for(var n in t)e.d(i,n,function(r){return t[r]}.bind(null,n));return i},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,r){return Object.prototype.hasOwnProperty.call(t,r)},e.p="",e(e.s=0)}([function(t,r,e){var i=e(1).default;t.exports=i},function(t,r,e){"use strict";function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t,r){for(var e=0;e<r.length;e++){var i=r[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}e.r(r);var a=function(){function t(){!function(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}(this,t),this.handlers_={update:{listeners:[]}}}var r,e,a;return r=t,(e=[{key:"on",value:function(t,r){return"function"!=typeof r?(console.error("The listener callback must be a function, the given type is ".concat(i(r))),!1):"string"!=typeof t?(console.error("The event name must be a string, the given type is ".concat(i(t))),!1):(void 0===this.handlers_[t]&&(this.handlers_[t]={listeners:[]}),void this.handlers_[t].listeners.push(r))}},{key:"off",value:function(t,r){if(void 0===this.handlers_[t])return console.error("This event: ".concat(t," does not exist")),!1;this.handlers_[t].listeners=this.handlers_[t].listeners.filter(function(t){return t.toString()!==r.toString()})}},{key:"dispatch",value:function(t,r){this.handlers_[t].listeners.forEach(function(t){t(r)})}}])&&n(r.prototype,e),a&&n(r,a),t}(),l=500,o=1,s=900,f=70,h=80,u=1,y=.78,d=.49,c=120,v=2*Math.PI;function p(t,r){return{x:arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,y:arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,w:t.rect.w*d*r,h:(t.rect.h+220)*d*r}}function x(t,r,e){return{x:t/2,y:(r-130*d*e)/2}}function b(t,r,e){var i=t.ratio.x1,n=t.ratio.x2,a=t.ratio.y1,l=t.ratio.y2;return{r:r,cr:e,fr1:u,fr2:y,gx1:i,gx2:n,gy1:a,gy2:l}}function g(t,r,e,i,n){var a=(i-n)/(r-e)*(t-e)+n;return a<n?a=n:a>i&&(a=i),a}function m(t){var r,e,i,n,a,l,o,s,f,h,u,y=t.typo.p.length,d=[];for(r=0;r<y;r++)for(n=(a=t.typo.p[r]).cv.length,e=0;e<n;e++){if(o=(l=a.cv[e]).addRect(t.rect),s=a.d,h=(f=t.pointsLength.lengths[r])/t.pointsLength.max,u=0,r>0)for(i=0;i<r;i++)u+=t.pointsLength.lengths[i]/t.pointsLength.max;h+=u,d.push({pos:o,drawing:t.drawing,direction:s,lengths:f,maxDrawing:h,minDrawing:u,closePath:l.ratio.c,stroke:function(t,r){var e=g(r.drawing.value,r.maxDrawing,r.minDrawing,1,0);if(e>0&&"a"!=r.pos.type){var i=r.lengths*e;t.setLineDash([r.lengths]),t.lineDashOffset=r.direction*(i+r.lengths),t.stroke()}}})}return d}function _(t,r){var e,i,n=t.length,a=[];for(e=0;e<n;e++)i=t[e].addRect(r.rect),a.push(i);return a}function w(t,r){var e,i,n,a=r.lines.length;for(e=0;e<a;e++)"a"==(n=(i=r.lines[e]).pos).type?(t.beginPath(),t.arc(n.x,n.y,n.radius*i.drawing.value,0,v),t.fill(),t.closePath()):"m"==n.type?(t.beginPath(),t.moveTo(n.x,n.y)):"l"==n.type?t.lineTo(n.x,n.y):"b"==n.type&&t.bezierCurveTo(n.x,n.y,n.x2,n.y2,n.x3,n.y3),i.stroke(t,i)}function P(t,r){t.save(),t.lineWidth=1;var e,i=r.lines.length;for(e=0;e<i;e++)S(t,r.lines[e]);for(t.restore(),t.save(),t.lineWidth=1,i=r.typo.p.length,e=0;e<i;e++)k(t,r.typo.p[e],r);t.restore()}function k(t,r,e){var i,n,a,l=r.v.length;for(i=0;i<l;i++)a=(n=r.cv[i]).addRect(e.rect),"b"==n.type?(t.fillStyle="#ff2a00",t.beginPath(),t.arc(a.x3+(a.x3-a.x2),a.y3+(a.y3-a.y2),1.5,0,v),t.fill(),t.beginPath(),t.arc(a.x2,a.y2,1.5,0,v),t.fill(),t.beginPath(),t.moveTo(a.x2,a.y2),t.lineTo(a.x3,a.y3),t.lineTo(a.x3+(a.x3-a.x2),a.y3+(a.y3-a.y2)),t.stroke(),t.beginPath(),t.fillStyle="#ffffff",t.arc(a.x3,a.y3,2.5,0,v),t.fill(),t.stroke()):(t.beginPath(),t.fillStyle="#ffffff",t.strokeStyle="#ff2a00",t.arc(a.x,a.y,2.5,0,v),t.fill(),t.stroke())}function S(t,r){var e=r.pos;"a"!=e.type&&("m"==e.type?(t.strokeStyle="#ff2a00",t.beginPath(),t.moveTo(e.x,e.y)):"l"==e.type?t.lineTo(e.x,e.y):"b"==e.type&&t.bezierCurveTo(e.x,e.y,e.x2,e.y2,e.x3,e.y3),t.stroke())}function W(t,r){t.save(),t.beginPath(),t.lineWidth=1,t.strokeStyle="#aaaaaa";var e,i,n=r.guide.length;for(e=0;e<n;e++)i=r.rect.y+r.grid[e],t.moveTo(r.rect.x,i),t.lineTo(r.rect.x+r.rect.w,i);t.stroke(),t.lineWidth=1,t.beginPath(),t.strokeStyle="#aaaaaa",t.rect(r.rect.x,r.rect.y,r.rect.w,r.rect.h),t.stroke(),t.restore()}var D,T=110,I=Math.cos,O=Math.sin;function R(t,r,e,i,n,a){var l,o,s,f,h,u=r.wavePaths.length,y=function(t,r){return c*t*r}(i,e),d=[];for(t.beginPath(),l=0;l<u;l++){if(o=r.wavePaths[l],a){var p=Math.random()*y-y/2,x=Math.random()*y-y/2;o.rx=o.x+p*I(o.rotation),o.ry=o.y+p*O(o.rotation),o.sx=o.x+p,o.sy=o.y+x}"a"==o.type?d.push(o):1==o.start?t.moveTo(o.x,o.y):o.fix?t.lineTo(o.x,o.y):n<T?(s=r.wavePaths[l-1])&&(f=s.x+.5*(o.x-s.x),h=s.y+.5*(o.y-s.y),t.quadraticCurveTo(f,h,o.rx,o.ry)):t.lineTo(o.rx,o.ry)}for(t.stroke(),l=0;l<d.length;l++)o=d[l],t.beginPath(),t.arc(o.x,o.y,o.radius,0,v),t.fill()}function F(t,r,e,i){var n,a,l=Math.round(r.paths.length*r.drawing.value),o=e/2,s=e/3,f=i/2;for(n=0;n<l;n++)1==(a=r.paths[n]).num?t.fillStyle="#ff00c5":t.fillStyle="#ff95f8","a"==a.type?(t.beginPath(),t.arc(a.x,a.y,s,0,v),t.fill()):(t.beginPath(),t.save(),t.translate(a.x,a.y),t.rotate(a.rotation),t.fillRect(-o,-f,e,i),t.restore())}function M(t,r,e,i){var n=i.length,a=(r+n*(Math.abs(r/10|0)+1))%n;if(Array.isArray(i[a])){var l,o=1/((n=i[a].length)+1),s=t.createLinearGradient(e.rect.x,e.rect.y,e.rect.x,e.rect.y+e.rect.h);for(s.addColorStop(o,i[a][0]),l=0;l<n;l++)s.addColorStop(o*(l+1),i[a][l]);s.addColorStop(o*(n+1),i[a][n-1]),t.strokeStyle=s,t.fillStyle=s}else t.strokeStyle=i[a],t.fillStyle=i[a]}function j(t,r){var e,i,n=t.typo.p.length,a=[],l=[],o=0;for(i=0;i<n;i++)o+=(e=G(t,t.typo.p[i].v,r)).l,a.push(e.v),l.push(e.l);return{max:o,lines:a,lengths:l}}function G(t,r,e){var i,n,a,l,o,s,f=r.length,h=[],u=0;for(i=0;i<f;i++)a={},o=(n=r[i]).convert(t,e),0==i||"a"==n.type?(a.x1=o.x,a.y1=o.y,a.distance=0,a.radius=o.radius):(l=s.convert(t,e),"b"==s.type?(a.x1=l.x3,a.y1=l.y3):(a.x1=l.x,a.y1=l.y),a.x2=o.x,a.y2=o.y,"b"==n.type?(a.x3=o.x2,a.y3=o.y2,a.x4=o.x3,a.y4=o.y3,a.distance=C(a.x1,a.y1,a.x2,a.y2,a.x3,a.y3,a.x4,a.y4)):a.distance=z(a.x1,a.y1,a.x2,a.y2)),a.type=n.type,a.rotation=n.ratio.r,a.pat=n.ratio.p,a.fix=n.ratio.f,a.vt=n.ratio.v,h.push(a),u+=a.distance,s=n;return{v:h,l:u}}function C(t,r,e,i,n,a,l,o,s){var f,h,u,y,d=s||40,c=0,v=t,p=r;for(u=1;u<d;u++)f=(y=L(u/d,t,r,e,i,n,a,l,o)).x-v,h=y.y-p,c+=Math.sqrt(f*f+h*h),v=y.x,p=y.y;return f=l-v,h=o-p,c+=Math.sqrt(f*f+h*h)}function L(t,r,e,i,n,a,l,o,s){return r+=(i-r)*t,e+=(n-e)*t,{x:(r+=((i+=(a-i)*t)-r)*t)+((i+=((a+=(o-a)*t)-i)*t)-r)*t,y:(e+=((n+=(l-n)*t)-e)*t)+((n+=((l+=(s-l)*t)-n)*t)-e)*t}}function z(t,r,e,i){var n=e-t,a=i-r;return Math.sqrt(n*n+a*a)}var A,E=-1,q=10;function X(t){var r=function(){++E==A&&(E=0);return D[E]}();t.fillStyle=r,t.strokeStyle=r}function B(t,r,e,i,n,a){var l=e/i,o=g(n.drawing.value,a+l,a,1,0);if(1==r.direction&&(o=g(1-n.drawing.value,a,a+l,1,0)),o>0){var s=e*o;t.setLineDash([e]),t.lineDashOffset=r.direction*(s+e),t.stroke()}return l}function H(t,r,e,i){var n,a;if(1==r.drawing.value)for(n=r.lines.length,a=0;a<n;a++)J(t,r.lines[a],e,i);else for(n=r.drawingPaths.length*r.drawing.value,a=0;a<n;a++)K(t,r.drawingPaths[a],e,i,r.drawing.value)}function J(t,r,e,i){var n=r.pos;"a"==n.type?(t.lineStyle(0,i,0),t.beginFill(i),t.drawCircle(n.x,n.y,n.radius),t.endFill()):"m"==n.type?(t.lineStyle(e,i,1),t.moveTo(n.x,n.y)):"l"==n.type?t.lineTo(n.x,n.y):"b"==n.type&&t.bezierCurveTo(n.x,n.y,n.x2,n.y2,n.x3,n.y3),r.closePath&&t.closePath()}function K(t,r,e,i,n){"a"==r.type?(t.lineStyle(0,i,0),t.beginFill(i),t.drawCircle(r.x,r.y,r.radius*n),t.endFill()):1==r.start?(t.lineStyle(e,i,1),t.moveTo(r.x,r.y)):t.lineTo(r.x,r.y,1)}function N(t,r,e){var i=e.length,n=(t+i*(Math.abs(t/10|0)+1))%i;if(!Array.isArray(e[n]))return e[n]}function Q(t,r){var e,i,n,a=[];for(e=0;e<6;e++)i=10*e+20,n=10*e+90,a[e]={x1:i*d*r,x2:(t.rect.w-2*i)*d*r,y1:n*d*r,y2:(t.rect.h-n)*d*r-10*e*d*r};return a}function U(t,r){var e,i=[],n=[98,340,815];for(e=0;e<3;e++)i[e]=n[e]*d*r;return i}function V(t){Object.assign(this,t)}function Y(t){this.type=t[0],this.x=t[1]||0,this.y=t[2]||0,"b"==this.type?(this.x2=t[3]||0,this.y2=t[4]||0,this.x3=t[5]||0,this.y3=t[6]||0,null==t[7]?this.ratio={x:1,y:1,r:0,p:0,f:0,c:0,v:0}:(this.ratio={},this.ratio.x=null==t[7].x?1:t[7].x,this.ratio.y=null==t[7].y?1:t[7].y,this.ratio.r=t[7].r||0,this.ratio.p=t[7].p||0,this.ratio.f=t[7].f||0,this.ratio.c=t[7].c||0,this.ratio.v=t[7].v||0)):null==t[3]?this.ratio={x:1,y:1,r:0,p:0,f:0,c:0,v:0}:(this.ratio={},this.ratio.x=null==t[3].x?1:t[3].x,this.ratio.y=null==t[3].y?1:t[3].y,this.ratio.r=t[3].r||0,this.ratio.p=t[3].p||0,this.ratio.f=t[3].f||0,this.ratio.c=t[3].c||0,this.ratio.v=t[3].v||0)}function Z(t,r,e,i){var n=r.range.r*e.x,a=(r.range.gx2-r.range.gx1)*n+r.range.gx1,l=(r.range.fr2-r.range.fr1)*n+r.range.fr1;return r.center.x+(t-a)*i.scale*l}function $(t,r,e,i){var n=r.range.r*e.y,a=(r.range.gy2-r.range.gy1)*n+r.range.gy1,l=(r.range.fr2-r.range.fr1)*n+r.range.fr1;return r.center.y+(t-a)*i.scale*l}Object.assign(V.prototype,{addRect:function(t){var r=new V(this);return r.x=this.x+t.x,r.y=this.y+t.y,r.x2=this.x2+t.x,r.y2=this.y2+t.y,r.x3=this.x3+t.x,r.y3=this.y3+t.y,r.rx=this.rx+t.x,r.ry=this.ry+t.y,r.sx=this.sx+t.x,r.sy=this.sy+t.y,r.radius<.5&&(r.radius=.5),r}}),Object.assign(Y.prototype,{convert:function(t,r){var e=Z(this.x,t,this.ratio,r),i=$(this.y,t,this.ratio,r),n=Z(this.x2,t,this.ratio,r),a=$(this.y2,t,this.ratio,r),l=Z(this.x3,t,this.ratio,r),o=$(this.y3,t,this.ratio,r),s=function(t,r,e){var i=0;"a"==t&&(i=r.range.cr*e.scale*e.fontRatio);return i}(this.type,t,r),f=new V(this);return f.x=e,f.y=i,f.x2=n,f.y2=a,f.x3=l,f.y3=o,f.radius=s,f}});var tt=null;function rt(t,r,e,i){var n,a,l,o,s,f=r.pointsLength.lines,h=t.scale,u=f.length,y=[],d=[],c=[];for(n=0;n<u;n++)o=f[n],tt=null,y.push(et(o,e,h));for(u=y.length,n=0;n<u;n++){for(a=(s=y[n]).length,c=[],l=0;l<a;l++)(o=s[l]).rotation!=ft&&(i&&o.pat||c.push(o));1==r.typo.p[n].d&&c.reverse(),c.length>0&&(c[0].start=1,Array.prototype.push.apply(d,c))}return d}function et(t,r,e){var i,n,a,l,o,s,f,h=t.length,u=[],y=1,d=1;for(r>-1&&(d=g(r,1,0,80,10)*e),i=0;i<h;i++)if("a"==(l=t[i]).type)u.push(new V({x:l.x1,y:l.y1,rotation:0,type:"a",pat:l.pat,fix:l.fix,radius:l.radius}));else if(0==l.distance)null!=(f=it(o=new V({x:l.x1,y:l.y1,rotation:l.rotation,type:l.type,pat:l.pat,fix:l.fix}),tt,l,1))&&(y&&(f.type="m",y=0),u.push(f)),tt=new V(o);else for((a=Math.ceil(l.distance/d))<3&&(a=3),l.vt&&(a=2),n=1;n<a;n++)s=n/(a-1),o="b"==l.type?nt(l,s):new V({x:l.x1+(l.x2-l.x1)*s,y:l.y1+(l.y2-l.y1)*s,type:l.type}),0!=l.rotation&&1==s&&(o.rotation=l.rotation),l.pat&&1==s&&(o.pat=l.pat),l.fix&&1==s&&(o.fix=l.fix),a>0&&null!=(f=it(o,tt,l,s))&&(y&&(f.type="m",y=0),u.push(f)),tt=new V(o);return u}function it(t,r,e,i){if(t.type=e.type,t.distance=e.distance,t.num=i,r&&null==t.rotation){var n=t.x-r.x,a=t.y-r.y,l=Math.atan2(n,a);t.rotation=-l}else t.rotation=t.rotation;return t.rotation==ft?null:t}function nt(t,r){var e=at(t.x1,t.x2,t.x3,t.x4,r),i=at(t.y1,t.y2,t.y3,t.y4,r),n=lt(t.x1,t.x2,t.x3,t.x4,r),a=lt(t.y1,t.y2,t.y3,t.y4,r);return new V({x:e,y:i,rotation:-Math.atan2(n,a)})}function at(t,r,e,i,n){var a=n*n;return t+(3*-t+n*(3*t-t*n))*n+(3*r+n*(-6*r+3*r*n))*n+(3*e-3*e*n)*a+i*(a*n)}function lt(t,r,e,i,n){return 3*n*n*(3*r-t-3*e+i)+6*n*(t-2*r+e)+3*(-t+r)}var ot=Math.PI/180*180,st=Math.PI/180*90,ft=-100,ht="tofu",ut=824;function yt(t,r,e,i,n,a,l,o){var s,f=[],h=o.length;for(s=0;s<h;s++)f.push({d:o[s].d,v:dt(o[s].v,r,e)});return{rect:{w:t,h:ut,fw:r,fh:e},ratio:{x1:i,x2:n,y1:a,y2:l},p:f}}function dt(t,r,e){var i,n,a=t.length,l=r/2,o=e/2,s=[];for(n=0;n<a;n++)(i=t[n])[1]-=l,i[2]-=o,"b"==i[0]&&(i[3]-=l,i[4]-=o,i[5]-=l,i[6]-=o),s.push(new Y(i));return s}function ct(t,r,e,i){var n=t-e,a=r-i;return-Math.atan2(n,a)}function vt(t,r,e,i,n,a,l,o,s){var f=lt(t,e,n,l,s),h=lt(r,i,a,o,s);return-Math.atan2(f,h)}var pt={A:yt(620,290,352,0,0,0,0,[{d:-1,v:[["m",0,352,{x:.55,y:.3,r:ct(0,352,143.5,0)}],["l",143.5,0,{r:ct(0,352,143.5,0),f:1}],["l",146.5,0,{r:ct(290,352,146.5,0),f:1,v:1}],["l",290,352,{x:.55,y:.3,f:1}]]},{d:-1,v:[["m",47,237,{r:st,p:1}],["l",243,237,{r:st,p:1,f:1}]]}]),B:yt(596,209,352,-10,-10,0,0,[{d:1,v:[["m",0,164,{r:st,p:1}],["l",116,164,{r:st,p:1,f:1}],["b",167.4,164,209,205.6,209,257,{r:ot}],["b",209,308.4,167.4,352,116,352,{r:st}],["l",0,352,{r:ot,f:1}],["l",0,0,{r:ot,f:1}],["l",116,0,{r:st}],["b",161.3,0,198,36.7,198,82,{r:ot}],["b",198,127.3,161.3,164,116,164,{r:st}]]}]),C:yt(700,293.1,360,0,0,0,0,[{d:1,v:[["m",293.1,320.1,{r:vt(293.1,320.1,262.2,345,222.8,360,180,360,0),f:1}],["b",262.2,345,222.8,360,180,360],["b",80.6,360,0,279.4,0,180],["b",0,80.6,80.6,0,180,0],["b",222.8,0,262.2,15,293.1,39.9]]}]),D:yt(721,270,352,-10,-10,0,0,[{d:-1,v:[["m",95,352,{r:st,f:1}],["b",191.6,352,270,271.6,270,175,{r:ot}],["b",270,78.4,191.6,0,95,0,{r:st}],["l",0,0,{r:ot,f:1}],["l",0,352,{r:ot,f:1}],["l",95,352,{r:st,f:1}]]}]),E:yt(520,192,352,-5,-80,0,0,[{d:-1,v:[["m",192,0,{x:0,r:st}],["l",0,0,{r:ot,f:1,x:.5}],["l",0,352,{f:1,x:.5}],["l",192,352,{x:0,r:st,f:1}]]},{d:-1,v:[["m",0,164,{r:st,p:1,x:.5}],["l",180,164,{x:0,r:st,f:1}]]}]),F:yt(510,192,352,-5,-80,0,0,[{d:-1,v:[["m",192,0,{x:0,r:st}],["l",0,0,{r:ot,f:1,x:.5}],["l",0,352,{y:0,f:1,x:.5}]]},{d:-1,v:[["m",0,164,{r:st,p:1,x:.5}],["l",180,164,{x:0,r:st,f:1}]]}]),G:yt(840,352,360,0,0,0,0,[{d:1,v:[["m",202,180,{r:st,f:1}],["l",352,180,{f:1}],["b",352,279.4,279.4,360,180,360,{r:st}],["b",80.6,360,0,279.4,0,180,{r:ot}],["b",0,80.6,80.6,0,180,0,{r:st}],["b",222.8,0,262.1,14.9,293,39.9]]}]),H:yt(684,232,352,0,0,0,0,[{d:-1,v:[["m",0,0,{y:0,r:ot}],["l",0,352,{y:0,r:ot,f:1}]]},{d:-1,v:[["m",232,0,{y:0,r:ot}],["l",232,352,{y:0,r:ot,f:1}]]},{d:-1,v:[["m",0,164,{r:st,p:1}],["l",232,164,{r:st,f:1,p:1}]]}]),I:yt(249,0,352,0,0,0,0,[{d:1,v:[["m",0,352,{y:0,r:ot,f:1}],["l",0,0,{y:0,r:ot}]]}]),J:yt(472,172.5,355.5,10,20,-2,-2,[{d:1,v:[["m",0,311,{r:vt(0,311,16.2,341.6,49.3,356,86,356,0),f:1}],["b",16.2,341.6,49.3,356,86,356,{r:st}],["b",133.5,356,172,317.5,172,270],["l",172.5,0,{y:0,r:ot}]]}]),K:yt(616,232,352,-10,-20,0,0,[{d:-1,v:[["m",0,0,{y:0,r:ot}],["l",0,352,{y:0,r:ot,f:1}]]},{d:-1,v:[["m",212,0,{x:.7,y:.7,r:ct(212,0,0,162.5)}],["l",0,162.5,{r:st,p:1}],["l",0,165.5,{r:st,p:1,v:1}],["l",232,352,{x:.7,y:.7,f:1}]]}]),L:yt(529,192,352,-10,-20,0,0,[{d:-1,v:[["m",0,0,{y:0}],["l",0,352,{f:1}],["l",192,352,{x:0,f:1}]]}]),M:yt(885,330,352,0,0,0,0,[{d:-1,v:[["m",0,352,{y:0,r:ot}],["l",0,0,{r:ot,f:1}],["l",3,0,{r:ot,p:1,f:1,v:1}],["l",163.5,330,{r:ct(163.5,330,163.5,330),f:1}],["l",166.5,330,{r:ct(166.5,330,327,0),f:1,v:1}],["l",327,0,{r:ot,p:1,f:1}],["l",330,0,{r:ot,f:1,v:1}],["l",330,352,{y:0,r:ot,f:1}]]}]),N:yt(721,250,352,0,0,0,0,[{d:-1,v:[["m",0,352,{y:0,r:ot}],["l",0,0,{r:ot,f:1}],["l",3,0,{r:ot,p:1,f:1,v:1}],["l",247,351,{r:ot,p:1,f:1}],["l",250,351,{r:ot,f:1,v:1}],["l",250,0,{y:0,r:ot,f:1}]]}]),O:yt(850,360,360,0,0,0,0,[{d:1,v:[["m",360,180,{r:ot,p:1,f:1}],["b",360,279.4,279.4,360,180,360,{r:st}],["b",80.6,360,0,279.4,0,180,{r:ot}],["b",0,80.6,80.6,0,180,0,{r:st}],["b",279.4,0,360,80.6,360,180,{r:ot,c:1}]]}]),P:yt(568,210,352,-10,-10,-.5,-.5,[{d:1,v:[["m",0,352,{y:0,f:1}],["l",0,0,{f:1}],["l",117,0,{r:st}],["b",168.4,0,210,41.6,210,93,{r:ot}],["b",210,144.4,168.4,186,117,186,{r:st}],["l",0,186,{r:st,p:1}]]}]),Q:yt(850,360,360,0,0,0,0,[{d:-1,v:[["m",360,180,{r:st,p:1,f:1}],["b",360,80.6,279.4,0,180,0,{r:st}],["b",80.6,0,0,80.6,0,180,{r:ot}],["b",0,279.4,80.6,360,180,360,{r:st}],["b",279.4,360,360,279.4,360,180,{r:ot,c:1,f:1}]]},{d:-1,v:[["m",222,222,{x:.5,y:.5,r:ct(222,222,360,360)}],["l",360,360,{x:.5,y:.5,f:1}]]}]),R:yt(634,232,352,-10,-10,-.5,-.5,[{d:-1,v:[["m",0,186,{r:st,p:1}],["l",139,186,{r:st}],["b",190.4,186,232,144.4,232,93,{r:ot}],["b",232,41.6,190.4,0,139,0,{r:st}],["l",0,0,{r:ot,f:1}],["l",0,352,{y:0,f:1}]]},{d:-1,v:[["m",139,186,{p:1,r:ct(139,186,232,352)}],["l",232,352,{x:.5,y:.39,f:1}]]}]),S:yt(560,224,360,0,0,0,0,[{d:1,v:[["m",0,295.4,{r:vt(0,295.4,17.6,332.1,58.3,360,110.3,360,0),f:1}],["b",17.6,332.1,58.3,360,110.3,360],["b",173.9,360,223.8,329.6,224,271],["b",224.2,214.7,180.7,189.6,112.4,173.3],["b",47.3,157.7,10.9,130.6,12,84.4],["b",13.3,29.8,57.3,0,114.8,0],["b",158.4,0,196.5,20.5,212,51.3]]}]),T:yt(568,232,352,0,0,-.5,-.5,[{d:-1,v:[["m",0,0,{x:0,r:st}],["l",232,0,{x:0,r:st,f:1}]]},{d:-1,v:[["m",116,0,{r:ot,p:1}],["l",116,352,{y:0,r:ot,f:1}]]}]),U:yt(712,250,355,0,0,-.5,-.5,[{d:1,v:[["m",250,0,{y:0,r:ot}],["l",250,231,{r:ot}],["b",250,300,194,356,125,356,{r:st}],["b",56,356,0,300,0,231,{r:ot}],["l",0,0,{y:0,r:ot}]]}]),V:yt(650,270,352,0,0,0,0,[{d:-1,v:[["m",0,0,{x:.6,y:.1,r:ct(0,0,133.5,352)}],["l",133.5,352,{r:ct(0,0,133.5,352),f:1}],["l",136.5,352,{r:ct(136.5,352,270,0),f:1,v:1}],["l",270,0,{x:.6,y:.1,f:1}]]}]),W:yt(894,390,352,0,0,0,0,[{d:-1,v:[["m",0,0,{x:.6,y:.05,r:ct(0,0,84.5,352)}],["l",84.5,352,{r:ct(0,0,84.5,352),f:1}],["l",87.5,352,{r:ct(87.5,352,193.5,0),f:1,v:1}],["l",193.5,0,{r:ct(87.5,352,193.5,0),f:1}],["l",196.5,0,{r:ct(196.5,0,302.5,352),f:1,v:1}],["l",302.5,352,{r:ct(196.5,0,302.5,352),f:1}],["l",305.5,352,{r:ct(305.5,352,390,0),f:1,v:1}],["l",390,0,{x:.6,y:.05,f:1}]]}]),X:yt(660,270,352,0,0,0,-7,[{d:-1,v:[["m",10,0,{x:.5,y:.3,r:ct(10,0,270,352)}],["l",270,352,{x:.5,y:.5,f:1}]]},{d:-1,v:[["m",260,0,{x:.5,y:.3,r:ct(260,0,0,352)}],["l",0,352,{x:.5,y:.5,f:1}]]}]),Y:yt(673,270,352,0,0,0,0,[{d:-1,v:[["m",0,0,{x:.6,y:.3,r:ct(0,0,135,186)}],["l",135,186,{r:ot,f:1}],["l",270,0,{x:.6,y:.3,f:1}]]},{d:-1,v:[["m",135,186,{r:ot,p:1}],["l",135,352,{y:0,f:1}]]}]),Z:yt(558,232,352,0,-5,0,0,[{d:-1,v:[["m",8,0,{x:0,r:st}],["l",224,0,{r:st,f:1}],["l",224,3,{r:ot,p:1,v:1}],["l",0,349,{r:ot,p:1}],["l",0,352,{r:st,f:1,v:1}],["l",232,352,{x:0,r:st,f:1}]]}])},xt={a:yt(600,232,232,10,2,-64,-64,[{d:-1,v:[["m",232,8,{y:-3.4,r:ot}],["l",232,116,{r:ft}],["b",232,180.1,180.1,232,116,232,{r:st}],["b",51.9,232,0,180.1,0,116,{r:ot}],["b",0,51.9,51.9,0,116,0,{r:st}],["b",180.1,0,232,51.9,232,116,{r:ot}],["l",232,224,{y:-.1,r:ot,f:1}]]}]),b:yt(600,232,352,-10,-2,0,0,[{d:-1,v:[["m",0,0,{y:0,r:ot}],["l",0,239,{r:ft}],["b",0,303.1,51.9,355,116,355,{r:st}],["b",180.1,355,232,303.1,232,239,{r:ot}],["b",232,174.9,180.1,123,116,123,{r:st}],["b",51.9,123,0,174.9,0,239,{r:ot}],["l",0,352,{y:0,r:ot,f:1}]]}]),c:yt(520,212.1,233.1,2,-10,-64,-64,[{d:1,v:[["m",212.1,182.9,{r:vt(212.1,182.9,191.1,213.2,156.1,233.1,116.5,233.1,0),f:1}],["b",191.1,213.2,156.1,233.1,116.5,233.1,{r:st}],["b",52.4,233.1,.5,181.2,.5,117.1,{r:ot}],["b",.5,53,52.4,1.1,116.5,1.1,{r:st}],["b",156.1,1.1,191.1,21,212.1,51.3]]}]),d:yt(600,232,352,10,2,0,0,[{d:-1,v:[["m",232,0,{y:0}],["l",232,239,{r:ft}],["b",232,303.1,180.1,355,116,355,{r:st}],["b",51.9,355,0,303.1,0,239,{r:ot}],["b",0,174.9,51.9,123,116,123,{r:st}],["b",180.1,123,232,174.9,232,239,{r:ot}],["l",232,352,{y:0,f:1}]]}]),e:yt(570,225.5,233.1,0,0,-64,-64,[{d:1,v:[["m",211.6,182.9,{r:vt(211.6,182.9,191.1,213.2,156.1,233.1,116.5,233.1,0),f:1}],["b",191.1,213.2,156.1,233.1,116.5,233.1,{r:st}],["b",52.4,233.1,.5,181.2,.5,117.1,{r:ot}],["b",.5,53,52.4,1.1,116.5,1.1,{r:st}],["b",176.4,1.1,224.9,47.2,225.5,106.1,{r:ot}],["l",.5,106.1,{r:ot,p:1}]]}]),f:yt(356,232,352,-40,-40,0,0,[{d:-1,v:[["m",166.6,33,{x:.5,r:vt(166.6,33,159.3,13.1,139.2,0,116.9,0,0)}],["b",159.3,13.1,139.2,0,116.9,0,{r:st}],["b",88.2,0,65,23.2,65,51.9,{r:ot}],["l",65,352,{y:0,f:1}]]},{d:-1,v:[["m",0,130,{x:0,r:st}],["l",154,130,{x:0,f:1}]]}]),g:yt(600,232,338,10,2,-117,-117,[{d:-1,v:[["m",232,5,{y:-2.8}],["l",232,116,{r:ft}],["b",232,180.1,180.1,232,116,232,{r:st}],["b",51.9,232,0,180.1,0,116,{r:ot}],["b",0,51.9,51.9,0,116,0,{r:st}],["b",180.1,0,232,51.9,232,116,{r:ot}],["l",232,222],["b",234.5,300.3,180.2,338.5,116,338,{y:.64,r:st}],["b",76.2,337.7,36.6,320.7,15.7,290.1,{y:.64,f:1}]]}]),h:yt(520,182,352,0,0,0,0,[{d:-1,v:[["m",0,0,{y:0,r:ot}],["l",0,352,{y:0,f:1}]]},{d:-1,v:[["m",0,214,{r:ft}],["b",0,163.7,40.7,123,91,123,{r:st}],["b",141.3,123,182,163.7,182,214,{r:ot}],["l",182,352,{y:0,f:1}]]}]),i:yt(200,0,352,0,0,0,0,[{d:1,v:[["a",0,90,{y:-3}]]},{d:1,v:[["m",0,352,{y:0,f:1}],["l",0,130,{y:-3}]]}]),j:yt(220,115.9,352,-60,-60,0,0,[{d:1,v:[["a",0,90,{y:-3}]]},{d:1,v:[["m",-115.9,444,{x:.4,y:.63,r:vt(-115.9,444,12.6-115.9,454.4,29.6-115.9,460.2,-70,461.2,0),f:1}],["b",12.6-115.9,454.4,29.6-115.9,460.2,-70,461.2,{x:.4,y:.63,r:st}],["b",84.5-115.9,463.5,0,435.1,0,396.4,{x:.4,y:.63,r:ot}],["l",0,130,{y:-3}]]}]),k:yt(450,164,352,-10,-10,0,0,[{d:-1,v:[["m",0,0,{y:0,r:ot}],["l",0,352,{y:0,f:1}]]},{d:-1,v:[["m",160,130,{x:.7,y:0,r:ct(164,130,0,234.5),f:1}],["l",0,234.5,{r:st,p:1}],["l",0,237.5,{r:st,p:1,v:1}],["l",164,352,{x:.7,y:.7,f:1}]]}]),l:yt(200,0,352,0,0,0,0,[{d:1,v:[["m",0,352,{y:0,f:1}],["l",0,0,{y:0}]]}]),m:yt(740,300,352,0,0,0,0,[{d:-1,v:[["m",0,130,{y:-3.6}],["l",0,352,{y:0,f:1}]]},{d:-1,v:[["m",0,198,{y:0,r:ot,p:1}],["b",0,156.6,33.6,123,75,123,{r:st}],["b",116.4,123,150,156.6,150,198,{r:ot}],["l",150,352,{y:0,f:1}]]},{d:-1,v:[["m",150,198,{y:0,r:ot,p:1}],["b",150,156.6,183.6,123,225,123,{r:st}],["b",266.4,123,300,156.6,300,198,{r:ot}],["l",300,352,{y:0,f:1}]]}]),n:yt(520,182,352,0,0,0,0,[{d:-1,v:[["m",0,130,{y:-3.3}],["l",0,352,{y:0,f:1}]]},{d:-1,v:[["m",0,214,{y:0,r:ot,p:1}],["b",0,163.7,40.7,123,91,123,{r:st}],["b",141.3,123,182,163.7,182,214,{r:ot}],["l",182,352,{y:0,f:1}]]}]),o:yt(580,232,232,0,0,-64,-64,[{d:1,v:[["m",232,116,{r:ot,p:1,f:1}],["b",232,180.1,180.1,232,116,232,{r:st}],["b",51.9,232,0,180.1,0,116,{r:ot}],["b",0,51.9,51.9,0,116,0,{r:st}],["b",180.1,0,232,51.9,232,116,{r:ot,c:1}]]}]),p:yt(600,232,338,-10,-2,-117,-117,[{d:-1,v:[["m",0,5,{y:-2.8}],["l",0,116,{r:ft}],["b",0,180.1,51.9,232,116,232,{r:st}],["b",180.1,232,232,180.1,232,116,{r:ot}],["b",232,51.9,180.1,0,116,0,{r:st}],["b",51.9,0,0,51.9,0,116,{r:ot}],["l",0,338,{y:0,f:1}]]}]),q:yt(600,232,338,10,2,-117,-117,[{d:-1,v:[["m",232,5,{y:-2.8}],["l",232,116,{r:ft}],["b",232,180.1,180.1,232,116,232,{r:st}],["b",51.9,232,0,180.1,0,116,{r:ot}],["b",0,51.9,51.9,0,116,0,{r:st}],["b",180.1,0,232,51.9,232,116,{r:ot}],["l",232,338,{y:0,f:1}]]}]),r:yt(340,119.2,352,-20,-20,0,0,[{d:-1,v:[["m",0,130,{y:-3.3}],["l",0,352,{y:0,f:1}]]},{d:-1,v:[["m",0,181,{r:ot,p:1}],["b",0,181,41.9,101.2,119.2,128.5,{x:0,y:2,r:vt(119.2,128.5,41.9,101.2,0,181,119.2,128.5,0),f:1}]]}]),s:yt(400,143.808,231.12,0,0,-64,-64,[{d:1,v:[["m",0,295.4*.642,{r:vt(0,295.4*.642,11.2992,332.1*.642,58.3*.642,231.12,70.8126,231.12,0),f:1}],["b",11.2992,332.1*.642,58.3*.642,231.12,70.8126,231.12],["b",173.9*.642,231.12,223.8*.642,329.6*.642,143.808,173.982],["b",143.9364,137.8374,116.0094,121.7232,112.4*.642,173.3*.642],["b",30.3666,101.2434,10.9*.642,130.6*.642,12*.642,54.1848],["b",8.5386,29.8*.642,36.7866,0,73.7016,0],["b",101.6928,0,126.153,13.161,136.104,51.3*.642]]}]),t:yt(356,232,352,-30,-30,0,0,[{d:-1,v:[["m",65,0,{y:0}],["l",65,304.2],["b",65,332.9,88.2,356.1,116.9,356.1,{r:st}],["b",139.2,356.1,159.3,343,166.6,317.1,{x:0,f:1}]]},{d:-1,v:[["m",0,130,{x:0,r:st}],["l",154,130,{x:0,f:1}]]}]),u:yt(520,182,352,0,0,0,0,[{d:-1,v:[["m",0,130,{y:-3}],["l",0,265,{r:ot}],["b",0,315.3,40.7,356,91,356,{r:st}],["b",141.3,356,182,315.3,182,265,{r:ot,p:1,f:1}]]},{d:-1,v:[["m",182,130,{y:-3}],["l",182,352,{y:0,f:1}]]}]),v:yt(500,200,352,0,0,0,0,[{d:-1,v:[["m",0,130,{x:.6,y:-3,r:ct(0,130,98.5,352)}],["l",98.5,352,{r:ct(0,130,98.5,352),f:1}],["l",101.5,352,{r:ct(101.5,352,200,130),f:1,v:1}],["l",200,130,{x:.6,y:-3,f:1}]]}]),w:yt(700,310,352,0,0,0,0,[{d:-1,v:[["m",0,130,{x:.6,y:-3,r:ct(0,130,76.5,352)}],["l",76.5,352,{r:ct(0,130,76.5,352),f:1}],["l",79.5,352,{r:ct(79.5,352,153.5,130),f:1,v:1}],["l",153.5,130,{y:1,r:ct(79.5,352,153.5,130),f:1}],["l",156.5,130,{y:1,r:ct(156.5,130,231.5,352),f:1,v:1}],["l",231.5,352,{r:ct(156.5,130,231.5,352),f:1}],["l",234.5,352,{r:ct(234.5,352,310,130),f:1,v:1}],["l",310,130,{x:.6,y:-3,f:1}]]}]),x:yt(490,210,352,0,0,0,-7,[{d:-1,v:[["m",10,130,{x:.5,y:-1,r:ct(10,130,210,352)}],["l",210,352,{x:.5,y:.5,f:1}]]},{d:-1,v:[["m",200,130,{x:.5,y:-1,r:ct(200,130,0,352)}],["l",0,352,{x:.5,y:.5,f:1}]]}]),y:yt(500,225.5,331.5,10,10,-119,-119,[{d:-1,v:[["m",225.5,0,{y:-3,r:ct(225.5,0,116.3,248.8)}],["l",116.3,248.8,{x:.5,y:.64}],["b",71.8,349.6,0,331.5,0,331.5,{x:.5,y:.64,r:vt(0,331.5,71.8,349.6,116.3,248.8,0,331.5,0),f:1}]]},{d:-1,v:[["m",3.2,0,{y:-3,r:ct(3.2,0,125.7,226.6)}],["l",125.7,226.6,{p:1,f:1}]]}]),z:yt(420,172,352,0,0,0,0,[{d:-1,v:[["m",6,130,{x:-.5,y:1,r:st}],["l",166,130,{x:1.8,y:1,r:st,f:1}],["l",166,133,{x:1.8,y:1,r:ot,p:1,v:1}],["l",0,349,{x:1.7,r:ot,p:1}],["l",0,352,{x:1.7,r:st,f:1,v:1}],["l",172,352,{x:-.4,r:st,f:1}]]}])},bt={0:yt(660,270,360,0,0,0,0,[{d:1,v:[["m",270,180,{r:ot,p:1,f:1}],["b",270,279.4,209.6,360,135,360,{r:st}],["b",60.4,360,0,279.4,0,180,{r:ot}],["b",0,80.6,60.4,0,135,0,{r:st}],["b",209.6,0,270,80.6,270,180,{r:ot,c:1}]]}]),1:yt(380,76,352,15,15,0,0,[{d:-1,v:[["m",0,51,{x:-2,y:2,r:ct(0,51,73,0)}],["l",73,0,{r:ot,p:1}],["l",76,0,{r:ot,f:1,v:1}],["l",76,352,{y:0,f:1}]]}]),2:yt(580,210,356,0,0,2,2,[{d:-1,v:[["m",3.9,68.8,{x:1.2,y:1.2,r:vt(3.9,68.8,16.7,29,54.2,3.1,98.2,.2,0)}],["b",16.7,29,54.2,3.1,98.2,.2],["b",151.8,-3.3,208.5,38.3,198.9,100.1],["b",197.1,111.8,196.4,142.4,101.5,235.2],["b",11.4,323.2,0,353,0,353,{r:ft}],["l",0,353,{r:st,p:1}],["l",0,356,{r:st,f:1,v:1}],["l",210,356,{x:-.5,f:1}]]}]),3:yt(580,222.1,360,0,0,0,0,[{d:-1,v:[["m",10.7,66.3,{r:vt(10.7,66.3,11.2,64.8,11.7,63.3,12.3,61.8,0)}],["b",11.2,64.8,11.7,63.3,12.3,61.8,{r:ft}],["b",25.8,25.9,64.5,0,110.1,0,{r:st}],["b",167,0,213.1,40.3,213.1,90,{r:ot}],["b",213.1,139.7,167,180,110.1,179.9,{r:st,f:1}],["l",100.1,179.9,{x:-5,y:1,r:st,f:1}],["l",110.1,180,{r:st,p:1}],["b",172,180,222.1,220.3,222.1,270,{r:ot}],["b",222.1,319.7,172,360,110.1,360,{r:st}],["b",56.9,360,12.4,330.2,1,290.3,{f:1}]]}]),4:yt(596,236,352,0,0,0,0,[{d:1,v:[["m",175,352,{y:0,f:1}],["l",175,0,{f:1}],["l",172,0,{r:st,p:1,v:1}],["l",0,273,{r:ot,p:1}],["l",0,276,{r:st,f:1,v:1}],["l",236,276,{x:-.5}]]}]),5:yt(596,208.5,356,0,-5,-2,-2,[{d:1,v:[["m",0,295.7,{r:vt(0,295.7,15.3,333.8,52.2,356.2,97.5,356,0),f:1}],["b",15.3,333.8,52.2,356.2,97.5,356,{r:st}],["b",159.1,355.7,206.1,306.9,208.5,240.8,{r:ot}],["b",210.9,173.9,162.7,120.8,97.5,125.6,{r:st}],["b",59.4,128.4,25.5,145.8,5.6,176.4,{f:1}],["l",5.6,176.4,{r:ft}],["l",5.6-3,176.4,{r:ot,p:1,v:1}],["l",11.5,0,{r:st,f:1}],["l",193.5,0,{x:-.5}]]}]),6:yt(596,215.8,360,0,-2,0,0,[{d:1,v:[["m",7.6,272.3,{r:ot,p:1,f:1}],["b",6.4,265.8,5.8,259.1,5.8,252.2,{r:ot}],["b",5.8,192.6,52.8,144.2,110.8,144.2,{r:st}],["b",168.7,144.2,215.8,192.6,215.8,252.2,{r:ot}],["b",215.8,311.9,168.7,360,110.8,360,{r:st}],["b",59.5,360,16.8,322.4,7.6,272.4,{r:ft}],["b",7.6,272.4,-44.1,8.8,122.2,.2],["b",165.5,-2.1,193.8,21,212.1,56.4]]}]),7:yt(540,213,352,0,0,0,0,[{d:-1,v:[["m",0,0,{x:0,r:st}],["l",213,0,{r:st,f:1}],["l",213,.1,{r:ft}],["l",72.7,352,{y:.1,f:1}]]}]),8:yt(596,224,360,0,0,0,0,[{d:1,v:[["m",112,180,{r:ot,p:1,f:1}],["b",50.1,180,0,220.3,0,270,{r:ot}],["b",0,319.7,50.1,360,112,360,{r:st}],["b",173.9,360,224,319.7,224,270,{r:ot}],["b",224,220.3,173.9,180,112,180,{r:st}],["b",55.1,180,9,139.7,9,90,{r:ot}],["b",9,40.3,55.1,0,112,0,{r:st}],["b",168.9,0,215,40.3,215,90,{r:ot}],["b",215,139.7,168.9,180,112,180,{r:ot,p:1,f:1}]]}]),9:yt(596,215.8,360,0,-2,0,0,[{d:-1,v:[["m",208.2,88,{r:ot,p:1,f:1}],["b",209.4,94.5,210,101.2,210,108,{r:ot}],["b",210,167.6,163,216,105,216,{r:st}],["b",47,216,-0,167.6,0,108,{r:ot}],["b",0,48.4,47,-0,105,0,{r:st}],["b",156.3,0,199,37.8,208.2,87.8,{r:ft}],["b",208.2,87.8,259.8,351.4,93.5,360],["b",50.3,362.3,21.9,339.2,3.6,303.8,{f:1}]]}])},gt={" ":yt(336,0,0,0,0,0,0,[{d:1,v:[]}]),tofu:yt(672,232,352,0,0,0,0,[{d:-1,v:[["m",0,0,{r:ot}],["l",232,0,{r:ot,f:1}],["l",232,352,{r:ot,f:1}],["l",0,352,{r:ot,f:1}],["l",0,0,{r:ot,p:1,f:1,c:1}]]},{d:1,v:[["m",0,0,{r:ot,p:1,f:1}],["l",232,352,{r:ft}]]}]),"?":yt(520,190.348,360,0,-5,0,0,[{d:1,v:[["a",91.174,356]]},{d:-1,v:[["m",0,87.8,{r:vt(0,87.8,12,-2.3,99.1,0,0,87.8,0)}],["b",0,87.8,12,-2.3,99.1,0,{r:st}],["b",186.2,2.4,204.5,75.2,180.9,121.4],["b",157.3,167.6,119.7,178.3,97.4,223.2],["b",90.5,237.1,88.1,249.8,88,260.8,{r:ot,f:1}]]}]),"!":yt(465,8,355,0,-5,0,0,[{d:1,v:[["a",4,353.5]]},{d:-1,v:[["m",4,0,{y:0}],["l",4,260.8,{f:1}]]}]),$:yt(568,224,360,0,0,0,0,[{d:-1,v:[["m",212,51.3,{r:vt(0,295.4,17.6,332.1,58.3,360,110.3,360,0),f:1}],["b",196.5,20.5,158.4,0,114.8,0],["b",57.3,0,13.3,29.8,12,84.4],["b",10.9,130.6,47.3,157.7,112.4,173.3],["b",180.7,189.6,224.2,214.7,224,271],["b",223.8,329.6,173.9,360,110.3,360],["b",58.3,360,17.6,332.1,0,295.4,{f:1}]]},{d:-1,v:[["m",112,-30,{y:0}],["l",112,390,{y:0,f:1}]]}]),"@":yt(820,343.425,360,0,0,-30,-30,[{d:-1,v:[["m",251.9,92.9,{r:ct(251.9,92.9,238.5,181.7)}],["l",238.5,181.7,{r:ft}],["b",227.8,236,194.7,267.2,143.7,259.2],["b",99.1,252.2,87.7,208.5,90.1,177.5],["b",92.5,148.4,118.1,91,183.3,99.1],["b",251,107.5,238.5,181.7,238.5,181.7,{r:ft}],["l",232.5,221.5],["b",232.5,221.5,227.2,257.6,256,263.6],["b",284.9,269.7,309,241.3,309,241.3,{r:ft}],["b",309,241.3,343.4,209,343.4,146.7],["b",343.4,84.3,297.4,3.5,178.6,.1],["b",59.7,-3.4,-5.3,105.2,.3,203.4],["b",6.1,303.7,93.2,354.5,175.5,359.5],["b",175.5,359.5,246.5,364.9,302.7,339.8,{f:1}]]}]),"#":yt(760,314,352,0,0,0,0,[{d:-1,v:[["m",117,0,{y:0,r:ct(117,0,47,352)}],["l",47,352,{y:0,f:1}]]},{d:-1,v:[["m",267,0,{y:0,r:ct(267,0,197,352)}],["l",197,352,{y:0,f:1}]]},{d:-1,v:[["m",24,117,{x:0,r:st}],["l",314,117,{x:0,f:1}]]},{d:-1,v:[["m",0,235,{x:0,r:st}],["l",290,235,{x:0,f:1}]]}]),"%":yt(920,388,360,0,0,0,0,[{d:-1,v:[["m",307.1,5.1,{x:0,y:0,r:ct(307.1,5.1,80.9,354.9)}],["l",80.9,354.9,{x:0,y:0,f:1}]]},{d:-1,v:[["m",146,73,{r:ot,p:1}],["b",146,113.3,113.3,146,73,146,{r:st}],["b",32.7,146,0,113.3,0,73,{r:ot}],["b",0,32.7,32.7,0,73,0,{r:st}],["b",113.3,0,146,32.7,146,73,{r:ot,c:1,f:1}]]},{d:-1,v:[["m",388,287,{r:ot,p:1}],["b",388,327.3,355.3,360,315,360,{r:st}],["b",274.7,360,242,327.3,242,287,{r:ot}],["b",242,246.7,274.7,214,315,214,{r:st}],["b",355.3,214,388,246.7,388,287,{r:ot,c:1,f:1}]]}]),"^":yt(596,176,352,0,0,0,0,[{d:-1,v:[["m",0,150,{r:ct(0,150,85,0)}],["l",85,0,{r:ct(0,150,85,0),f:1}],["l",89.5,0,{r:ct(89.5,0,176,150),f:1,v:1}],["l",176,150,{f:1}]]}]),"&":yt(660,259.191,360,0,0,0,0,[{d:1,v:[["m",257.9,355,{x:.5,y:.5,r:ct(257.9,355,52.8,135.3),f:1}],["l",52.8,135.3],["b",52.8,135.3,-2.2,79.5,46.6,26.7],["b",46.6,26.7,68.1,0,101.8,0,{r:st}],["b",137.2,0,174.1,21.1,181.2,65.3],["b",188.6,111.7,142.6,142.9,108.9,162.9],["b",75.2,182.8,40.8,211.4,40.8,211.4,{r:ft}],["b",35,217.1,-34.7,273.7,22.2,330.5],["b",22.2,330.5,48.1,360,93.4,360,{r:st}],["b",138.6,360,212.2,322,259.2,200.5]]}]),"*":yt(558,183.597,212,0,0,0,0,[{d:-1,v:[["m",91.8,0,{x:0,y:0}],["l",91.8,212,{x:0,y:0,f:1}]]},{d:-1,v:[["m",0,53,{x:0,y:0,r:ct(0,53,183.6,159)}],["l",183.6,159,{x:0,y:0,f:1}]]},{d:-1,v:[["m",0,159,{x:0,y:0,r:ct(0,159,183.6,53)}],["l",183.6,53,{x:0,y:0,f:1}]]}]),"+":yt(712,250,250,0,0,0,0,[{d:-1,v:[["m",125,0,{x:0,y:0}],["l",125,250,{x:0,y:0,f:1}]]},{d:-1,v:[["m",0,125,{x:0,y:0,r:st}],["l",250,125,{x:0,y:0,f:1}]]}]),"=":yt(712,216,86,0,0,0,0,[{d:-1,v:[["m",0,0,{x:0,y:0,r:st}],["l",216,0,{x:0,y:0,f:1}]]},{d:-1,v:[["m",0,86,{x:0,y:0,r:st}],["l",216,86,{x:0,y:0,f:1}]]}]),"-":yt(712,188,0,0,0,0,0,[{d:-1,v:[["m",0,0,{x:0,y:0,r:st}],["l",188,0,{x:0,y:0,f:1}]]}]),_:yt(481,235,400,0,0,0,0,[{d:-1,v:[["m",0,400,{x:0,y:0,r:st}],["l",235,400,{x:0,y:0,f:1}]]}]),":":yt(231,8,355,0,0,0,0,[{d:1,v:[["a",4,183.5]]},{d:1,v:[["a",4,353.5]]}]),";":yt(231,8,355,0,0,0,0,[{d:1,v:[["a",4,183.5]]},{d:-1,v:[["m",4,350,{x:0,y:2,r:ct(4,350,-6,430)}],["l",-6,430,{x:0,y:.5,f:1}]]}]),".":yt(231,8,355,0,0,0,0,[{d:1,v:[["a",4,353.5]]}]),",":yt(231,10,355,10,10,0,0,[{d:-1,v:[["m",10,350,{x:0,y:2,r:ct(10,350,0,430)}],["l",0,430,{x:0,y:.5,f:1}]]}]),"'":yt(173,0,360,0,0,0,0,[{d:-1,v:[["m",0,0,{x:0,y:0}],["l",0,80,{x:0,y:0,f:1}]]}]),'"':yt(297,60,360,0,0,0,0,[{d:-1,v:[["m",0,0,{x:-1.5,y:0}],["l",0,80,{x:-1.5,y:0,f:1}]]},{d:-1,v:[["m",60,0,{x:-1.5,y:0}],["l",60,80,{x:-1.5,y:0,f:1}]]}]),"~":yt(731,199.391,47.063,0,0,0,0,[{d:1,v:[["m",199.4,20.7,{x:0,y:0,r:vt(199.4,20.7,187.6,36.6,168.2,47.1,148.2,47.1,0),f:1}],["b",187.6,36.6,168.2,47.1,148.2,47.1,{x:0,y:0,r:st}],["b",129.1,47.1,112.1,36.6,95.3,25.5,{x:0,y:0}],["b",76.8,13.2,59.1,0,39.6,0,{x:0,y:0,r:st}],["b",22.3,0,10.9,8.9,0,20,{x:0,y:0}]]}]),"(":yt(365,107.865,360,0,0,0,0,[{d:1,v:[["m",107.9,360,{y:.8,r:vt(107.9,360,39.7,321.1,0,259.8,0,182.9,0),f:1}],["b",39.7,321.1,0,259.8,0,182.9,{y:.8,r:ot}],["b",0,100.2,39.7,38.9,107.9,0,{y:.8}]]}]),")":yt(365,107.865,360,0,0,0,0,[{d:-1,v:[["m",0,0,{y:.8,r:vt(0,0,68.2,38.9,107.9,100.2,107.9,177,0)}],["b",68.2,38.9,107.9,100.2,107.9,177,{y:.8,r:ot}],["b",107.9,259.8,68.2,321.1,0,360,{y:.8,f:1}]]}]),"{":yt(385,107.865,360,0,0,0,0,[{d:1,v:[["m",94.5,360,{x:-.5,r:st}],["l",77.9,360,{x:-.5}],["b",57.4,360,37,343,37,310.7,{x:-.5}],["l",37,233.4,{x:-.5}],["b",37,207.9,24.3,183.7,3.8,180.7,{x:-.5,r:st}],["l",3.8,179.8,{x:-.5,r:st,p:1}],["b",24.3,176.8,37,153.1,37,126.7,{x:-.5}],["l",37,49.4,{x:-.5}],["b",37,17.1,57.4,.1,77.9,.1,{x:-.5}],["l",94.5,.1,{x:-.5}]]}]),"}":yt(385,107.865,360,0,0,0,0,[{d:-1,v:[["m",13.4,.1,{x:-.5,r:st}],["l",30,.1,{x:-.5}],["b",50.4,.1,70.8,17.1,70.8,49.4,{x:-.5}],["l",70.8,126.7,{x:-.5}],["b",70.8,153.1,83.6,176.8,104,179.8,{x:-.5,r:st}],["l",104,180.7,{x:-.5,r:st,p:1}],["b",83.6,183.7,70.8,207.9,70.8,233.4,{x:-.5}],["l",70.8,310.7,{x:-.5}],["b",70.8,343,50.4,360,30,360,{x:-.5}],["l",13.4,360,{x:-.5}]]}]),"[":yt(365,66,352,0,0,0,0,[{d:-1,v:[["m",66,0,{x:-1,r:st}],["l",0,0,{r:ot,f:1}],["l",0,352,{r:ot,f:1}],["l",66,352,{x:-1,f:1}]]}]),"]":yt(365,66,352,0,0,0,0,[{d:-1,v:[["m",0,0,{x:-1,r:st}],["l",66,0,{r:ot,f:1}],["l",66,352,{r:ot,f:1}],["l",0,352,{x:-1,f:1}]]}]),"<":yt(423,90,352,0,0,0,0,[{d:-1,v:[["m",90,0,{x:-1,y:.3,r:ct(90,0,0,176)}],["l",0,176,{r:ot,f:1}],["l",90,352,{x:-1,y:.3,f:1}]]}]),">":yt(423,90,352,0,0,0,0,[{d:-1,v:[["m",0,0,{x:-1,y:.3,r:ct(0,0,90,176)}],["l",90,176,{r:ot,f:1}],["l",0,352,{x:-1,y:.3,f:1}]]}]),"/":yt(433,130,352,0,0,0,0,[{d:1,v:[["m",0,352,{r:ct(0,352,130,0),f:1,y:0}],["l",130,0,{y:0}]]}])},mt=Object.assign({},pt,xt,bt,gt);function _t(t){var r=mt[t]||mt[ht];return r.v=t,r}function wt(t,r,e,i){var n;return n=t.indexOf("\n")>0?t.split("\n"):t.indexOf("\\n")>0?t.split("\\n"):[t],0==e?function(t){var r,e=[],i=t.length;for(r=0;r<i;r++)e[r]=t[r].split("");return e}(n):i?function(t,r,e){var i,n,a,l,o,s,f,h,u=0,y=0,d=[];for(a=t.length,n=0;n<a;n++){for(f=t[n],u=0,0,d[y]=[],o=f.length,l=0;l<o;l++)h=f[l],i=_t(h),s=p(i,r),u+=s.w,d[y].push(h),u>=e&&(y+=1,u=s.w,d[y]=[]);y+=1}var c=[];for(a=d.length,n=0;n<a;n++)(i=d[n]).length>0&&(" "==i[0]&&i.shift()," "==i[i.length-1]&&i.pop(),i.length>0&&c.push(i));return c}(n,r,e):function(t,r,e){var i,n,a,l,o,s,f,h,u,y,d=0,c=0,v=0,x=[];for(h=t.length,o=0;o<h;o++){for(i=t[o].split(" "),x[v]=[],u=i.length,s=0;s<u;s++){for(c=0,n=i[s],y=n.length,f=0;f<y;f++)a=_t(n[f]),l=p(a,r),c+=l.w;a=_t(" "),l=p(a,r),c+=l.w,(d+=c)>e&&(d=c,x[v+=1]=[]),x[v].push(n)}v+=1,d=0}h=x.length;var b=[];for(o=0;o<h;o++)(a=x[o].join(" ").split("")).length>0&&b.push(a);return b}(n,r,e)}function Pt(t,r){return{c:(t-r)/2,r:t-r,l:0}}function kt(t,r){for(var e=0;e<r.length;e++){var i=r[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var St=function(){function t(){!function(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}(this,t),this.lineWidth_=1,this.drawing_=[],this.data_=null,this.paths_=null,this.lines_=null,this.rect_={x:0,y:0,w:0,h:0},this.align_="left",this.scale_=1,this.fontRatio_=1}var r,e,i;return r=t,(e=[{key:"position",value:function(t,r){return(this.rect_.x!=t||this.rect_.y!=r)&&(this.rect_.x=t,this.rect_.y=r,this.setPosition(),!0)}},{key:"setPosition",value:function(){var t,r,e,i,n=this.data_.length;for(t=0;t<n;t++)(r=this.data_[t]).rect.x=r.originPos.x+this.rect_.x+(e=this.align_,i=r.alignGapX,"center"==e?i.c:"right"==e?i.r:i.l),r.rect.y=r.originPos.y+this.rect_.y}},{key:"updateDrawingPaths",value:function(){var t,r,e=this.data_.length;for(t=0;t<e;t++)(r=this.data_[t]).drawingPaths=_(rt(this,r,-1,!1),r)}},{key:"updatePatternPaths",value:function(t){var r,e,i=this.data_.length;for(r=0;r<i;r++)(e=this.data_[r]).rawPaths=rt(this,e,t,!0)}},{key:"updateWavePaths",value:function(t){var r,e,i=this.data_.length;for(r=0;r<i;r++)(e=this.data_[r]).rawWavePaths=rt(this,e,t,!1)}},{key:"updateGuide",value:function(){var t,r,e=this.data_.length;for(t=0;t<e;t++)(r=this.data_[t]).guide=Q(r.typo,this.scale),r.grid=U(r.typo,this.scale)}},{key:"update",value:function(t,r,e,i,n,a,d){var c=function(t){return(f-o)/(s-o)*(t-o)+o}(i),v=function(t){return 1/(h-o)*(t-o)}(c),g=function(t){return 54/(h-o)*(t-o)+4}(c),m=function(t){return t/l}(n),_=function(t,r){return 50*t*r}(a,m),w=function(t,r){return 50*t*r}(d,m),P=function(t){return(y-u)*t+u}(v);this.fontRatio_=P,this.scale_=m,this.lineWidth_=function(t,r){var e=t*r;return e<1&&(e=1),e}(c,m);var k,S,W,D,T,I,O,R,F,M=wt(t,m,r,e),G=M.length,C=G-1,L=0,z=0,A=0,E=0,q=0,X=0,B=[];for(k=0;k<G;k++){for(D=(W=(T=M[k]).length)-1,L=0,A=0,B[k]={tw:0,arr:[]},S=0;S<W;S++)L+=(R=p(I=_t(O=T[S]),m)).w,z=R.h,S<D&&(L+=_),k<C&&(z+=w),R.x=A,R.y=E,F={x:A,y:E},B[k].arr[S]={str:O,typo:I,rect:R,originPos:F,center:x(R.w,R.h,m),range:b(I,v,g)},A=L;E+=z,B[k].tw=L,q=Math.max(q,L),X+=z}this.rect_.w=q,this.rect_.h=X,this.drawing_=[];for(var H,J,K=[],N=0,Q=B;N<Q.length;N++){var U=Q[N];H=Pt(q,U.tw);var V=!0,Y=!1,Z=void 0;try{for(var $,tt=U.arr[Symbol.iterator]();!(V=($=tt.next()).done);V=!0){var rt=$.value;rt.alignGapX=H,rt.pointsLength=j(rt,this),K.push(rt),J={value:1},this.drawing_.push(J),rt.drawing=J;var et=!0,it=!1,nt=void 0;try{for(var at,lt=rt.typo.p[Symbol.iterator]();!(et=(at=lt.next()).done);et=!0){var ot=at.value;ot.cv=[];var st=!0,ft=!1,ht=void 0;try{for(var ut,yt=ot.v[Symbol.iterator]();!(st=(ut=yt.next()).done);st=!0){var dt=ut.value;ot.cv.push(dt.convert(rt,this))}}catch(t){ft=!0,ht=t}finally{try{st||null==yt.return||yt.return()}finally{if(ft)throw ht}}}}catch(t){it=!0,nt=t}finally{try{et||null==lt.return||lt.return()}finally{if(it)throw nt}}}}catch(t){Y=!0,Z=t}finally{try{V||null==tt.return||tt.return()}finally{if(Y)throw Z}}}this.data_=K,this.setPosition()}},{key:"updatePathsForRect",value:function(){var t,r,e=this.data_.length,i=[];for(t=0;t<e;t++)(r=this.data_[t]).rawWavePaths&&(r.wavePaths=_(r.rawWavePaths,r)),r.rawPaths&&(r.paths=_(r.rawPaths,r),Array.prototype.push.apply(i,r.paths));this.paths_=i}},{key:"updateLinesForRect",value:function(){var t,r,e=this.data_.length;for(t=0;t<e;t++)(r=this.data_[t]).lines=m(r)}},{key:"reset",value:function(){this.lineWidth_=1,this.drawing_=[],this.data_=null,this.paths_=null,this.lines_=null,this.rect_={x:0,y:0,w:0,h:0},this.align_="left",this.scale_=1,this.fontRatio_=1}},{key:"data",get:function(){return this.data_}},{key:"paths",get:function(){return this.paths_}},{key:"lines",get:function(){return this.lines_},set:function(t){this.lines_=t}},{key:"lineWidth",get:function(){return this.lineWidth_}},{key:"fontRatio",get:function(){return this.fontRatio_}},{key:"scale",get:function(){return this.scale_}},{key:"rect",get:function(){return this.rect_}},{key:"drawing",get:function(){return this.drawing_}},{key:"align",set:function(t){this.align_!=t&&(this.align_=t,this.setPosition())},get:function(){return this.align_}}])&&kt(r.prototype,e),i&&kt(r,i),t}();function Wt(t){return(Wt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function Dt(t,r){for(var e=0;e<r.length;e++){var i=r[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function Tt(t,r){return!r||"object"!==Wt(r)&&"function"!=typeof r?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):r}function It(t,r,e){return(It="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,r,e){var i=function(t,r){for(;!Object.prototype.hasOwnProperty.call(t,r)&&null!==(t=Ot(t)););return t}(t,r);if(i){var n=Object.getOwnPropertyDescriptor(i,r);return n.get?n.get.call(e):n.value}})(t,r,e||t)}function Ot(t){return(Ot=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function Rt(t,r){return(Rt=Object.setPrototypeOf||function(t,r){return t.__proto__=r,t})(t,r)}e.d(r,"default",function(){return Ft});var Ft=function(t){function r(){var t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.text,n=void 0===i?"":i,a=e.size,l=void 0===a?500:a,s=e.weight,f=void 0===s?o:s,h=e.color,u=void 0===h?["#000000"]:h,y=e.colorful,d=void 0===y?["#c5d73f","#9d529c","#49a9db","#fec330","#5eb96e","#fc5356","#f38f31"]:y,c=e.tracking,v=void 0===c?0:c,p=e.leading,x=void 0===p?0:p,b=e.align,g=void 0===b?"left":b,m=e.pathGap,_=void 0===m?.5:m,w=e.amplitude,P=void 0===w?.5:w,k=e.width,S=void 0===k?0:k,W=e.breakWord,D=void 0!==W&&W,T=e.fps,I=void 0===T?30:T,O=e.isPath,R=void 0!==O&&O,F=e.isWave,M=void 0!==F&&F;return function(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}(this,r),(t=Tt(this,Ot(r).call(this))).size_=l,t.weight_=f,t.color_=u,t.colorful_=function(t){for(var r,e,i=t.slice(),n=i.length,a=n;a--;)r=Math.random()*n|0,e=i[a],i[a]=i[r],i[r]=e;return i}(d),t.tracking_=v,t.leading_=x,t.pathGap_=_,t.amplitude_=P,t.width_=S,t.breakWord_=D,t.fps_=I,t.fpsTime_=1e3/t.fps_,t.isPath_=R,t.isWave_=M,t.model=new St,t.str_=null,t.time_=null,t.isFps_=!1,t.isForceRander_=!1,t.updateID_=0,t.dPathsID_=null,t.pPathsID_=null,t.wPathsID_=null,t.guideID_=null,t.text=n,t.model.align=g,t}var e,i,n;return function(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(r&&r.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),r&&Rt(t,r)}(r,a),e=r,(i=[{key:"on",value:function(t,e){It(Ot(r.prototype),"on",this).call(this,t,e),this.update()}},{key:"off",value:function(t,e){It(Ot(r.prototype),"off",this).call(this,t,e)}},{key:"position",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.model.position(t,r)&&(this.updateID_++,this.updateSignal())}},{key:"update",value:function(){this.updateID_++,this.model.update(this.str_,this.width_,this.breakWord_,this.weight_,this.size_,this.tracking_,this.leading_),this.isPath_||this.isWave_?(this.updatePatternPaths(),this.updateWavePaths()):this.updateSignal()}},{key:"updateGuide",value:function(){this.guideID_!=this.updateID_&&(this.guideID_=this.updateID_,this.model.updateGuide())}},{key:"updateDrawingPaths",value:function(){this.dPathsID_!=this.updateID_&&(this.dPathsID_=this.updateID_,this.model.updateDrawingPaths())}},{key:"updatePatternPaths",value:function(t){this.isPath_&&(t||this.pPathsID_!=this.updateID_)&&(this.pPathsID_=this.updateID_,this.model.updatePatternPaths(this.pathGap_),this.isForceRander_=!0,this.updateSignal())}},{key:"updateWavePaths",value:function(t){this.isWave_&&(t||this.wPathsID_!=this.updateID_)&&(this.wPathsID_=this.updateID_,this.model.updateWavePaths(this.pathGap_),this.isForceRander_=!0,this.updateSignal())}},{key:"updateSignal",value:function(){this.model.updateLinesForRect(),this.model.updatePathsForRect(),this.dispatch("update",this.model)}},{key:"reset",value:function(){this.size_=500,this.weight_=o,this.color_=["#000000"],this.tracking_=0,this.leading_=0,this.pathGap_=.5,this.amplitude_=.5,this.width_=0,this.breakWord_=!1,this.fps_=30,this.fpsTime_=1e3/this.fps_,this.isPath_=!1,this.isWave_=!1,this.str_=null,this.time_=null,this.isFps_=!1,this.isForceRander_=!1,this.updateID_=0,this.dPathsID_=null,this.pPathsID_=null,this.wPathsID_=null,this.guideID_=null,this.model.reset()}},{key:"dispose",value:function(){this.reset(),this.model=null}},{key:"drawPixi",value:function(t){var r,e,i,n=this.model.data.length;for(r=0;r<n;r++)e=this.model.data[r],i=N(r,0,this.color_),H(t,e,this.lineWidth,i)}},{key:"draw",value:function(t){t.lineWidth=this.lineWidth;var r,e,i=this.model.data.length;for(r=0;r<i;r++)M(t,r,e=this.model.data[r],this.color_),w(t,e)}},{key:"drawColorful",value:function(t){t.lineWidth=this.lineWidth,function(t,r,e){E=-1,A=(D=e).length;var i,n,a,l,o,s,f,h,u,y,d=r.data.length;for(i=0;i<d;i++)for(h=(n=r.data[i]).pointsLength.max,y=0,l=n.lines.length,f=null,a=0;a<l;a++)"a"==(s=(o=n.lines[a]).pos).type?(X(t),t.beginPath(),t.arc(s.x,s.y,s.radius*n.drawing.value,0,v),t.fill(),t.closePath()):"m"==s.type?f=s:"l"==s.type?((u=z(f.x,f.y,s.x,s.y))/r.scale>q&&(X(t),t.beginPath(),f&&t.moveTo(f.x,f.y),t.lineTo(s.x,s.y),y+=B(t,o,u,h,n,y)),f=s):"b"==s.type&&((u=C(f.x,f.y,s.x,s.y,s.x2,s.y2,s.x3,s.y3))/r.scale>q&&(X(t),t.beginPath(),f&&t.moveTo(f.x,f.y),t.bezierCurveTo(s.x,s.y,s.x2,s.y2,s.x3,s.y3),y+=B(t,o,u,h,n,y)),f={x:s.x3,y:s.y3})}(t,this.model,this.colorful_)}},{key:"wave",value:function(t,r){t.lineWidth=this.lineWidth,r&&(this.time_||(this.time_=r),r-this.time_>this.fpsTime_||this.isForceRander_?(this.time_=r,this.isFps_=!0):this.isFps_=!1),this.isForceRander_=!1;var e,i,n=this.model.data.length;for(e=0;e<n;e++)M(t,e,i=this.model.data[e],this.color_),R(t,i,this.model.scale,this.amplitude_,this.weight_,this.isFps_)}},{key:"pattern",value:function(t,r,e){var i,n=r*this.model.scale,a=e*this.model.scale,l=this.model.data.length;for(i=0;i<l;i++)F(t,this.model.data[i],n,a)}},{key:"grid",value:function(t){this.updateGuide();var r,e=this.model.data.length;for(r=0;r<e;r++)W(t,this.model.data[r])}},{key:"point",value:function(t){var r,e=this.model.data.length;for(r=0;r<e;r++)P(t,this.model.data[r])}},{key:"box",value:function(t){t.lineWidth=1,t.beginPath(),t.strokeStyle="#0b90dc",t.rect(this.model.rect.x,this.model.rect.y,this.model.rect.w,this.model.rect.h),t.stroke()}},{key:"text",get:function(){return this.str_},set:function(t){this.str_!=t&&(this.str_=t,this.update())}},{key:"size",get:function(){return this.size_},set:function(t){this.size_!=t&&(this.size_=t,this.update(),this.isForceRander_=!0)}},{key:"weight",get:function(){return this.weight_},set:function(t){t<o?t=o:t>s&&(t=s),this.weight_!=t&&(this.weight_=t,this.update(),this.isForceRander_=!0)}},{key:"color",get:function(){return this.color_},set:function(t){this.color_!=t&&(this.color_=t)}},{key:"tracking",get:function(){return this.tracking_},set:function(t){this.tracking_!=t&&(this.tracking_=t,this.update(),this.isForceRander_=!0)}},{key:"leading",get:function(){return this.leading_},set:function(t){this.leading_!=t&&(this.leading_=t,this.update(),this.isForceRander_=!0)}},{key:"align",get:function(){return this.model.align},set:function(t){this.model.align!=t&&(this.model.align=t,this.updateID_++,this.updateSignal())}},{key:"pathGap",get:function(){return this.pathGap_},set:function(t){this.pathGap_!=t&&(this.pathGap_=t,this.updatePatternPaths(!0),this.updateWavePaths(!0),this.isForceRander_=!0)}},{key:"amplitude",get:function(){return this.amplitude_},set:function(t){this.amplitude_=t}},{key:"rect",get:function(){return this.model.rect}},{key:"maxWidth",set:function(t){this.width_!=t&&(this.width_=t,this.update())},get:function(){return this.width_}},{key:"breakWord",set:function(t){this.breakWord_!=t&&(this.breakWord_=t,this.update())},get:function(){return this.breakWord_}},{key:"isPath",get:function(){return this.isPath_},set:function(t){this.isPath_=t,this.updatePatternPaths(!0)}},{key:"isWave",get:function(){return this.isWave_},set:function(t){this.isWave_=t,this.updateWavePaths(!0)}},{key:"fps",get:function(){return this.fps_},set:function(t){this.fps_=t,this.fpsTime_=1e3/this.fps_}},{key:"lineWidth",get:function(){return this.model.lineWidth}},{key:"scale",get:function(){return this.model.scale}},{key:"drawing",get:function(){return this.model.drawing}},{key:"data",get:function(){return this.model.data}},{key:"paths",get:function(){return this.model.paths}},{key:"drawingPaths",get:function(){return this.model.drawingPaths}},{key:"wavePaths",get:function(){return this.model.wavePaths}}])&&Dt(e.prototype,i),n&&Dt(e,n),r}()}]);
\ No newline at end of file
diff --git a/examples/all.html b/examples/all.html
new file mode 100644
index 0000000..5023769
--- /dev/null
+++ b/examples/all.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - All</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let leon, controll;
+
+        function init() {
+            generateCanvas();
+
+            controll = {
+                align: {},
+                box: false,
+                grids: false,
+                points: false,
+                drawing: () => {
+                    let i, total = leon.drawing.length;
+                    for (i = 0; i < total; i++) {
+                        TweenMax.killTweensOf(leon.drawing[i]);
+                        TweenMax.fromTo(leon.drawing[i], 2, {
+                            value: 0
+                        }, {
+                            value: 1,
+                            ease: Power3.easeOut
+                        });
+                    }
+                }
+            };        
+
+            leon = new LeonSans({
+                text: 'abcdefghijklmn\nopqrstuvwxyz\nABCDEFGHIJK\nLMNOPQRST\nUVWXYZ\n0123456789\n?!$^&*(){}[]<>~\n:;,.\'"+=-_@#%',
+                color: ['#342f2e'],
+                size: getSize(90),
+                weight: 200,
+                tracking: 2,
+                leading: 1, 
+                align: 'center'
+            });
+
+            const gui = new dat.GUI();
+             gui.add(leon, 'text');
+            gui.add(leon, 'size', 20, 1000);
+            gui.add(leon, 'weight', 1, 900);
+            gui.add(leon, 'tracking', -3, 10);
+            gui.add(leon, 'leading', -8, 10);
+            gui.add(controll, 'drawing');
+            gui.add(controll, 'box');
+            gui.add(controll, 'grids');
+            gui.add(controll, 'points');
+
+            requestAnimationFrame(animate);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            ctx.clearRect(0, 0, sw, sh);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            ctx.save();
+            if (controll.grids) leon.grid(ctx);
+            if (controll.box) leon.box(ctx);
+            ctx.restore();
+
+            ctx.save();
+            leon.draw(ctx);
+            ctx.restore();
+
+            if (controll.points) {
+                ctx.save();
+                leon.point(ctx);
+                ctx.restore();
+            }
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/canvas-basic.html b/examples/canvas-basic.html
new file mode 100644
index 0000000..f8c0755
--- /dev/null
+++ b/examples/canvas-basic.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Canvas Basic</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let leon, controll;
+
+        function init() {
+            generateCanvas();
+
+            controll = {
+                color: {},
+                align: {},
+                drawing: () => {
+                    let i, total = leon.drawing.length;
+                    for (i = 0; i < total; i++) {
+                        TweenMax.killTweensOf(leon.drawing[i]);
+                        TweenMax.fromTo(leon.drawing[i], 1.6, {
+                            value: 0
+                        }, {
+                            delay: i * 0.05,
+                            value: 1,
+                            ease: Power4.easeOut
+                        });
+                    }
+                }
+            };
+
+            leon = new LeonSans({
+                text: 'The quick brown\nfox jumps over\nthe lazy dog',
+                color: ['#342f2e'],
+                size: getSize(120),
+                weight: 300
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 20, 1000);
+            gui.add(leon, 'weight', 1, 900);
+            gui.add(leon, 'tracking', -3, 10);
+            gui.add(leon, 'leading', -8, 10);
+            const alignControll = gui.add(controll, 'align', [ 'left', 'center', 'right'] );
+            gui.add(leon, 'maxWidth', 0, 2000);
+            gui.add(leon, 'breakWord');
+            gui.add(controll, 'drawing');
+            const colorControll = gui.add(controll, 'color', [ 'black', 'white', 'yellow', 'red - blue', 'mixed'] );
+
+            alignControll.onChange((value) => {
+                leon.align = value;
+            });
+            alignControll.setValue('left');
+
+            colorControll.onChange((value) => {
+                if (value == 'black') {
+                    document.body.style.backgroundColor = '#f0f0f0';
+                    leon.color = ['#342f2e'];
+                } else if (value == 'white') {
+                    document.body.style.backgroundColor = '#000000';
+                    leon.color = ['#ffffff'];
+                } else if (value == 'yellow') {
+                    document.body.style.backgroundColor = '#57c4e2';
+                    leon.color = ['#ffd93c'];
+                } else if (value == 'red - blue') {
+                    document.body.style.backgroundColor = '#ffffff';
+                    leon.color = [['#ff94a7', '#1c7dd1']];
+                } else if (value == 'mixed') {
+                    document.body.style.backgroundColor = '#ffffff';
+                    leon.color = ['#ff5892', '#7bc92f', ['#3eda4e', '#f4bf14', '#fa314c', '#074aee'], '#ffd93c', '#c0008b'];
+                }
+            });
+            colorControll.setValue('black');
+            
+            requestAnimationFrame(animate);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            ctx.clearRect(0, 0, sw, sh);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            leon.draw(ctx);
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/color-pattern.html b/examples/color-pattern.html
new file mode 100644
index 0000000..ca60abd
--- /dev/null
+++ b/examples/color-pattern.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>LeonSans - Color Pattern</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #121212;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        const speed = 10;
+        const fps = 1000 / 30;
+        const PI2 = 2 * Math.PI;
+        let cValue = 0, mode;
+        let leon, controll, time;
+
+        function init() {
+            generateCanvas();
+            
+            controll = {
+                size: 200,
+                pathGap: 0,
+                patternWidth: 2,
+                visual: {},
+                drawing: () => {
+                    let i, total = leon.drawing.length;
+                    for (i = 0; i < total; i++) {
+                        TweenMax.killTweensOf(leon.drawing[i]);
+                        TweenMax.fromTo(leon.drawing[i], 2, {
+                            value: 0
+                        }, {
+                            delay: i * 0.1,
+                            value: 1,
+                            ease: Power4.easeOut
+                        });
+                    }
+                }
+            };
+
+            leon = new LeonSans({
+                text: 'abcdefg',
+                size: getSize(200),
+                weight: 500,
+                pathGap: -1,
+                isPath: true
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 10, 1000);
+            const weightControll = gui.add(controll, 'patternWidth', 1, 100);
+            gui.add(controll, 'drawing');
+            const visControll = gui.add(controll, 'pathGap', [ '-1', '0'] );
+
+            visControll.onChange((value) => {
+                mode = value;
+                if (mode == '-1') {
+                    weightControll.setValue(40);
+                    leon.pathGap = -1;
+                    leon.tracking = 1;
+                } else if (mode == '0') {
+                    weightControll.setValue(40);
+                    leon.pathGap = 0;
+                    leon.tracking = 1;
+                }
+            });
+            visControll.setValue('-1');
+
+            requestAnimationFrame(animate);
+        }
+
+        function update() {
+            ctx.clearRect(0, 0, sw, sh);
+            ctx.lineWidth = 0.2;
+            const w = controll.patternWidth * leon.scale;
+            const total = leon.data.length;
+            let i, p, pos, no = 0; 
+            let d, j, j_total;
+
+            for (i = 0; i < total; i++) {
+                d = leon.data[i].paths;
+                j_total = Math.round(d.length * leon.drawing[i].value);
+                for (j = 0; j < j_total; j++) {
+                    pos = d[j];
+                    ctx.fillStyle = randomColor(no);
+                    ctx.strokeStyle = randomColor(no);
+                    ctx.beginPath();
+                    ctx.arc(pos.x, pos.y, w, 0, PI2);
+                    ctx.stroke();
+                    no += 1;
+                }
+            }
+
+            cValue -= speed;
+        }
+
+        function randomColor(no) {
+            return "hsl(" + (no + cValue) + ',' + '70%,' + '50%)';
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            if (t) {
+                if (!time) time = t;
+                if (t - time > fps) {
+                    time = t;
+                    update();
+                }
+            }
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/colorful.html b/examples/colorful.html
new file mode 100644
index 0000000..68259e9
--- /dev/null
+++ b/examples/colorful.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Colorful</title>
+
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let leon, controll;
+
+        function init() {
+            generateCanvas();
+
+            controll = {
+                color: {},
+                roundCap: true,
+                multiply: true,
+                drawing: () => {
+                    let i, total = leon.drawing.length;
+                    for (i = 0; i < total; i++) {
+                        TweenMax.killTweensOf(leon.drawing[i]);
+                        TweenMax.fromTo(leon.drawing[i], 2, {
+                            value: 0
+                        }, {
+                            value: 1,
+                            ease: Cubic.easeOut
+                        });
+                    }
+                }
+            };
+
+            leon = new LeonSans({
+                text: 'The quick brown\nfox jumps over\nthe lazy dog',
+                color: ['#000000'],
+                size: getSize(120),
+                weight: 500
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 20, 300);
+            gui.add(leon, 'weight', 1, 900);
+            gui.add(leon, 'tracking', -3, 10);
+            gui.add(leon, 'leading', -8, 10);
+            gui.add(controll, 'drawing');
+            const roundCapControll = gui.add(controll, 'roundCap');
+            const multiplyControll = gui.add(controll, 'multiply');
+
+            roundCapControll.onChange((value) => {
+                if (value) {
+                    ctx.lineCap = "round";
+                } else {
+                    ctx.lineCap = "butt";
+                }
+            });
+
+            multiplyControll.onChange((value) => {
+                if (value) {
+                    ctx.globalCompositeOperation = 'multiply';
+                } else {
+                    ctx.globalCompositeOperation = 'source-over';
+                }
+            });
+            
+            requestAnimationFrame(animate);
+
+            roundCapControll.setValue(true);
+            multiplyControll.setValue(true);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            ctx.clearRect(0, 0, sw, sh);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            leon.drawColorful(ctx);
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/gradient.html b/examples/gradient.html
new file mode 100644
index 0000000..8681abb
--- /dev/null
+++ b/examples/gradient.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Gradient</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let leon, controll;
+
+        function init() {
+            generateCanvas();
+
+            controll = {
+                box: false,
+                grids: false,
+                points: false,
+                drawing: () => {
+                    let i, total = leon.drawing.length;
+                    for (i = 0; i < total; i++) {
+                        TweenMax.killTweensOf(leon.drawing[i]);
+                        TweenMax.fromTo(leon.drawing[i], 2, {
+                            value: 0
+                        }, {
+                            value: 1,
+                            ease: Power4.easeOut
+                        });
+                    }
+                }
+            };
+
+            leon = new LeonSans({
+                text: 'mug',
+                color: [
+                    ['#64d3ce', '#2a92ce'],
+                    ['#e7c4c4', '#aae898', '#e1ea73', '#ff8974'],
+                    ['#fd46aa', '#8ad781']
+                ],
+                size: getSize(500),
+                weight: 140
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 20, 1000);
+            gui.add(leon, 'weight', 1, 900);
+            gui.add(controll, 'drawing');
+            gui.add(controll, 'box');
+            gui.add(controll, 'grids');
+            gui.add(controll, 'points');
+                        
+            requestAnimationFrame(animate);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            ctx.clearRect(0, 0, sw, sh);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            ctx.save();
+            if (controll.grids) leon.grid(ctx);
+            if (controll.box) leon.box(ctx);
+            ctx.restore();
+
+            ctx.save();
+            leon.draw(ctx);
+            ctx.restore();
+
+            if (controll.points) {
+                ctx.save();
+                leon.point(ctx);
+                ctx.restore();
+            }
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/grid.html b/examples/grid.html
new file mode 100644
index 0000000..ac54b6c
--- /dev/null
+++ b/examples/grid.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Grids</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let leon, controll;
+
+        function init() {
+            generateCanvas();
+
+            controll = {
+                box: true,
+                grids: true,
+                points: true,
+            };
+
+            leon = new LeonSans({
+                text: 'Ttypog',
+                color: ['#342f2e'],
+                size: getSize(300),
+                weight: 400
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 100, 1000);
+            gui.add(leon, 'weight', 1, 900);
+            gui.add(leon, 'tracking', -3, 10);
+            gui.add(leon, 'leading', -8, 10);
+            gui.add(controll, 'box');
+            gui.add(controll, 'grids');
+            gui.add(controll, 'points');
+
+            requestAnimationFrame(animate);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            ctx.clearRect(0, 0, sw, sh);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            ctx.save();
+            if (controll.grids) leon.grid(ctx);
+            if (controll.box) leon.box(ctx);
+            ctx.restore();
+
+            ctx.save();
+            leon.draw(ctx);
+            ctx.restore();
+
+            if (controll.points) {
+                ctx.save();
+                leon.point(ctx);
+                ctx.restore();
+            }
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 0000000..f408a5d
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans examples</title>
+
+    <style>
+        html,
+        body {
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            color: #ffffff;
+            font-size: 14px;
+            line-height: 30px;
+            -webkit-text-size-adjust: 100%;
+            font-family: 'Helvetica', sans-serif;
+            font-weight: 400;
+        }
+
+        #menu-m {
+            position: fixed;
+            z-index: 4;
+            width: 60px;
+            height: 56px;
+            left: 0;
+            top: 0;
+            background-color: #222222;
+            cursor: pointer;
+        }
+
+        #menu-m > p {
+            display: block;
+            width: 30px;
+            height: 2px;
+            background-color: #ffffff;
+            position: absolute;
+            left: 15px;
+        }
+        #menu-m > p:nth-child(1) {
+            top: 5px;
+        }
+        #menu-m > p:nth-child(2) {
+            top: 12px;
+        }
+        #menu-m > p:nth-child(3) {
+            top: 19px;
+        }
+
+        #menu-bg {
+            position: fixed;
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            background-color:rgba(0,0,0,0.3);
+            display: none;
+        }
+
+        #menu {
+            position: fixed;
+            z-index: 6;
+            left: 0px;
+            width: 170px;
+            height: 100%;
+            overflow-y: auto;
+            overflow-x: hidden;
+            background-color: #222222;
+        }
+        #menu.show {
+            transform: translate(170px, 0);
+        }
+
+        #header {
+            margin: 0;
+        }
+
+        #version {
+            font-size: 9px;
+            line-height: 9px;
+            color: rgba(255,255,255,0.5);
+            padding: 0 0 0 20px;
+        }
+
+        #list {
+            margin: -10px 0 20px 0;
+        }
+
+        h2 {
+            font-size: 18px;
+            font-weight: 400;
+            margin: 40px 0 6px 0;
+            padding: 0 0 0 20px;
+        }
+
+        h2 > a {
+            font-size: 12px;
+        }
+        .item {
+            padding: 0 0 0 20px;
+            display: block;
+        }
+
+        .item:hover {
+            opacity: 1;
+            background-color: #000;
+        }
+
+        .item.selected {
+            opacity: 1;
+            background-color: #000;
+        }
+
+        a {
+            color: #ffffff;
+            opacity: 0.6;
+            text-decoration: none;
+        }
+
+        #iframe {
+            position: absolute;
+            border: 0px;
+            right: 0;
+            right: 0;
+            width: calc(100% - 170px);
+            height: 100%;
+            overflow: auto;
+        }
+
+        @media (max-width: 600px) {
+            #iframe {
+                width: 100%;
+            }
+            #menu {
+                left: -170px;
+            }
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="../dist/leon.js"></script>
+</head>
+
+<body>
+    <div id="menu-m">
+        <p></p>
+        <p></p>
+        <p></p>
+    </div>
+    <div id="menu-bg"></div>
+    <div id="menu">
+        <canvas id="header"></canvas>
+        <div id="version">VERSION 1.5</div>
+        <div id="list">
+            <h2>Canvas</h2>
+            <a class="item" href="all.html" target="iframe">all</a>
+            <a class="item" href="canvas-basic.html" target="iframe">basic</a>
+            <a class="item" href="gradient.html" target="iframe">gradient</a>
+            <a class="item" href="grid.html" target="iframe">grid</a>
+            <a class="item" href="pattern.html" target="iframe">pattern</a>
+            <a class="item" href="wave.html" target="iframe">wave</a>
+            <a class="item" href="colorful.html" target="iframe">colorful</a>
+            <a class="item" href="color-pattern.html" target="iframe">color pattern</a>
+            <h2>WebGL <a href="https://www.pixijs.com/" target="_blank">(PIXI.js)</a></h2>
+            <a class="item" href="webgl-basic-pixi.html" target="iframe">basic</a>
+            <a class="item" href="metaball-pixi.html" target="iframe">metaball</a>
+            <a class="item" href="morphing-pixi.html" target="iframe">morphing</a>
+            <a class="item" href="plants-pixi.html" target="iframe">plants</a>
+            <a class="item" href="mask-tiling-pixi.html" target="iframe">mask + tiling</a>
+        </div>
+    </div>
+    <iframe id="iframe" name="iframe" allowfullscreen="" allowvr="" onmousewheel=""></iframe>
+
+    <script>
+        window.onload = () => {
+
+            let isShow = false;
+            const menuM = document.getElementById('menu-m');
+            const menuBg = document.getElementById('menu-bg');
+            const menu = document.getElementById('menu');
+            menuM.addEventListener( 'click', (event) => {
+                onClickMenu();
+            });
+            menuBg.addEventListener( 'click', (event) => {
+                onClickMenu();
+            });
+
+            function onClickMenu() {
+                isShow = !isShow;
+                if (isShow) {
+                    menuBg.style.display = 'block';
+                    menu.className = 'show';
+                } else {
+                    menuBg.style.display = 'none';
+                    menu.className = '';
+                }
+            }
+
+
+            const sw = 170;
+            const sh = 50;
+            const iframe = document.getElementById('iframe');
+            const canvas = document.getElementById('header');
+            const ctx = canvas.getContext("2d");
+            canvas.width = sw * 2;
+            canvas.height = sh * 2;
+            canvas.style.width = sw + 'px'
+            canvas.style.height = sh + 'px'
+            ctx.scale(2, 2);
+
+            const leon = new LeonSans({
+                text: 'Leon Sans',
+                color: ['#ffffff'],
+                size: 26,
+                weight: 300
+            });
+            leon.on('update', (model) => {  
+                ctx.clearRect(0, 0, sw, sh);
+                leon.position(20, 20);
+                leon.draw(ctx);
+            });
+
+            const list = document.getElementById('list');
+            const arr = list.getElementsByClassName('item');
+            const total = arr.length;
+            const links = {};
+            let cur = null;
+            let i;
+            for (i = 0; i < total; i++) {
+                const vv = arr[i].href.split('/');
+                const name = vv[vv.length - 1].split('.')[0];
+                links[name] = arr[i];
+
+                arr[i].addEventListener( 'click', (event) => {
+                    const vv = event.target.href.split('/');
+                    const name = vv[vv.length - 1].split('.')[0];
+                    checkMenu(name);
+                });
+            }
+
+            if (window.location.hash !== '') {
+                const name = window.location.hash.substring(1);
+                const url = name + '.html';
+                iframe.src = url;
+                checkMenu(name);
+            } else {
+                const name = 'all';
+                iframe.src = name + '.html';
+                checkMenu(name);
+            }
+            
+            function checkMenu(name) {
+                if (cur) links[cur].classList.remove('selected');
+                cur = name;
+                links[cur].classList.add('selected');
+                window.location.hash = name;
+                iframe.focus();
+            };
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/mask-tiling-pixi.html b/examples/mask-tiling-pixi.html
new file mode 100644
index 0000000..322b5e9
--- /dev/null
+++ b/examples/mask-tiling-pixi.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - MASK + Tiling PIXI</title>
+
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let container, loader, textures = [];
+        let tiling = [], cur = -1;
+        let leon, controll;
+
+        function init() {
+            generatePixi(0x000000);
+
+            container = new PIXI.Container();
+            stage.addChild(container);
+
+            loader = new PIXI.Loader();
+            loader.add('tile1', 'data/tile1.png')
+            .add('tile2', 'data/tile2.png')
+            .add('tile3', 'data/tile3.png')
+            .add('tile4', 'data/tile4.png')
+            .add('tile5', 'data/tile5.png')
+            .add('tile6', 'data/tile6.png');
+
+            loader.load((loader, resources) => {
+                textures.push(resources.tile1.texture);
+                textures.push(resources.tile2.texture);
+                textures.push(resources.tile3.texture);
+                textures.push(resources.tile4.texture);
+                textures.push(resources.tile5.texture);
+                textures.push(resources.tile6.texture);
+                textures = shuffle(textures);
+
+                loaded();
+            });
+        }
+
+
+        function loaded() {
+            controll = {
+                align: {},
+            };
+
+            leon = new LeonSans({
+                text: '012\n345',
+                size: getSize(400),
+                weight: 900,
+                tracking: 1,
+                leading: -1,
+                align: 'center'
+            });
+            leon.on('update', (model) => {  
+                update();
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 10, 1000);
+            gui.add(leon, 'weight', 1, 900);
+
+            requestAnimationFrame(animate);
+        }
+
+
+        function update() {
+            while(container.children[0]) { 
+                container.removeChild(container.children[0]);
+            }
+            
+            const total = leon.data.length;
+            let i, d, color, line, pos;
+            let j, j_total, lineW = leon.lineWidth;
+
+            let graphics, tilingSprite;
+
+            tiling = [];
+
+            for (i = 0; i < total; i++) {
+                d = leon.data[i];
+
+                graphics = new PIXI.Graphics();
+                container.addChild(graphics);
+
+                tilingSprite = new PIXI.TilingSprite(
+                    textures[getNum()],
+                    d.rect.w * 2,
+                    d.rect.h * 2
+                );
+                tilingSprite.x = d.rect.x - d.rect.w /2;
+                tilingSprite.y = d.rect.y - d.rect.h / 2;
+                tilingSprite.tileScale.x = tilingSprite.tileScale.y = leon.scale * 0.5;
+                
+                container.addChild(tilingSprite);
+
+                tilingSprite.mask = graphics;
+                tiling.push({
+                    item: tilingSprite,
+                    x: (Math.random() * 2 + 1 - 2) * 2,
+                    y: (Math.random() * 2 + 1 - 2) * 2
+                });
+
+                j_total = d.lines.length;
+                for (j = 0; j < j_total; j++) {
+                    line = d.lines[j];
+                    pos = d.lines[j].pos;
+
+                    if (pos.type == 'a') {
+                        graphics.lineStyle(0, color, 0);
+                        graphics.beginFill(color);
+                        graphics.drawCircle(pos.x, pos.y, pos.radius);
+                        graphics.endFill();
+                    } else if (pos.type == 'm') {
+                        graphics.lineStyle(lineW, color, 1);
+                        graphics.moveTo(pos.x, pos.y);
+                    } else if (pos.type == 'l') {
+                        graphics.lineTo(pos.x, pos.y);
+                    } else if (pos.type == 'b') {
+                        graphics.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
+                    }
+                    if (line.closePath) {
+                        graphics.closePath();
+                    }
+                }
+                
+            }
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            const total = tiling.length;
+            let i, p;
+            for (i = 0; i < total; i++) {
+                p = tiling[i];
+                p.item.tilePosition.x += p.x * leon.scale;
+                p.item.tilePosition.y += p.y * leon.scale;
+            }
+
+            renderer.render(stage);
+        }
+
+        function getNum() {
+            cur += 1;
+            if (cur == textures.length) {
+                cur = 0;
+            }
+            return cur;
+        }
+
+        function shuffle(oldArray) {
+            var newArray = oldArray.slice(),
+                len = newArray.length,
+                i = len, p, t;
+            while (i--) {
+                p = (Math.random()*len) | 0;
+                t = newArray[i];
+                newArray[i] = newArray[p];
+                newArray[p] = t;
+            }
+            return newArray;
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/metaball-pixi.html b/examples/metaball-pixi.html
new file mode 100644
index 0000000..cf3fc79
--- /dev/null
+++ b/examples/metaball-pixi.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Metaball PIXI</title>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            cursor: move;
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let container, texture, particleCon;
+        let leon, controll, weightControll;
+        const particleTotal = 10000;
+        let particles = [];
+        
+        function init() {
+            generatePixi(0x000000);
+
+            texture = PIXI.Texture.from('data/drop-alpha.png');
+            particleCon = new PIXI.ParticleContainer(particleTotal, {
+                vertices: false,
+                scale: true,
+                position: true,
+                rotation: false,
+                uvs: false,
+                alpha: false
+            });
+            stage.addChild(particleCon);
+
+            let p, i;
+            for (i = 0; i < particleTotal; i++) {
+                p = new PIXI.Sprite(texture);
+                p.x = sw / 2;
+                p.y = sh / 2;
+                p.anchor.set(0.5);
+                p.scale.x = p.scale.y = 0;
+                particleCon.addChild(p);
+                particles.push(p);
+            }
+
+            const blurFilter = new PIXI.filters.BlurFilter();
+            blurFilter.blur = 10;
+            blurFilter.autoFit = true;
+
+            const fragSource = [
+                    'precision mediump float;',
+                    'varying vec2 vTextureCoord;',
+                    'uniform sampler2D uSampler;',
+                    'uniform float threshold;',
+                    'uniform float mr;',
+                    'uniform float mg;',
+                    'uniform float mb;',
+                    'void main(void)',
+                    '{',
+                    '    vec4 color = texture2D(uSampler, vTextureCoord);',
+                    '    vec3 mcolor = vec3(mr, mg, mb);',
+                    '    if (color.a > threshold) {',
+                    '       gl_FragColor = vec4(mcolor, 1.0);',
+                    '    } else {',
+                    '       gl_FragColor = vec4(vec3(0.0), 0.0);',
+                    '    }',
+                    '}'
+                ].join('\n');
+
+            const uniformsData = {
+                threshold: 0.5,
+                mr: 255.0/255.0,
+                mg: 255.0/255.0,
+                mb: 255.0/255.0,
+            };
+
+            const thresholdFilter = new PIXI.Filter(null, fragSource, uniformsData);
+            stage.filters = [blurFilter, thresholdFilter];
+            stage.filterArea = renderer.screen;
+
+            controll = {
+                weight: 3,
+                color: {},
+                outline: true,
+                drawing: () => {
+                    let i;
+                    for (i = 0; i < particleTotal; i++) {
+                        TweenMax.killTweensOf(particles[i].scale);
+                        TweenMax.set(particles[i].scale, {
+                            x: 0,
+                            y: 0
+                        });
+                        TweenMax.to(particles[i].scale, 3, {
+                            delay: 0.001 * i,
+                            x: particles[i].saveScale,
+                            y: particles[i].saveScale,
+                            ease: Circ.easeOut
+                        });
+                    }
+                }
+            };
+
+            leon = new LeonSans({
+                text: 'TOP\n678',
+                size: getSize(400),
+                weight: 700,
+                pathGap: -1,
+                isPath: true,
+                tracking: 0
+            });
+            leon.on('update', (model) => {  
+                update();
+            });
+            
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            const sizeControll = gui.add(leon, 'size', 200, 1000);
+            gui.add(leon, 'tracking', -6, 10);
+            gui.add(leon, 'leading', -8, 10);
+            weightControll = gui.add(controll, 'weight', 1, 9);
+            gui.add(controll, 'drawing');
+            const colorControll = gui.add(controll, 'color', [ 'white', 'black', 'red'] );
+
+            sizeControll.onChange((value) => {
+                sizeWeight();
+            });
+
+            weightControll.onChange((value) => {
+                update();
+            });
+
+            colorControll.onChange((value) => {
+                if (value == 'white') {
+                    renderer.backgroundColor = 0x000000;
+                    uniformsData.mr = 255.0/255.0;
+                    uniformsData.mg = 255.0/255.0;
+                    uniformsData.mb = 255.0/255.0;
+                } else if (value == 'black') {
+                    renderer.backgroundColor = 0xffffff;
+                    uniformsData.mr = 0.0/255.0;
+                    uniformsData.mg = 0.0/255.0;
+                    uniformsData.mb = 0.0/255.0;
+                }  else if (value == 'red') {
+                    renderer.backgroundColor = 0xe4c143;
+                    uniformsData.mr = 244.0/255.0;
+                    uniformsData.mg = 46.0/255.0;
+                    uniformsData.mb = 33.0/255.0;
+                } 
+            });
+            colorControll.setValue('white');
+
+            requestAnimationFrame(animate);
+
+            sizeWeight();
+
+            TweenMax.delayedCall(0.1, () => {
+                controll.drawing();
+            });            
+        }
+
+        function sizeWeight() {
+            let w;
+            if (leon.size > 400) {
+                w = (1.5 - 3) / (1000 - 400) * (leon.size - 400) + 3;
+            } else {
+                w = (3 - 6) / (400 - 200) * (leon.size - 200) + 6;
+            }
+            weightControll.setValue(w);
+        }
+
+        function update() {
+            const total = leon.paths.length;
+            const sw2 = sw / 2;
+            const sh2 = sh / 2;
+            let i, p, pos, scale; 
+            for (i = 0; i < particleTotal; i++) {
+                p = particles[i];
+                TweenMax.killTweensOf(p.scale);
+                if (i < total) {
+                    pos = leon.paths[i];
+                    if (pos.type == 'a') {
+                        scale = controll.weight * 0.025* leon.scale;
+                    } else {
+                        scale = controll.weight * 0.01* leon.scale;
+                    }
+                    p.saveScale = scale;
+                    p.x = pos.x;
+                    p.y = pos.y;
+                    p.scale.x = p.scale.y = scale;
+                } else {
+                    p.saveScale = 0;
+                    p.x = -1000;
+                    p.y = -1000;
+                    p.scale.x = p.scale.y = 0;                   
+                }
+            }        
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            renderer.render(stage);
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/morphing-pixi.html b/examples/morphing-pixi.html
new file mode 100644
index 0000000..293727c
--- /dev/null
+++ b/examples/morphing-pixi.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Morphing PIXI</title>
+
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let container, texture, particleCon;
+        let leon, controll;
+        const particleTotal = 5000;
+        let particles = [];
+        let myText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?!$^&*(){}[]<>~:;,.\'"+=-_@#%'.split('');
+        const textTotal = myText.length;
+        let curText = -1;
+        let DELAY_TIME = 0.8;
+
+        function init() {
+            generatePixi(0xfec82e);
+
+            myText = shuffle(myText);
+
+            texture = PIXI.Texture.from('data/drop-alpha.png');
+
+            particleCon = new PIXI.ParticleContainer(particleTotal, {
+                vertices: false,
+                scale: true,
+                position: true,
+                rotation: false,
+                uvs: false,
+                alpha: false
+            });
+            stage.addChild(particleCon);
+
+            let p, i;
+            for (i = 0; i < particleTotal; i++) {
+                p = new PIXI.Sprite(texture);
+                p.x = sw / 2;
+                p.y = sh / 2;
+                p.anchor.set(0.5);
+                p.scale.x = p.scale.y = 0;
+                particleCon.addChild(p);
+                particles.push(p);
+            }
+
+            const blurFilter = new PIXI.filters.BlurFilter();
+            blurFilter.blur = 10;
+            blurFilter.autoFit = true;
+
+            const fragSource = [
+                    'precision mediump float;',
+                    'varying vec2 vTextureCoord;',
+                    'uniform sampler2D uSampler;',
+                    'uniform float threshold;',
+                    'uniform float mr;',
+                    'uniform float mg;',
+                    'uniform float mb;',
+                    'void main(void)',
+                    '{',
+                    '    vec4 color = texture2D(uSampler, vTextureCoord);',
+                    '    vec3 mcolor = vec3(mr, mg, mb);',
+                    '    if (color.a > threshold) {',
+                    '       gl_FragColor = vec4(mcolor, 1.0);',
+                    '    } else {',
+                    '       gl_FragColor = vec4(vec3(0.0), 0.0);',
+                    '    }',
+                    '}'
+                ].join('\n');
+
+            const uniformsData = {
+                threshold: 0.5,
+                mr: 255.0/255.0,
+                mg: 255.0/255.0,
+                mb: 255.0/255.0,
+            };
+
+            const thresholdFilter = new PIXI.Filter(null, fragSource, uniformsData );
+
+            const outlineFilterBlue = new PIXI.filters.OutlineFilter(1, 0x000000);
+
+            stage.filters = [blurFilter, thresholdFilter, outlineFilterBlue];
+            stage.filterArea = renderer.screen;
+
+            controll = {
+                weight: 6,
+                outline: true
+            };
+
+            leon = new LeonSans({
+                text: '',
+                size: 600,
+                weight: 700,
+                pathGap: -1,
+                isPath: true
+            });
+            leon.on('update', (data) => {  
+                update(data);
+            });
+            
+            const gui = new dat.GUI();
+            gui.add(leon, 'size', 400, 1000);
+            gui.add(controll, 'weight', 3, 9);
+            const otControll = gui.add(controll, 'outline');
+            otControll.onChange((value) => {
+                if (value) {
+                    stage.filters = [blurFilter, thresholdFilter, outlineFilterBlue];
+                } else {
+                    stage.filters = [blurFilter, thresholdFilter];
+                }
+            });
+
+            requestAnimationFrame(animate);
+
+            showText();
+        }
+
+        function nextText() {
+            TweenMax.killDelayedCallsTo(showText);
+            TweenMax.delayedCall(DELAY_TIME, showText);
+        }
+
+        function showText() {
+            curText += 1;
+            if (curText == textTotal) curText = 0;
+            leon.text = myText[curText];
+            nextText();
+        }
+
+        function shuffle(oldArray) {
+            var newArray = oldArray.slice(),
+                len = newArray.length,
+                i = len, p, t;
+            while (i--) {
+                p = (Math.random()*len) | 0;
+                t = newArray[i];
+                newArray[i] = newArray[p];
+                newArray[p] = t;
+            }
+            return newArray;
+        }
+
+        function update(model) {
+            const total = model.paths.length;
+            const sw2 = sw / 2;
+            const sh2 = sh / 2;
+            let i, p, pos, scale; 
+            for (i = 0; i < particleTotal; i++) {
+                p = particles[i];
+                TweenMax.killTweensOf(p);
+                if (i < total) {
+                    pos = model.paths[i];
+                    if (pos.type == 'a') {
+                        scale = controll.weight * 0.02* leon.scale;
+                    } else {
+                        scale = controll.weight * 0.01* leon.scale;
+                    }
+                    TweenMax.to(p, 0.4, {
+                        x: sw2, 
+                        y: sh2,
+                        ease: Sine.easeIn
+                    });
+                    TweenMax.to(p, 0.5, {
+                        delay: 0.3,
+                        x: pos.x, 
+                        y: pos.y,
+                        ease: Expo.easeOut
+                    });
+                    TweenMax.to(p.scale, 0.5, {
+                        delay: 0.3,
+                        x: scale, 
+                        y: scale,
+                        ease: Expo.easeOut
+                    });
+                } else {
+                    TweenMax.to(p, 0.3, {
+                        x: sw2, 
+                        y: sh2,
+                        ease: Sine.easeIn
+                    });
+                    TweenMax.to(p.scale, 0.3, {
+                        x: 0, 
+                        y: 0,
+                        ease: Sine.easeIn
+                    });
+                   
+                }
+            }
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x, y);
+
+            renderer.render(stage);
+        }
+
+        window.onload = () => {
+            init();
+        };
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/pattern.html b/examples/pattern.html
new file mode 100644
index 0000000..1b50b04
--- /dev/null
+++ b/examples/pattern.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Pattern</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #502c8d;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let leon, controll;
+
+        function init() {
+            generateCanvas();
+
+            controll = {
+                color: {},
+                align: {},
+                patternWidth: 40,
+                patternHeight: 10,
+                drawing: () => {
+                    let i, total = leon.drawing.length;
+                    for (i = 0; i < total; i++) {
+                        TweenMax.killTweensOf(leon.drawing[i]);
+                        TweenMax.fromTo(leon.drawing[i], 2, {
+                            value: 0
+                        }, {
+                            delay: i * 0.05,
+                            value: 1,
+                            ease: Power4.easeOut
+                        });
+                    }
+                }
+            };
+
+            leon = new LeonSans({
+                text: 'The quick brown\nfox jumps over\nthe lazy dog',
+                size: getSize(120),
+                weight: 400,
+                isPath: true,
+                pathGap: 0.2
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 20, 300);
+            gui.add(leon, 'pathGap', 0, 1);
+            gui.add(controll, 'patternWidth', 1, 200);
+            gui.add(controll, 'patternHeight', 1, 100);
+            gui.add(controll, 'drawing');
+
+            requestAnimationFrame(animate);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            ctx.clearRect(0, 0, sw, sh);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            leon.pattern(ctx, controll.patternWidth, controll.patternHeight);
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/plants-pixi.html b/examples/plants-pixi.html
new file mode 100644
index 0000000..02b3b74
--- /dev/null
+++ b/examples/plants-pixi.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Plants PIXI</title>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let container, loader, resource;
+        let leafs = [], flowers = [];
+        let leon, controll;
+        const tintLeaf = [
+            0xFFFFFF,
+            0xFFFF00,
+            0xccff00,
+            0x00ff1e,
+            0xffb300,
+            0xa2ff00
+        ];
+        const tintFlower = [
+            0xFFFFFF,
+            0xffeea1,
+            0xffa1a1,
+            0xeca1ff,
+            0xa1dbff,
+            0xffa1d6,
+            0xd2ffa1,
+        ];
+
+        function init() {
+            generatePixi(0xf0f0f0);
+
+            container = new PIXI.Container();
+            stage.addChild(container);
+
+            loader = new PIXI.Loader();
+            loader.add('branch_long', 'data/branch_long.png')
+            .add('branch_circle', 'data/branch_circle.png')
+            .add('flower1', 'data/flower1.png')
+            .add('flower2', 'data/flower2.png')
+            .add('flower3', 'data/flower3.png')
+            .add('leaf1', 'data/leaf1.png')
+            .add('leaf2', 'data/leaf2.png');
+
+            loader.load((loader, resources) => {
+                resource = resources;
+
+                flowers.push('flower1');
+                flowers.push('flower2');
+                flowers.push('flower3');
+
+                leafs.push('leaf1');
+                leafs.push('leaf1');
+                leafs.push('leaf2');
+
+                loaded();
+            });            
+        }
+
+        function loaded() {
+            controll = {
+                color: {},
+            };
+
+            leon = new LeonSans({
+                text: 'ONE',
+                size: getSize(500),
+                weight: 1,
+                pathGap: -1,
+                tracking: 0,
+                isPath: true
+            });
+            leon.on('update', (data) => {  
+                update(data);
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'tracking', -3, 10);
+
+            window.addEventListener('resize', resize, false);
+            requestAnimationFrame(animate);
+        }
+
+        function resize() {
+            sw = document.body.clientWidth;
+            sh = document.body.clientHeight;
+
+            renderer.resize(sw, sh);
+        }
+
+        function update() {
+            while(container.children[0]) { 
+                TweenMax.killTweensOf(container.children[0]);
+                container.removeChild(container.children[0]);
+            }
+
+            let points, saveFlowers = [], saveLeafs = [];
+            let total = leon.model.data.length;
+            let i, j, j_total, d, pos;
+            for (i = 0; i < total; i++) {
+                d = leon.model.data[i];
+                j_total = d.paths.length;
+                points = [];
+                for (j = 0; j < j_total; j++) {
+                    pos = d.paths[j];
+
+                    if (pos.type == 'a') {
+                        const dot = new PIXI.Sprite(resource.branch_circle.texture);
+                        dot.anchor.set(0.5);
+                        dot.x = pos.x;
+                        dot.y = pos.y;
+                        const scale = 0.15 * leon.scale;
+                        dot.scale.x = dot.scale.y = scale;
+                        container.addChild(dot);  
+                    } else if (pos.start == 1) {
+                        if (points.length > 0) {
+                            addBranch(points);
+                        }
+                        points = [];
+                        points.push(new PIXI.Point(pos.x, pos.y));
+                    } else { 
+                        points.push(new PIXI.Point(pos.x, pos.y));
+                    }
+
+                    if (Math.random() > 0.99) {
+                        saveFlowers.push(pos);
+                    }
+
+                    if (Math.random() > 0.84) {
+                        saveLeafs.push(pos);
+                    }
+                }
+
+                if (points.length > 0) {
+                    addBranch(points);
+                }
+            }
+
+            function addBranch(points) {
+                const branch = new PIXI.SimpleRope(resource.branch_long.texture, points);
+                container.addChild(branch);  
+            }
+
+            total = saveLeafs.length;
+            for (i = 0; i < total; i++) {
+                pos = saveLeafs[i];
+                d = leafs[Math.floor(0.5 + (Math.random()*(leafs.length-1)))];
+                const leaf = new PIXI.Sprite(resource[d].texture);
+                leaf.anchor.set(0.5, 1);
+                leaf.x = pos.x;
+                leaf.y = pos.y;
+                const scale = 0.1 * (0.2 + Math.random() * (1.2 - 0.2)) * leon.scale;
+                leaf.scale.x = leaf.scale.y = 0;
+                leaf.rotation = (pos.rotation + (90 * (Math.PI / 180)) * (Math.random() > 0.5 ? 1 : -1)) + (Math.random() * (Math.PI / 2) - (Math.PI / 4));
+                container.addChild(leaf);
+                leaf.tint = tintLeaf[Math.floor(0.5 + (Math.random()*(tintLeaf.length-1)))];     
+                TweenMax.to(leaf.scale, 0.8, {
+                    delay: 0.004 * i,
+                    x: scale,
+                    y: scale,
+                    ease: Power3.easeOut
+                });
+            }
+
+            total = saveFlowers.length;
+            for (i = 0; i < total; i++) {
+                pos = saveFlowers[i];
+                d = flowers[Math.floor(0.5 + (Math.random()*(flowers.length-1)))];
+                const flower = new PIXI.Sprite(resource[d].texture);
+                flower.anchor.set(0.5);
+                flower.x = pos.x;
+                flower.y = pos.y;
+                const scale = 0.04 * (0.6 + Math.random() * (1.2 - 0.6)) * leon.scale;
+                flower.scale.x = flower.scale.y = 0;
+                flower.rotation = Math.random() * Math.PI * 2;
+                container.addChild(flower);
+                flower.tint = tintFlower[Math.floor(0.5 + (Math.random()*(tintFlower.length-1)))];    
+                TweenMax.to(flower.scale, 0.8, {
+                    delay: 0.05 * i + 0.6,
+                    x: scale,
+                    y: scale,
+                    ease: Power3.easeOut
+                });
+            }
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            renderer.render(stage);
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/wave.html b/examples/wave.html
new file mode 100644
index 0000000..3c83872
--- /dev/null
+++ b/examples/wave.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - Wave</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            background-color: #000000;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let leon, controll;
+
+        function init() {
+            generateCanvas();
+
+            const controll = {
+                color: {},
+                align: {},
+            };
+
+            leon = new LeonSans({
+                text: 'The quick brown\nfox jumps over\nthe lazy dog',
+                color: ['#ffffff'],
+                size: getSize(120),
+                weight: 1,
+                isWave: true,
+                pathGap: 0.3,
+                amplitude: 0.5,
+                fps: 30
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 20, 300);
+            gui.add(leon, 'weight', 1, 300);
+            gui.add(leon, 'pathGap', 0, 1);
+            gui.add(leon, 'amplitude', 0, 1);
+            gui.add(leon, 'fps', 10, 60);
+
+            requestAnimationFrame(animate);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            ctx.clearRect(0, 0, sw, sh);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            leon.wave(ctx, t);
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/webgl-basic-pixi.html b/examples/webgl-basic-pixi.html
new file mode 100644
index 0000000..28c8f5a
--- /dev/null
+++ b/examples/webgl-basic-pixi.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Leon Sans - WebGL Basic PIXI</title>
+
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            outline: 0;
+            margin: 0;
+            padding: 0;
+            cursor: move;
+        }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
+</head>
+
+<body>
+    <script src="../dist/leon.js"></script>
+    <script src="js/util.js"></script>
+    <script>
+        let graphics;
+        let leon, controll;
+
+        function init() {
+            generatePixi(0x000000);
+
+            graphics = new PIXI.Graphics();
+            stage.addChild(graphics);
+
+            controll = {
+                color: {},
+                align: {},
+                drawing: () => {
+                    leon.updateDrawingPaths();
+
+                    let i, total = leon.drawing.length;
+                    for (i = 0; i < total; i++) {
+                        TweenMax.killTweensOf(leon.drawing[i]);
+                        TweenMax.fromTo(leon.drawing[i], 1.6, {
+                            value: 0
+                        }, {
+                            delay: i * 0.05,
+                            value: 1,
+                            ease: Power4.easeOut
+                        });
+                    }
+                },
+            };
+
+            leon = new LeonSans({
+                text: 'The quick brown\nfox jumps over\nthe lazy dog',
+                color: [0xffffff],
+                size: getSize(120),
+                weight: 300
+            });
+
+            const gui = new dat.GUI();
+            gui.add(leon, 'text');
+            gui.add(leon, 'size', 10, 2000);
+            gui.add(leon, 'weight', 1, 900);
+            gui.add(leon, 'tracking', -3, 10);
+            gui.add(leon, 'leading', -8, 10);
+            const alignControll = gui.add(controll, 'align', [ 'left', 'center', 'right'] );
+            gui.add(leon, 'maxWidth', 0, 2000);
+            gui.add(leon, 'breakWord');
+            gui.add(controll, 'drawing');
+            const colorControll = gui.add(controll, 'color', [ 'black', 'white', 'yellow' , 'mixed'] );
+
+            alignControll.onChange((value) => {
+                leon.align = value;
+            });
+            alignControll.setValue('left');
+
+            colorControll.onChange((value) => {
+                if (value == 'black') {
+                    renderer.backgroundColor = 0xf0f0f0;
+                    leon.color = [0x342f2e];
+                } else if (value == 'white') {
+                    renderer.backgroundColor = 0x000000;
+                    leon.color = [0xffffff];
+                } else if (value == 'yellow') {
+                    renderer.backgroundColor = 0x57c4e2;
+                    leon.color = [0xffd93c];
+                } else if (value == 'mixed') {
+                    document.body.style.backgroundColor = '#ffffff';
+                    leon.color = [0xff5892, 0xbc92f, 0xffd93c, 0xc0008b];
+                }
+            });
+            colorControll.setValue('white');
+
+            requestAnimationFrame(animate);
+        }
+
+        function animate(t) {
+            requestAnimationFrame(animate);
+
+            const x = (sw - leon.rect.w) / 2;
+            const y = (sh - leon.rect.h) / 2;
+            leon.position(x + moveX, y + moveY);
+
+            graphics.clear();
+            leon.drawPixi(graphics);
+
+            renderer.render(stage);
+        }
+
+        window.onload = () => {
+            init();
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..1b9c716
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,2 @@
+const LeonSans = require('./LeonSans').default;
+module.exports = LeonSans;
\ No newline at end of file
diff --git a/src/leonsans.js b/src/leonsans.js
new file mode 100644
index 0000000..620536a
--- /dev/null
+++ b/src/leonsans.js
@@ -0,0 +1,521 @@
+import {
+    Dispatcher
+} from './core/dispatcher.js';
+import {
+    MIN_FONT_WEIGHT,
+    MAX_FONT_WEIGHT,
+    shuffle
+} from './core/util.js';
+import {
+    Lines
+} from './draw/canvas/lines.js';
+import {
+    Points
+} from './draw/canvas/points.js';
+import {
+    Grids
+} from './draw/canvas/grids.js';
+import {
+    Wave
+} from './draw/canvas/wave.js';
+import {
+    Pattern
+} from './draw/canvas/pattern.js';
+import {
+    Color
+} from './draw/canvas/color.js';
+import {
+    Colorful
+} from './draw/canvas/colorful.js';
+import {
+    PixiLines
+} from './draw/pixi/lines.js';
+import {
+    PixiColor
+} from './draw/pixi/color.js';
+import {
+    Model
+} from './core/model.js';
+
+
+export default class LeonSans extends Dispatcher {
+    constructor({
+        text = '',
+        size = 500,
+        weight = MIN_FONT_WEIGHT,
+        color = ['#000000'],
+        colorful = ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31'],
+        tracking = 0,
+        leading = 0,
+        align = 'left',
+        pathGap = 0.5,
+        amplitude = 0.5,
+        width = 0,
+        breakWord = false,
+        fps = 30,
+        isPath = false,
+        isWave = false,
+    } = {}) {
+        super();
+
+        this.size_ = size;
+        this.weight_ = weight;
+        this.color_ = color;
+        this.colorful_ = shuffle(colorful);
+        this.tracking_ = tracking;
+        this.leading_ = leading;
+        this.pathGap_ = pathGap;
+        this.amplitude_ = amplitude;
+        this.width_ = width;
+        this.breakWord_ = breakWord;
+        this.fps_ = fps;
+        this.fpsTime_ = 1000 / this.fps_;
+        this.isPath_ = isPath;
+        this.isWave_ = isWave;
+
+        this.model = new Model();
+
+        this.str_ = null;
+
+        this.time_ = null;
+        this.isFps_ = false;
+        this.isForceRander_ = false;
+
+        this.updateID_ = 0;
+        this.dPathsID_ = null;
+        this.pPathsID_ = null;
+        this.wPathsID_ = null;
+        this.guideID_ = null;
+
+        this.text = text;
+
+        this.model.align = align;
+    }
+
+    on(event, callback) {
+        super.on(event, callback);
+        this.update();
+    }
+
+    off(event, callback) {
+        super.off(event, callback);
+    }
+
+    get text() {
+        return this.str_;
+    }
+
+    set text(str) {
+        if (this.str_ == str) return;
+        this.str_ = str;
+        this.update();
+    }
+
+    get size() {
+        return this.size_;
+    }
+
+    set size(v) {
+        if (this.size_ == v) return;
+        this.size_ = v;
+        this.update();
+        this.isForceRander_ = true;
+    }
+
+    get weight() {
+        return this.weight_;
+    }
+
+    set weight(v) {
+        if (v < MIN_FONT_WEIGHT) {
+            v = MIN_FONT_WEIGHT;
+        } else if (v > MAX_FONT_WEIGHT) {
+            v = MAX_FONT_WEIGHT;
+        }
+        if (this.weight_ == v) return;
+        this.weight_ = v;
+        this.update();
+        this.isForceRander_ = true;
+    }
+
+    get color() {
+        return this.color_;
+    }
+
+    set color(v) {
+        if (this.color_ == v) return;
+        this.color_ = v;
+    }
+
+    get tracking() {
+        return this.tracking_;
+    }
+
+    set tracking(v) {
+        if (this.tracking_ == v) return;
+        this.tracking_ = v;
+        this.update();
+        this.isForceRander_ = true;
+    }
+
+    get leading() {
+        return this.leading_;
+    }
+
+    set leading(v) {
+        if (this.leading_ == v) return;
+        this.leading_ = v;
+        this.update();
+        this.isForceRander_ = true;
+    }
+
+    get align() {
+        return this.model.align;
+    }
+
+    set align(v) {
+        if (this.model.align != v) {
+            this.model.align = v;
+            this.updateID_++;
+            this.updateSignal();
+        }
+    }
+
+    get pathGap() {
+        return this.pathGap_;
+    }
+
+    set pathGap(v) {
+        if (this.pathGap_ != v) {
+            this.pathGap_ = v;
+            this.updatePatternPaths(true);
+            this.updateWavePaths(true);
+            this.isForceRander_ = true;
+        }
+    }
+
+    get amplitude() {
+        return this.amplitude_;
+    }
+
+    set amplitude(v) {
+        this.amplitude_ = v;
+    }
+
+    get rect() {
+        return this.model.rect;
+    }
+
+    set maxWidth(v) {
+        if (this.width_ == v) return;
+        this.width_ = v;
+        this.update();
+    }
+
+    get maxWidth() {
+        return this.width_;
+    }
+
+    set breakWord(v) {
+        if (this.breakWord_ == v) return;
+        this.breakWord_ = v;
+        this.update();
+    }
+
+    get breakWord() {
+        return this.breakWord_;
+    }
+
+    get isPath() {
+        return this.isPath_;
+    }
+
+    set isPath(v) {
+        this.isPath_ = v;
+        this.updatePatternPaths(true);
+    }
+
+    get isWave() {
+        return this.isWave_;
+    }
+
+    set isWave(v) {
+        this.isWave_ = v;
+        this.updateWavePaths(true);
+    }
+
+    get fps() {
+        return this.fps_;
+    }
+
+    set fps(v) {
+        this.fps_ = v;
+        this.fpsTime_ = 1000 / this.fps_;
+    }
+
+    get lineWidth() {
+        return this.model.lineWidth;
+    }
+
+    get scale() {
+        return this.model.scale;
+    }
+
+    get drawing() {
+        return this.model.drawing;
+    }
+
+    get data() {
+        return this.model.data;
+    }
+
+    get paths() {
+        return this.model.paths;
+    }
+
+    get drawingPaths() {
+        return this.model.drawingPaths;
+    }
+
+    get wavePaths() {
+        return this.model.wavePaths;
+    }
+
+    position(x = 0, y = 0) {
+        if (this.model.position(x, y)) {
+            this.updateID_++;
+            this.updateSignal();
+        }
+    }
+
+    update() {
+        this.updateID_++;
+
+        this.model.update(
+            this.str_,
+            this.width_,
+            this.breakWord_,
+            this.weight_,
+            this.size_,
+            this.tracking_,
+            this.leading_
+        );
+
+        if (this.isPath_ || this.isWave_) {
+            this.updatePatternPaths();
+            this.updateWavePaths();
+        } else {
+            this.updateSignal();
+        }
+    }
+
+    updateGuide() {
+        if (this.guideID_ != this.updateID_) {
+            this.guideID_ = this.updateID_;
+            this.model.updateGuide();
+        }
+    }
+
+    /**
+     * Update paths for drawing in WebGL (PIXI.js). It's very expensive, only call when it needs.
+     */
+    updateDrawingPaths() {
+        if (this.dPathsID_ != this.updateID_) {
+            this.dPathsID_ = this.updateID_;
+            this.model.updateDrawingPaths();
+        }
+    }
+
+    /**
+     * Update paths for pattern
+     * @param {boolean} force - Force execution
+     */
+    updatePatternPaths(force) {
+        if (this.isPath_ && (force || this.pPathsID_ != this.updateID_)) {
+            this.pPathsID_ = this.updateID_;
+            this.model.updatePatternPaths(this.pathGap_);
+            this.isForceRander_ = true;
+            this.updateSignal();
+        }
+    }
+
+    /**
+     * Update paths for wave effect
+     * @param {boolean} force - Force execution
+     */
+    updateWavePaths(force) {
+        if (this.isWave_ && (force || this.wPathsID_ != this.updateID_)) {
+            this.wPathsID_ = this.updateID_;
+            this.model.updateWavePaths(this.pathGap_);
+            this.isForceRander_ = true;
+            this.updateSignal();
+        }
+    }
+
+    updateSignal() {
+        this.model.updateLinesForRect();
+        this.model.updatePathsForRect();
+        this.dispatch('update', this.model);
+    }
+
+    reset() {
+        this.size_ = 500;
+        this.weight_ = MIN_FONT_WEIGHT;
+        this.color_ = ['#000000'];
+        this.tracking_ = 0;
+        this.leading_ = 0;
+        this.pathGap_ = 0.5;
+        this.amplitude_ = 0.5;
+        this.width_ = 0;
+        this.breakWord_ = false;
+        this.fps_ = 30;
+        this.fpsTime_ = 1000 / this.fps_;
+        this.isPath_ = false;
+        this.isWave_ = false;
+
+        this.str_ = null;
+
+        this.time_ = null;
+        this.isFps_ = false;
+        this.isForceRander_ = false;
+
+        this.updateID_ = 0;
+        this.dPathsID_ = null;
+        this.pPathsID_ = null;
+        this.wPathsID_ = null;
+        this.guideID_ = null;
+
+        this.model.reset();
+    }
+
+    dispose() {
+        this.reset();
+        this.model = null;
+    }
+
+    /**
+     * Draw text in WebGL with PIXI.js
+     * @param {PIXI.Graphics} graphics
+     */
+    drawPixi(graphics) {
+        const total = this.model.data.length;
+        let i, d, color;
+        for (i = 0; i < total; i++) {
+            d = this.model.data[i];
+            color = PixiColor(i, d, this.color_);
+            PixiLines(graphics, d, this.lineWidth, color);
+        }
+    }
+
+    /**
+     * Draw text in the Canvas element.
+     * @param {CanvasRenderingContext2D} ctx
+     */
+    draw(ctx) {
+        ctx.lineWidth = this.lineWidth;
+        const total = this.model.data.length;
+        let i, d;
+        for (i = 0; i < total; i++) {
+            d = this.model.data[i];
+            Color(ctx, i, d, this.color_);
+            Lines(ctx, d);
+        }
+    }
+
+    /**
+     * Draw the colorful effect.
+     * @param {CanvasRenderingContext2D} ctx
+     */
+    drawColorful(ctx) {
+        ctx.lineWidth = this.lineWidth;
+        Colorful(ctx, this.model, this.colorful_);
+    }
+
+    /**
+     * Draw the wave effect.
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {DOMHighResTimeStamp} t time stemp from requestAnimationFrame()
+     */
+    wave(ctx, t) {
+        ctx.lineWidth = this.lineWidth;
+
+        if (t) {
+            if (!this.time_) this.time_ = t;
+            const p = t - this.time_;
+            if (p > this.fpsTime_ || this.isForceRander_) {
+                this.time_ = t;
+                this.isFps_ = true;
+            } else {
+                this.isFps_ = false;
+            }
+        }
+        this.isForceRander_ = false;
+
+        const total = this.model.data.length;
+        let i, d;
+        for (i = 0; i < total; i++) {
+            d = this.model.data[i];
+            Color(ctx, i, d, this.color_);
+            Wave(ctx, d, this.model.scale, this.amplitude_, this.weight_, this.isFps_);
+        }
+    }
+
+    /**
+     * Draw rectangle shapes at each path point.
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} w pattern width
+     * @param {number} h pattern height
+     */
+    pattern(ctx, w, h) {
+        const tw = w * this.model.scale;
+        const th = h * this.model.scale;
+
+        const total = this.model.data.length;
+        let i, d;
+        for (i = 0; i < total; i++) {
+            d = this.model.data[i];
+            Pattern(ctx, d, tw, th);
+        }
+    }
+
+    /**
+     * Draw grid for each type.
+     * @param {CanvasRenderingContext2D} ctx
+     */
+    grid(ctx) {
+        this.updateGuide();
+
+        const total = this.model.data.length;
+        let i, d;
+        for (i = 0; i < total; i++) {
+            d = this.model.data[i];
+            Grids(ctx, d);
+        }
+    }
+
+    /**
+     * Draw circles at each drawing point and lines for each type.
+     * @param {CanvasRenderingContext2D} ctx
+     */
+    point(ctx) {
+        const total = this.model.data.length;
+        let i, d;
+        for (i = 0; i < total; i++) {
+            d = this.model.data[i];
+            Points(ctx, d);
+        }
+    }
+
+    /**
+     * Draw outline box for the text.
+     * @param {CanvasRenderingContext2D} ctx
+     * @private
+     */
+    box(ctx) {
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.strokeStyle = "#0b90dc";
+        ctx.rect(this.model.rect.x, this.model.rect.y, this.model.rect.w, this.model.rect.h);
+        ctx.stroke();
+    }
+}
\ No newline at end of file