├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── css └── demo.css ├── dist ├── segment.js └── segment.min.js ├── favicon.ico ├── gulpfile.js ├── index.html ├── js ├── d3-ease.v1.min.js ├── demo.js ├── highlight.pack.js └── segment.js ├── package.json └── scss ├── _media.scss ├── _normalize.scss ├── _tomorrow.scss └── demo.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .idea/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .idea/ 3 | css/ 4 | js/ 5 | scss/ 6 | index.html 7 | favicon.ico 8 | gulpfile.js -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 lmgonzalves 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Segment 2 | 3 | A JavaScript library to draw and animate SVG path strokes. 4 | 5 | See the [DEMO](http://lmgonzalves.github.io/segment). 6 | 7 | Read [this article](http://lmgonzalves.github.io/2015/10/26/animating-svg-path-segments/) to understand how it works. 8 | 9 | ## Basic usage 10 | 11 | **HTML** 12 | 13 | Add the segment script, and define a `path` somewhere. 14 | 15 | ```html 16 | 17 | 18 | 21 | ``` 22 | 23 | **JavaScript** 24 | 25 | Initialize a new `Segment` with the `path`. Then draw a segment of stroke every time you want with: `.draw(begin, end, duration, options)`. 26 | 27 | ```js 28 | var myPath = document.getElementById("my-path"), 29 | segment = new Segment(myPath); 30 | 31 | segment.draw("25%", "75% - 10", 1); 32 | ``` 33 | 34 | ## Install with NPM 35 | 36 | ``` 37 | npm install segment-js 38 | ``` 39 | 40 | ## Constructor 41 | 42 | The `Segment` constructor asks for 4 parameters: 43 | 44 | - path: DOM element to draw. 45 | - begin (optional, default `0`): Length to start drawing the stroke. 46 | - end (optional, default `100%`): Length to finish drawing the stroke. 47 | - circular (optional, default `false`): Allow `begin` and `end` values less than 0 and greater than 100%. 48 | 49 | ## Method `draw(begin, end, duration, options)` 50 | 51 | | Name | Type | Default | Description | 52 | |------------|----------|---------|-------------| 53 | |`begin` | string | 0 | Path length to start drawing. | 54 | |`end` | string | 100% | Path length to finish drawing. | 55 | |`duration` | float | 0 | Duration (in seconds) of the animation. | 56 | |`options` | object | null | Options for animation in object notation. | 57 | 58 | Note that `begin` and `end` can be negative values and can be written in any of these ways: 59 | 60 | - floatValue 61 | - percent 62 | - percent + floatValue 63 | - percent - floatValue 64 | 65 | ### All possible `options` for `draw` method 66 | 67 | | Name | Type | Default | Description | 68 | |------------|----------|---------|-------------| 69 | |`delay` | float | 0 | Waiting time (in seconds) to start drawing. | 70 | |`easing` | function | linear | Easing function (normalized). I highly recommend [d3-ease](https://github.com/d3/d3-ease). | 71 | |`circular` | boolean | false | If `true`, when the stroke reaches the end of the path it will resume at the beginning. The same applies in the opposite direction. | 72 | |`callback` | function | null | Function to call when the animation is done. | 73 | 74 | **Example** 75 | 76 | ```js 77 | function cubicIn(t) { 78 | return t * t * t; 79 | } 80 | 81 | function done() { 82 | alert("Done!"); 83 | } 84 | 85 | segment.draw("-25%", "75% - 10", 1, {delay: 0.5, easing: cubicIn, circular: true, callback: done}); 86 | ``` 87 | 88 | ## Animating with another library 89 | 90 | It's possible to animate the path stroke using another JavaScript library, like [GSAP](http://greensock.com/gsap). `Segments` offers a method called `strokeDasharray` that is useful for this issue. 91 | Here is an example using TweenLite (with CSSPlugin). 92 | 93 | ```js 94 | TweenLite.to(path, 1, { strokeDasharray: segment.strokeDasharray(begin, end) }); 95 | ``` 96 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.hljs-comment{color:#8e908c}.hljs-variable,.hljs-attribute,.hljs-tag,.hljs-regexp,.ruby .hljs-constant,.xml .hljs-tag .hljs-title,.xml .hljs-pi,.xml .hljs-doctype,.html .hljs-doctype,.css .hljs-id,.css .hljs-class,.css .hljs-pseudo{color:#c82829}.hljs-number,.hljs-preprocessor,.hljs-pragma,.hljs-built_in,.hljs-literal,.hljs-params,.hljs-constant{color:#f5871f}.ruby .hljs-class .hljs-title,.css .hljs-rule .hljs-attribute{color:#eab700}.hljs-string,.hljs-value,.hljs-inheritance,.hljs-header,.hljs-name,.ruby .hljs-symbol,.xml .hljs-cdata{color:#718c00}.hljs-title,.css .hljs-hexcolor{color:#3e999f}.hljs-function,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword,.perl .hljs-sub,.javascript .hljs-title,.coffeescript .hljs-title{color:#4271ae}.hljs-keyword,.javascript .hljs-function{color:#8959a8}.hljs{display:block;overflow-x:auto;background:white;color:#4d4d4c;padding:0.5em;-webkit-text-size-adjust:none}.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:0.5}body{font-family:'DejaVu Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;background-color:#ffffff;color:#34495E}.container a{color:inherit;text-decoration:none;border-bottom:2px solid rgba(52,73,94,0.5);transition:0.2s}.container a:hover{border-color:#34495e}h1{text-align:center}h2{margin-top:50px}h2:first-child{margin-top:20px}p{line-height:1.3}div.description{position:relative;top:-10px;text-align:center;color:rgba(52,73,94,0.6);line-height:1.3}.svg-container{width:100%;height:0;padding-top:43%;position:relative;margin:0 auto}svg{position:absolute;top:0;left:0}.demo-code{text-align:center;color:#4D4D4C;margin:10px 0 0}.demo-code .code-snippet{display:inline-block;padding:20px 30px;background-color:#efecf4}.demo-code .code-snippet select{border:none;color:#20638f;background-color:#e1dceb;text-align:center;-webkit-appearance:none;-moz-appearance:none;text-indent:1px;text-overflow:'';padding-right:7px;cursor:pointer}.demo-code .code-snippet select option{border:none}.selectable{position:relative;display:inline-block}.selectable select:hover+.tooltip{opacity:1}.selectable .tooltip{position:absolute;bottom:160%;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);color:#ffffff;-webkit-text-emphasis-color:transparent;text-emphasis-color:transparent;font-size:13px;padding:2px 5px;border-radius:3px;white-space:nowrap;background-color:#707F8E;cursor:default;pointer-events:none;opacity:0;transition:0.2s}.selectable .tooltip::-moz-selection{background:transparent}.selectable .tooltip::selection{background:transparent}.selectable .tooltip:before{position:absolute;content:'';width:10px;height:10px;bottom:-2px;left:50%;-webkit-transform:translateX(-50%) rotate(45deg);-ms-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);background-color:#707F8E;z-index:-1}button,a.documentation-link{display:block;background-color:#2980b9;border:none;outline:none;color:#ffffff;padding:12px 0;width:300px;max-width:100%;text-align:center;margin:20px auto;border-radius:3px;cursor:pointer;transition:0.3s}button.bordered,a.documentation-link.bordered{padding:10px 0;background-color:transparent;border:2px solid #3498db;color:#34495E;opacity:0.8}button:hover,a.documentation-link:hover{color:#ffffff;background-color:#3498db;border-color:transparent;opacity:1}code.inline-code{padding:2px 5px;background-color:#efecf4}code.hljs{padding:1.5em;background-color:#efecf4}footer{font-size:14px;text-align:center;padding:15px 0 14px;margin-top:20px;color:rgba(52,73,94,0.5);background-color:rgba(52,73,94,0.05)}.container{margin:0 auto;padding:0 20px;box-sizing:border-box}@media (min-width: 540px){.svg-container{width:474px;padding-top:200px}}@media (min-width: 768px){.container{width:720px}}@media (min-width: 992px){.container{width:970px}}@media (min-width: 1200px){.container{width:1170px}} 2 | -------------------------------------------------------------------------------- /dist/segment.js: -------------------------------------------------------------------------------- 1 | /** 2 | * segment - A JavaScript library to draw and animate SVG path strokes 3 | * @version v1.1.3 4 | * @link https://github.com/lmgonzalves/segment 5 | * @license MIT 6 | */ 7 | 8 | (function(root, factory) { 9 | if (typeof define === 'function' && define.amd) { 10 | define([], factory); 11 | } else if (typeof module === 'object' && module.exports) { 12 | module.exports = factory(); 13 | } else { 14 | root.Segment = factory(); 15 | } 16 | }(this, function () { 17 | 18 | function Segment(path, begin, end, circular){ 19 | this.path = path; 20 | this.reset(); 21 | this.begin = typeof begin !== 'undefined' ? this.valueOf(begin) : 0; 22 | this.end = typeof end !== 'undefined' ? this.valueOf(end) : this.length; 23 | this.circular = typeof circular !== 'undefined' ? circular : false; 24 | this.timer = null; 25 | this.animationTimer = null; 26 | this.draw(this.begin, this.end, 0, {circular: this.circular}); 27 | } 28 | 29 | Segment.prototype = { 30 | reset: function(){ 31 | this.length = this.path.getTotalLength(); 32 | this.path.style.strokeDashoffset = this.length * 2; 33 | }, 34 | 35 | draw: function(begin, end, duration, options){ 36 | this.circular = options && options.hasOwnProperty('circular') ? options.circular : false; 37 | if(duration){ 38 | this.stop(); 39 | 40 | var that = this; 41 | var delay = options && options.hasOwnProperty('delay') ? parseFloat(options.delay) * 1000 : 0; 42 | if(delay){ 43 | delete options.delay; 44 | this.timer = setTimeout(function(){ 45 | that.draw(begin, end, duration, options); 46 | }, delay); 47 | return this.timer; 48 | } 49 | 50 | this.startTime = new Date(); 51 | this.initBegin = this.begin; 52 | this.initEnd = this.end; 53 | this.finalBegin = this.valueOf(begin); 54 | this.finalEnd = this.valueOf(end); 55 | this.pausedTime = 0; 56 | this.duration = duration; 57 | this.easing = options && options.hasOwnProperty('easing') ? options.easing : null; 58 | this.update = options && options.hasOwnProperty('update') ? options.update : null; 59 | this.callback = options && options.hasOwnProperty('callback') ? options.callback : null; 60 | 61 | this.animationTimer = requestAnimationFrame(this.play.bind(this)); 62 | }else{ 63 | this.path.style.strokeDasharray = this.strokeDasharray(begin, end); 64 | } 65 | }, 66 | 67 | play: function() { 68 | var now = new Date(); 69 | if (this.pausedTime) { 70 | this.startTime.setMilliseconds(this.startTime.getMilliseconds() + (now - this.pausedTime)); 71 | this.pausedTime = 0; 72 | } 73 | var elapsed = (now - this.startTime) / 1000; 74 | var time = (elapsed / parseFloat(this.duration)); 75 | var t = time; 76 | 77 | if(typeof this.easing === 'function'){ 78 | t = this.easing(t); 79 | } 80 | 81 | if(time > 1){ 82 | t = 1; 83 | this.stop(); 84 | }else{ 85 | this.animationTimer = requestAnimationFrame(this.play.bind(this)); 86 | } 87 | 88 | this.drawStep(t); 89 | 90 | if(time > 1 && typeof this.callback === 'function'){ 91 | return this.callback.call(this); 92 | } 93 | }, 94 | 95 | pause: function() { 96 | if (this.animationTimer) { 97 | this.stop(); 98 | this.pausedTime = new Date(); 99 | } 100 | }, 101 | 102 | resume: function() { 103 | if (!this.animationTimer) { 104 | this.animationTimer = requestAnimationFrame(this.play.bind(this)); 105 | } 106 | }, 107 | 108 | stop: function(){ 109 | cancelAnimationFrame(this.animationTimer); 110 | this.animationTimer = null; 111 | clearTimeout(this.timer); 112 | this.timer = null; 113 | }, 114 | 115 | drawStep: function(t) { 116 | this.begin = this.initBegin + (this.finalBegin - this.initBegin) * t; 117 | this.end = this.initEnd + (this.finalEnd - this.initEnd) * t; 118 | 119 | this.begin = this.begin < 0 && !this.circular ? 0 : this.begin; 120 | this.begin = this.begin > this.length && !this.circular ? this.length : this.begin; 121 | this.end = this.end < 0 && !this.circular ? 0 : this.end; 122 | this.end = this.end > this.length && !this.circular ? this.length : this.end; 123 | 124 | if (this.end - this.begin <= this.length && this.end - this.begin > 0) { 125 | this.draw(this.begin, this.end, 0, {circular: this.circular}); 126 | } else { 127 | if (this.circular && this.end - this.begin > this.length) { 128 | this.draw(0, this.length, 0, {circular: this.circular}); 129 | } else { 130 | this.draw(this.begin + (this.end - this.begin), this.end - (this.end - this.begin), 0, {circular: this.circular}); 131 | } 132 | } 133 | 134 | if(typeof this.update === 'function'){ 135 | this.update(this); 136 | } 137 | }, 138 | 139 | strokeDasharray: function(begin, end){ 140 | this.begin = this.valueOf(begin); 141 | this.end = this.valueOf(end); 142 | if(this.circular){ 143 | var division = this.begin > this.end || (this.begin < 0 && this.begin < this.length * -1) 144 | ? parseInt(this.begin / parseInt(this.length)) : parseInt(this.end / parseInt(this.length)); 145 | if(division !== 0){ 146 | this.begin = this.begin - this.length * division; 147 | this.end = this.end - this.length * division; 148 | } 149 | } 150 | if(this.end > this.length){ 151 | var plus = this.end - this.length; 152 | return [this.length, this.length, plus, this.begin - plus, this.end - this.begin].join(' '); 153 | } 154 | if(this.begin < 0){ 155 | var minus = this.length + this.begin; 156 | if(this.end < 0){ 157 | return [this.length, this.length + this.begin, this.end - this.begin, minus - this.end, this.end - this.begin, this.length].join(' '); 158 | }else{ 159 | return [this.length, this.length + this.begin, this.end - this.begin, minus - this.end, this.length].join(' '); 160 | } 161 | } 162 | return [this.length, this.length + this.begin, this.end - this.begin].join(' '); 163 | }, 164 | 165 | valueOf: function(input){ 166 | var val = parseFloat(input); 167 | if(typeof input === 'string' || input instanceof String){ 168 | if(~input.indexOf('%')){ 169 | var arr; 170 | if(~input.indexOf('+')){ 171 | arr = input.split('+'); 172 | val = this.percent(arr[0]) + parseFloat(arr[1]); 173 | }else if(~input.indexOf('-')){ 174 | arr = input.split('-'); 175 | if(arr.length === 3){ 176 | val = -this.percent(arr[1]) - parseFloat(arr[2]); 177 | }else{ 178 | val = arr[0] ? this.percent(arr[0]) - parseFloat(arr[1]) : -this.percent(arr[1]); 179 | } 180 | }else{ 181 | val = this.percent(input); 182 | } 183 | } 184 | } 185 | return val; 186 | }, 187 | 188 | percent: function(value){ 189 | return parseFloat(value) / 100 * this.length; 190 | } 191 | }; 192 | 193 | return Segment; 194 | 195 | })); 196 | -------------------------------------------------------------------------------- /dist/segment.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * segment - A JavaScript library to draw and animate SVG path strokes 3 | * @version v1.1.3 4 | * @link https://github.com/lmgonzalves/segment 5 | * @license MIT 6 | */ 7 | !function(i,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():i.Segment=t()}(this,function(){function i(i,t,e,s){this.path=i,this.reset(),this.begin="undefined"!=typeof t?this.valueOf(t):0,this.end="undefined"!=typeof e?this.valueOf(e):this.length,this.circular="undefined"!=typeof s&&s,this.timer=null,this.animationTimer=null,this.draw(this.begin,this.end,0,{circular:this.circular})}return i.prototype={reset:function(){this.length=this.path.getTotalLength(),this.path.style.strokeDashoffset=2*this.length},draw:function(i,t,e,s){if(this.circular=!(!s||!s.hasOwnProperty("circular"))&&s.circular,e){this.stop();var n=this,h=s&&s.hasOwnProperty("delay")?1e3*parseFloat(s.delay):0;if(h)return delete s.delay,this.timer=setTimeout(function(){n.draw(i,t,e,s)},h),this.timer;this.startTime=new Date,this.initBegin=this.begin,this.initEnd=this.end,this.finalBegin=this.valueOf(i),this.finalEnd=this.valueOf(t),this.pausedTime=0,this.duration=e,this.easing=s&&s.hasOwnProperty("easing")?s.easing:null,this.update=s&&s.hasOwnProperty("update")?s.update:null,this.callback=s&&s.hasOwnProperty("callback")?s.callback:null,this.animationTimer=requestAnimationFrame(this.play.bind(this))}else this.path.style.strokeDasharray=this.strokeDasharray(i,t)},play:function(){var i=new Date;this.pausedTime&&(this.startTime.setMilliseconds(this.startTime.getMilliseconds()+(i-this.pausedTime)),this.pausedTime=0);var t=(i-this.startTime)/1e3,e=t/parseFloat(this.duration),s=e;if("function"==typeof this.easing&&(s=this.easing(s)),e>1?(s=1,this.stop()):this.animationTimer=requestAnimationFrame(this.play.bind(this)),this.drawStep(s),e>1&&"function"==typeof this.callback)return this.callback.call(this)},pause:function(){this.animationTimer&&(this.stop(),this.pausedTime=new Date)},resume:function(){this.animationTimer||(this.animationTimer=requestAnimationFrame(this.play.bind(this)))},stop:function(){cancelAnimationFrame(this.animationTimer),this.animationTimer=null,clearTimeout(this.timer),this.timer=null},drawStep:function(i){this.begin=this.initBegin+(this.finalBegin-this.initBegin)*i,this.end=this.initEnd+(this.finalEnd-this.initEnd)*i,this.begin=this.begin<0&&!this.circular?0:this.begin,this.begin=this.begin>this.length&&!this.circular?this.length:this.begin,this.end=this.end<0&&!this.circular?0:this.end,this.end=this.end>this.length&&!this.circular?this.length:this.end,this.end-this.begin<=this.length&&this.end-this.begin>0?this.draw(this.begin,this.end,0,{circular:this.circular}):this.circular&&this.end-this.begin>this.length?this.draw(0,this.length,0,{circular:this.circular}):this.draw(this.begin+(this.end-this.begin),this.end-(this.end-this.begin),0,{circular:this.circular}),"function"==typeof this.update&&this.update(this)},strokeDasharray:function(i,t){if(this.begin=this.valueOf(i),this.end=this.valueOf(t),this.circular){var e=this.begin>this.end||this.begin<0&&this.beginthis.length){var s=this.end-this.length;return[this.length,this.length,s,this.begin-s,this.end-this.begin].join(" ")}if(this.begin<0){var n=this.length+this.begin;return this.end<0?[this.length,this.length+this.begin,this.end-this.begin,n-this.end,this.end-this.begin,this.length].join(" "):[this.length,this.length+this.begin,this.end-this.begin,n-this.end,this.length].join(" ")}return[this.length,this.length+this.begin,this.end-this.begin].join(" ")},valueOf:function(i){var t=parseFloat(i);if(("string"==typeof i||i instanceof String)&&~i.indexOf("%")){var e;~i.indexOf("+")?(e=i.split("+"),t=this.percent(e[0])+parseFloat(e[1])):~i.indexOf("-")?(e=i.split("-"),t=3===e.length?-this.percent(e[1])-parseFloat(e[2]):e[0]?this.percent(e[0])-parseFloat(e[1]):-this.percent(e[1])):t=this.percent(i)}return t},percent:function(i){return parseFloat(i)/100*this.length}},i}); -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lmgonzalves/segment/4117e19b74ef8296cb5266229ddeafb7f8392e54/favicon.ico -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | browserSync = require('browser-sync'), 3 | sass = require('gulp-sass'), 4 | prefix = require('gulp-autoprefixer'), 5 | uglify = require('gulp-uglify'), 6 | rename = require('gulp-rename'), 7 | insert = require('gulp-insert'); 8 | 9 | /** 10 | * Static server 11 | */ 12 | gulp.task('serve', ['sass', 'dist'], function(){ 13 | browserSync.init({ 14 | server: { 15 | baseDir: "./" 16 | }, 17 | open: false, 18 | online: false, 19 | notify: false 20 | }); 21 | 22 | gulp.watch('scss/*.scss', ['sass']); 23 | gulp.watch('dist/segment.js', ['dist']); 24 | gulp.watch(['index.html', 'js/*']).on('change', browserSync.reload); 25 | }); 26 | 27 | /** 28 | * Compile files from scss into css 29 | */ 30 | gulp.task('sass', function(){ 31 | return gulp.src('scss/demo.scss') 32 | .pipe(sass({ 33 | outputStyle: 'compressed', 34 | includePaths: ['scss'], 35 | onError: browserSync.notify 36 | })) 37 | .pipe(prefix(['last 5 versions'], {cascade: true})) 38 | .pipe(gulp.dest('css')) 39 | .pipe(browserSync.reload({stream:true})); 40 | }); 41 | 42 | /** 43 | * Create distributable versions 44 | */ 45 | gulp.task('dist', function(){ 46 | return gulp.src('js/segment.js') 47 | .pipe(gulp.dest('dist')) 48 | .pipe(uglify({preserveComments: 'some'})) 49 | .pipe(rename({suffix: '.min'})) 50 | .pipe(gulp.dest('dist')) 51 | .pipe(browserSync.reload({stream:true})); 52 | }); 53 | 54 | /** 55 | * Default task 56 | */ 57 | gulp.task('default', ['serve']); 58 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Segment 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 |

24 |

Segment

25 |

A JavaScript library to draw and animate SVG path strokes

26 |

Available on GitHub under MIT licence

27 | 28 |

29 | 33 |

34 |

35 |

36 |

37 | segment.draw( 38 |

39 | 40 | 47 | 48 |

49 | , 50 |

51 | 52 | 59 | 60 |

61 | , 62 |

63 | 64 | 71 | 72 |

73 | , 74 | {easing: 75 |

76 | 77 | 104 | 105 |

106 | } 107 | ); 108 |

109 |

110 |

111 | 112 |

113 |

114 |

Basic usage

115 |

HTML

116 | 117 |

Add the segment script (less than 2kb), and define a path somewhere.

118 | 119 |

<script src="/dist/segment.min.js"></script>
120 | 
121 | <svg>
122 |     <path id="my-path" ...>
123 | </svg>

124 | 125 |

JavaScript

126 | 127 |

Initialize a new Segment with the path. Then draw a segment of stroke every time you want with: .draw(begin, end, duration, options).

128 | 129 |

var myPath = document.getElementById("my-path"),
130 |     segment = new Segment(myPath);
131 | 
132 | segment.draw("25%", "75% - 10", 1);

133 | 134 |

135 |

136 | More documentation 137 |

138 |

139 |

Credits

140 |

The easing functions used in this demo belong to the excellent library d3-ease.

141 |

142 |

143 | 144 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /js/d3-ease.v1.min.js: -------------------------------------------------------------------------------- 1 | // https://d3js.org/d3-ease/ Version 1.0.0. Copyright 2016 Mike Bostock. 2 | !function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(n.d3=n.d3||{})}(this,function(n){"use strict";function t(n){return+n}function e(n){return n*n}function u(n){return n*(2-n)}function r(n){return((n*=2)<=1?n*n:--n*(2-n)+1)/2}function a(n){return n*n*n}function o(n){return--n*n*n+1}function i(n){return((n*=2)<=1?n*n*n:(n-=2)*n*n+2)/2}function c(n){return 1-Math.cos(n*E)}function s(n){return Math.sin(n*E)}function f(n){return(1-Math.cos(C*n))/2}function h(n){return Math.pow(2,10*n-10)}function p(n){return 1-Math.pow(2,-10*n)}function M(n){return((n*=2)<=1?Math.pow(2,10*n-10):2-Math.pow(2,10-10*n))/2}function d(n){return 1-Math.sqrt(1-n*n)}function I(n){return Math.sqrt(1- --n*n)}function O(n){return((n*=2)<=1?1-Math.sqrt(1-n*n):Math.sqrt(1-(n-=2)*n)+1)/2}function l(n){return 1-x(1-n)}function x(n){return(n=+n)n?g*(n-=b)*n+q:S>n?g*(n-=Q)*n+j:g*(n-=_)*n+L}function w(n){return((n*=2)<=1?1-x(1-n):x(n-1)+1)/2}var m=3,v=function T(n){function t(t){return Math.pow(t,n)}return n=+n,t.exponent=T,t}(m),y=function U(n){function t(t){return 1-Math.pow(1-t,n)}return n=+n,t.exponent=U,t}(m),B=function V(n){function t(t){return((t*=2)<=1?Math.pow(t,n):2-Math.pow(2-t,n))/2}return n=+n,t.exponent=V,t}(m),C=Math.PI,E=C/2,P=4/11,b=6/11,k=8/11,q=.75,Q=9/11,S=10/11,j=.9375,_=21/22,L=63/64,g=1/P/P,z=1.70158,A=function W(n){function t(t){return t*t*((n+1)*t-n)}return n=+n,t.overshoot=W,t}(z),D=function X(n){function t(t){return--t*t*((n+1)*t+n)+1}return n=+n,t.overshoot=X,t}(z),F=function Y(n){function t(t){return((t*=2)<1?t*t*((n+1)*t-n):(t-=2)*t*((n+1)*t+n)+2)/2}return n=+n,t.overshoot=Y,t}(z),G=2*Math.PI,H=1,J=.3,K=function Z(n,t){function e(e){return n*Math.pow(2,10*--e)*Math.sin((u-e)/t)}var u=Math.asin(1/(n=Math.max(1,n)))*(t/=G);return e.amplitude=function(n){return Z(n,t*G)},e.period=function(t){return Z(n,t)},e}(H,J),N=function $(n,t){function e(e){return 1-n*Math.pow(2,-10*(e=+e))*Math.sin((e+u)/t)}var u=Math.asin(1/(n=Math.max(1,n)))*(t/=G);return e.amplitude=function(n){return $(n,t*G)},e.period=function(t){return $(n,t)},e}(H,J),R=function nn(n,t){function e(e){return((e=2*e-1)<0?n*Math.pow(2,10*e)*Math.sin((u-e)/t):2-n*Math.pow(2,-10*e)*Math.sin((u+e)/t))/2}var u=Math.asin(1/(n=Math.max(1,n)))*(t/=G);return e.amplitude=function(n){return nn(n,t*G)},e.period=function(t){return nn(n,t)},e}(H,J);n.easeLinear=t,n.easeQuad=r,n.easeQuadIn=e,n.easeQuadOut=u,n.easeQuadInOut=r,n.easeCubic=i,n.easeCubicIn=a,n.easeCubicOut=o,n.easeCubicInOut=i,n.easePoly=B,n.easePolyIn=v,n.easePolyOut=y,n.easePolyInOut=B,n.easeSin=f,n.easeSinIn=c,n.easeSinOut=s,n.easeSinInOut=f,n.easeExp=M,n.easeExpIn=h,n.easeExpOut=p,n.easeExpInOut=M,n.easeCircle=O,n.easeCircleIn=d,n.easeCircleOut=I,n.easeCircleInOut=O,n.easeBounce=x,n.easeBounceIn=l,n.easeBounceOut=x,n.easeBounceInOut=w,n.easeBack=F,n.easeBackIn=A,n.easeBackOut=D,n.easeBackInOut=F,n.easeElastic=N,n.easeElasticIn=K,n.easeElasticOut=N,n.easeElasticInOut=R,Object.defineProperty(n,"__esModule",{value:!0})}); -------------------------------------------------------------------------------- /js/demo.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | var path = document.getElementById('path'), 4 | segment = new Segment(path), 5 | begin = document.getElementById('begin'), 6 | end = document.getElementById('end'), 7 | duration = document.getElementById('duration'), 8 | easing = document.getElementById('easing'), 9 | draw = document.getElementById('draw'), 10 | random = document.getElementById('random'), 11 | length = path.getTotalLength(), 12 | randomBegin, 13 | randomEnd; 14 | 15 | draw.onclick = function(){ 16 | segment.draw(begin.value, end.value, duration.value, {easing: d3[easing.value]}); 17 | }; 18 | 19 | random.onclick = function(){ 20 | randomBegin = getRandomInt(0, length); 21 | randomEnd = getRandomInt(0, length); 22 | segment.draw(randomBegin, randomEnd, duration.value, {easing: d3[easing.value]}); 23 | }; 24 | 25 | function getRandomInt(min, max) { 26 | return Math.floor(Math.random() * (max - min + 1)) + min; 27 | } 28 | 29 | })(); 30 | -------------------------------------------------------------------------------- /js/highlight.pack.js: -------------------------------------------------------------------------------- 1 | !function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define("hljs",[],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){return/^(no-?highlight|plain|text)$/i.test(e)}function i(e){var n,t,r,i=e.className+" ";if(i+=e.parentNode?e.parentNode.className:"",t=/\blang(?:uage)?-([\w-]+)\b/i.exec(i))return w(t[1])?t[1]:"no-highlight";for(i=i.split(/\s+/),n=0,r=i.length;r>n;n++)if(w(i[n])||a(i[n]))return i[n]}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3==i.nodeType?a+=i.nodeValue.length:1==i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function u(e){l+=""}function c(e){("start"==e.event?o:u)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(o)}else"start"==g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):Object.keys(a.k).forEach(function(e){c(e,a.k[e])}),a.k=u}a.lR=t(a.l||/\b\w+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function l(e,t,a,i){function o(e,n){for(var t=0;t";return i+=e+'">',i+n+o}function p(){if(!L.k)return n(M);var e="",t=0;L.lR.lastIndex=0;for(var r=L.lR.exec(M);r;){e+=n(M.substr(t,r.index-t));var a=g(L,r);a?(B+=a[1],e+=h(a[0],n(r[0]))):e+=n(r[0]),t=L.lR.lastIndex,r=L.lR.exec(M)}return e+n(M.substr(t))}function d(){var e="string"==typeof L.sL;if(e&&!x[L.sL])return n(M);var t=e?l(L.sL,M,!0,y[L.sL]):f(M,L.sL.length?L.sL:void 0);return L.r>0&&(B+=t.r),e&&(y[L.sL]=t.top),h(t.language,t.value,!1,!0)}function b(){return void 0!==L.sL?d():p()}function v(e,t){var r=e.cN?h(e.cN,"",!0):"";e.rB?(k+=r,M=""):e.eB?(k+=n(t)+r,M=""):(k+=r,M=t),L=Object.create(e,{parent:{value:L}})}function m(e,t){if(M+=e,void 0===t)return k+=b(),0;var r=o(t,L);if(r)return k+=b(),v(r,t),r.rB?0:t.length;var a=u(L,t);if(a){var i=L;i.rE||i.eE||(M+=t),k+=b();do L.cN&&(k+=""),B+=L.r,L=L.parent;while(L!=a.parent);return i.eE&&(k+=n(t)),M="",a.starts&&v(a.starts,""),i.rE?0:t.length}if(c(t,L))throw new Error('Illegal lexeme "'+t+'" for mode "'+(L.cN||"")+'"');return M+=t,t.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,L=i||N,y={},k="";for(R=L;R!=N;R=R.parent)R.cN&&(k=h(R.cN,"",!0)+k);var M="",B=0;try{for(var C,j,I=0;;){if(L.t.lastIndex=I,C=L.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}for(m(t.substr(I)),R=L;R.parent;R=R.parent)R.cN&&(k+="");return{r:B,value:k,language:e,top:L}}catch(O){if(-1!=O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function f(e,t){t=t||E.languages||Object.keys(x);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(w(n)){var t=l(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function g(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function h(e,n,t){var r=n?R[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function p(e){var n=i(e);if(!a(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?l(n,r,!0):f(r),s=u(t);if(s.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(s,u(p),r)}o.value=g(o.value),e.innerHTML=o.value,e.className=h(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=x[n]=t(e);r.aliases&&r.aliases.forEach(function(e){R[e]=n})}function N(){return Object.keys(x)}function w(e){return e=(e||"").toLowerCase(),x[e]||x[R[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},x={},R={};return e.highlight=l,e.highlightAuto=f,e.fixMarkup=g,e.highlightBlock=p,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("scss",function(e){var t="[a-zA-Z-][a-zA-Z0-9_-]*",i={cN:"variable",b:"(\\$"+t+")\\b"},r={cN:"function",b:t+"\\(",rB:!0,eE:!0,e:"\\("},o={cN:"hexcolor",b:"#[0-9A-Fa-f]+"};({cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[r,o,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"important",b:"!important"}]}});return{cI:!0,i:"[=/|']",c:[e.CLCM,e.CBCM,r,{cN:"id",b:"\\#[A-Za-z0-9_-]+",r:0},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"tag",b:"\\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video)\\b",r:0},{cN:"pseudo",b:":(visited|valid|root|right|required|read-write|read-only|out-range|optional|only-of-type|only-child|nth-of-type|nth-last-of-type|nth-last-child|nth-child|not|link|left|last-of-type|last-child|lang|invalid|indeterminate|in-range|hover|focus|first-of-type|first-line|first-letter|first-child|first|enabled|empty|disabled|default|checked|before|after|active)"},{cN:"pseudo",b:"::(after|before|choices|first-letter|first-line|repeat-index|repeat-item|selection|value)"},i,{cN:"attribute",b:"\\b(z-index|word-wrap|word-spacing|word-break|width|widows|white-space|visibility|vertical-align|unicode-bidi|transition-timing-function|transition-property|transition-duration|transition-delay|transition|transform-style|transform-origin|transform|top|text-underline-position|text-transform|text-shadow|text-rendering|text-overflow|text-indent|text-decoration-style|text-decoration-line|text-decoration-color|text-decoration|text-align-last|text-align|tab-size|table-layout|right|resize|quotes|position|pointer-events|perspective-origin|perspective|page-break-inside|page-break-before|page-break-after|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-y|overflow-x|overflow-wrap|overflow|outline-width|outline-style|outline-offset|outline-color|outline|orphans|order|opacity|object-position|object-fit|normal|none|nav-up|nav-right|nav-left|nav-index|nav-down|min-width|min-height|max-width|max-height|mask|marks|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|letter-spacing|left|justify-content|initial|inherit|ime-mode|image-orientation|image-resolution|image-rendering|icon|hyphens|height|font-weight|font-variant-ligatures|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-language-override|font-kerning|font-feature-settings|font-family|font|float|flex-wrap|flex-shrink|flex-grow|flex-flow|flex-direction|flex-basis|flex|filter|empty-cells|display|direction|cursor|counter-reset|counter-increment|content|column-width|column-span|column-rule-width|column-rule-style|column-rule-color|column-rule|column-gap|column-fill|column-count|columns|color|clip-path|clip|clear|caption-side|break-inside|break-before|break-after|box-sizing|box-shadow|box-decoration-break|bottom|border-width|border-top-width|border-top-style|border-top-right-radius|border-top-left-radius|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-radius|border-left-width|border-left-style|border-left-color|border-left|border-image-width|border-image-source|border-image-slice|border-image-repeat|border-image-outset|border-image|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-right-radius|border-bottom-left-radius|border-bottom-color|border-bottom|border|background-size|background-repeat|background-position|background-origin|background-image|background-color|background-clip|background-attachment|background-blend-mode|background|backface-visibility|auto|animation-timing-function|animation-play-state|animation-name|animation-iteration-count|animation-fill-mode|animation-duration|animation-direction|animation-delay|animation|align-self|align-items|align-content)\\b",i:"[^\\s]"},{cN:"value",b:"\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b"},{cN:"value",b:":",e:";",c:[r,i,o,e.CSSNM,e.QSM,e.ASM,{cN:"important",b:"!important"}]},{cN:"at_rule",b:"@",e:"[{;]",k:"mixin include extend for if else each while charset import debug media page content font-face namespace warn",c:[r,i,e.QSM,e.ASM,o,e.CSSNM,{cN:"preprocessor",b:"\\s[A-Za-z0-9_.-]+",r:0}]}]}});hljs.registerLanguage("xml",function(t){var s="[A-Za-z0-9\\._:-]+",c={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php"},e={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},t.C("",{r:10}),{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[e],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[e],starts:{e:"",rE:!0,sL:["actionscript","javascript","handlebars"]}},c,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},e]}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\$",rB:!0,eE:!0,e:"\\("},r={cN:"rule",b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"id",b:/\#[A-Za-z0-9_-]+/},{cN:"class",b:/\.[A-Za-z0-9_-]+/},{cN:"attr_selector",b:/\[/,e:/\]/,i:"$"},{cN:"pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\($"']+/},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:/\S/,c:[e.CBCM,r]}]}});hljs.registerLanguage("javascript",function(e){return{aliases:["js"],k:{keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},c:[{cN:"pi",r:10,b:/^\s*['"]use (strict|asm)['"]/},e.ASM,e.QSM,{cN:"string",b:"`",e:"`",c:[e.BE,{cN:"subst",b:"\\$\\{",e:"\\}"}]},e.CLCM,e.CBCM,{cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{b:/\s*[);\]]/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/$/,e:/$/,eB:!0,eE:!0,c:[e.CLCM,e.CBCM]}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+e.IR,r:0},{bK:"import",e:"[;$]",k:"import from as",c:[e.ASM,e.QSM]},{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]}],i:/#/}}); -------------------------------------------------------------------------------- /js/segment.js: -------------------------------------------------------------------------------- 1 | /** 2 | * segment - A JavaScript library to draw and animate SVG path strokes 3 | * @version v1.1.3 4 | * @link https://github.com/lmgonzalves/segment 5 | * @license MIT 6 | */ 7 | 8 | (function(root, factory) { 9 | if (typeof define === 'function' && define.amd) { 10 | define([], factory); 11 | } else if (typeof module === 'object' && module.exports) { 12 | module.exports = factory(); 13 | } else { 14 | root.Segment = factory(); 15 | } 16 | }(this, function () { 17 | 18 | function Segment(path, begin, end, circular){ 19 | this.path = path; 20 | this.reset(); 21 | this.begin = typeof begin !== 'undefined' ? this.valueOf(begin) : 0; 22 | this.end = typeof end !== 'undefined' ? this.valueOf(end) : this.length; 23 | this.circular = typeof circular !== 'undefined' ? circular : false; 24 | this.timer = null; 25 | this.animationTimer = null; 26 | this.draw(this.begin, this.end, 0, {circular: this.circular}); 27 | } 28 | 29 | Segment.prototype = { 30 | reset: function(){ 31 | this.length = this.path.getTotalLength(); 32 | this.path.style.strokeDashoffset = this.length * 2; 33 | }, 34 | 35 | draw: function(begin, end, duration, options){ 36 | this.circular = options && options.hasOwnProperty('circular') ? options.circular : false; 37 | if(duration){ 38 | this.stop(); 39 | 40 | var that = this; 41 | var delay = options && options.hasOwnProperty('delay') ? parseFloat(options.delay) * 1000 : 0; 42 | if(delay){ 43 | delete options.delay; 44 | this.timer = setTimeout(function(){ 45 | that.draw(begin, end, duration, options); 46 | }, delay); 47 | return this.timer; 48 | } 49 | 50 | this.startTime = new Date(); 51 | this.initBegin = this.begin; 52 | this.initEnd = this.end; 53 | this.finalBegin = this.valueOf(begin); 54 | this.finalEnd = this.valueOf(end); 55 | this.pausedTime = 0; 56 | this.duration = duration; 57 | this.easing = options && options.hasOwnProperty('easing') ? options.easing : null; 58 | this.update = options && options.hasOwnProperty('update') ? options.update : null; 59 | this.callback = options && options.hasOwnProperty('callback') ? options.callback : null; 60 | 61 | this.animationTimer = requestAnimationFrame(this.play.bind(this)); 62 | }else{ 63 | this.path.style.strokeDasharray = this.strokeDasharray(begin, end); 64 | } 65 | }, 66 | 67 | play: function() { 68 | var now = new Date(); 69 | if (this.pausedTime) { 70 | this.startTime.setMilliseconds(this.startTime.getMilliseconds() + (now - this.pausedTime)); 71 | this.pausedTime = 0; 72 | } 73 | var elapsed = (now - this.startTime) / 1000; 74 | var time = (elapsed / parseFloat(this.duration)); 75 | var t = time; 76 | 77 | if(typeof this.easing === 'function'){ 78 | t = this.easing(t); 79 | } 80 | 81 | if(time > 1){ 82 | t = 1; 83 | this.stop(); 84 | }else{ 85 | this.animationTimer = requestAnimationFrame(this.play.bind(this)); 86 | } 87 | 88 | this.drawStep(t); 89 | 90 | if(time > 1 && typeof this.callback === 'function'){ 91 | return this.callback.call(this); 92 | } 93 | }, 94 | 95 | pause: function() { 96 | if (this.animationTimer) { 97 | this.stop(); 98 | this.pausedTime = new Date(); 99 | } 100 | }, 101 | 102 | resume: function() { 103 | if (!this.animationTimer) { 104 | this.animationTimer = requestAnimationFrame(this.play.bind(this)); 105 | } 106 | }, 107 | 108 | stop: function(){ 109 | cancelAnimationFrame(this.animationTimer); 110 | this.animationTimer = null; 111 | clearTimeout(this.timer); 112 | this.timer = null; 113 | }, 114 | 115 | drawStep: function(t) { 116 | this.begin = this.initBegin + (this.finalBegin - this.initBegin) * t; 117 | this.end = this.initEnd + (this.finalEnd - this.initEnd) * t; 118 | 119 | this.begin = this.begin < 0 && !this.circular ? 0 : this.begin; 120 | this.begin = this.begin > this.length && !this.circular ? this.length : this.begin; 121 | this.end = this.end < 0 && !this.circular ? 0 : this.end; 122 | this.end = this.end > this.length && !this.circular ? this.length : this.end; 123 | 124 | if (this.end - this.begin <= this.length && this.end - this.begin > 0) { 125 | this.draw(this.begin, this.end, 0, {circular: this.circular}); 126 | } else { 127 | if (this.circular && this.end - this.begin > this.length) { 128 | this.draw(0, this.length, 0, {circular: this.circular}); 129 | } else { 130 | this.draw(this.begin + (this.end - this.begin), this.end - (this.end - this.begin), 0, {circular: this.circular}); 131 | } 132 | } 133 | 134 | if(typeof this.update === 'function'){ 135 | this.update(this); 136 | } 137 | }, 138 | 139 | strokeDasharray: function(begin, end){ 140 | this.begin = this.valueOf(begin); 141 | this.end = this.valueOf(end); 142 | if(this.circular){ 143 | var division = this.begin > this.end || (this.begin < 0 && this.begin < this.length * -1) 144 | ? parseInt(this.begin / parseInt(this.length)) : parseInt(this.end / parseInt(this.length)); 145 | if(division !== 0){ 146 | this.begin = this.begin - this.length * division; 147 | this.end = this.end - this.length * division; 148 | } 149 | } 150 | if(this.end > this.length){ 151 | var plus = this.end - this.length; 152 | return [this.length, this.length, plus, this.begin - plus, this.end - this.begin].join(' '); 153 | } 154 | if(this.begin < 0){ 155 | var minus = this.length + this.begin; 156 | if(this.end < 0){ 157 | return [this.length, this.length + this.begin, this.end - this.begin, minus - this.end, this.end - this.begin, this.length].join(' '); 158 | }else{ 159 | return [this.length, this.length + this.begin, this.end - this.begin, minus - this.end, this.length].join(' '); 160 | } 161 | } 162 | return [this.length, this.length + this.begin, this.end - this.begin].join(' '); 163 | }, 164 | 165 | valueOf: function(input){ 166 | var val = parseFloat(input); 167 | if(typeof input === 'string' || input instanceof String){ 168 | if(~input.indexOf('%')){ 169 | var arr; 170 | if(~input.indexOf('+')){ 171 | arr = input.split('+'); 172 | val = this.percent(arr[0]) + parseFloat(arr[1]); 173 | }else if(~input.indexOf('-')){ 174 | arr = input.split('-'); 175 | if(arr.length === 3){ 176 | val = -this.percent(arr[1]) - parseFloat(arr[2]); 177 | }else{ 178 | val = arr[0] ? this.percent(arr[0]) - parseFloat(arr[1]) : -this.percent(arr[1]); 179 | } 180 | }else{ 181 | val = this.percent(input); 182 | } 183 | } 184 | } 185 | return val; 186 | }, 187 | 188 | percent: function(value){ 189 | return parseFloat(value) / 100 * this.length; 190 | } 191 | }; 192 | 193 | return Segment; 194 | 195 | })); 196 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "segment-js", 3 | "version": "1.1.3", 4 | "description": "A JavaScript library to draw and animate SVG path strokes", 5 | "main": "dist/segment.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/lmgonzalves/segment.git" 9 | }, 10 | "keywords": [ 11 | "svg", 12 | "path", 13 | "stroke", 14 | "animation" 15 | ], 16 | "author": "lmgonzalves", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/lmgonzalves/segment/issues" 20 | }, 21 | "homepage": "https://github.com/lmgonzalves/segment", 22 | "engine": { 23 | "node": ">=0.10.22" 24 | }, 25 | "devDependencies": { 26 | "gulp": "^3.8.8", 27 | "gulp-sass": "^0.7.3", 28 | "gulp-autoprefixer": "1.0.0", 29 | "gulp-uglify": "^0.3.1", 30 | "browser-sync": "^1.3.7", 31 | "gulp-rename": "~1.2.2", 32 | "gulp-insert": "~0.5.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/_media.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding: 0 20px; 4 | box-sizing: border-box; 5 | } 6 | 7 | @media (min-width: 540px) { 8 | .svg-container{ 9 | width: 474px; 10 | padding-top: 200px; 11 | } 12 | } 13 | 14 | @media (min-width: 768px) { 15 | .container { 16 | width: 720px; 17 | } 18 | } 19 | 20 | @media (min-width: 992px) { 21 | .container { 22 | width: 970px; 23 | } 24 | } 25 | 26 | @media (min-width: 1200px) { 27 | .container { 28 | width: 1170px; 29 | } 30 | } -------------------------------------------------------------------------------- /scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | // 4 | // 1. Set default font family to sans-serif. 5 | // 2. Prevent iOS and IE text size adjust after device orientation change, 6 | // without disabling user zoom. 7 | // 8 | 9 | html { 10 | font-family: sans-serif; // 1 11 | -ms-text-size-adjust: 100%; // 2 12 | -webkit-text-size-adjust: 100%; // 2 13 | } 14 | 15 | // 16 | // Remove default margin. 17 | // 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | // HTML5 display definitions 24 | // ========================================================================== 25 | 26 | // 27 | // Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | // Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | // and Firefox. 30 | // Correct `block` display not defined for `main` in IE 11. 31 | // 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | // 50 | // 1. Correct `inline-block` display not defined in IE 8/9. 51 | // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | // 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; // 1 59 | vertical-align: baseline; // 2 60 | } 61 | 62 | // 63 | // Prevent modern browsers from displaying `audio` without controls. 64 | // Remove excess height in iOS 5 devices. 65 | // 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | // 73 | // Address `[hidden]` styling not present in IE 8/9/10. 74 | // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | // 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | // Links 83 | // ========================================================================== 84 | 85 | // 86 | // Remove the gray background color from active links in IE 10. 87 | // 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | // 94 | // Improve readability of focused elements when they are also in an 95 | // active/hover state. 96 | // 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | // Text-level semantics 104 | // ========================================================================== 105 | 106 | // 107 | // Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | // 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | // 115 | // Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | // 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | // 124 | // Address styling not present in Safari and Chrome. 125 | // 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | // 132 | // Address variable `h1` font-size and margin within `section` and `article` 133 | // contexts in Firefox 4+, Safari, and Chrome. 134 | // 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | // 142 | // Address styling not present in IE 8/9. 143 | // 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | // 151 | // Address inconsistent and variable font size in all browsers. 152 | // 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | // 159 | // Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | // 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | // Embedded content 179 | // ========================================================================== 180 | 181 | // 182 | // Remove border when inside `a` element in IE 8/9/10. 183 | // 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | // 190 | // Correct overflow not hidden in IE 9/10/11. 191 | // 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | // Grouping content 198 | // ========================================================================== 199 | 200 | // 201 | // Address margin not present in IE 8/9 and Safari. 202 | // 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | // 209 | // Address differences between Firefox and other browsers. 210 | // 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | // 218 | // Contain overflow in all browsers. 219 | // 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | // 226 | // Address odd `em`-unit font size rendering in all browsers. 227 | // 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | // Forms 238 | // ========================================================================== 239 | 240 | // 241 | // Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | // styling of `select`, unless a `border` property is set. 243 | // 244 | 245 | // 246 | // 1. Correct color not being inherited. 247 | // Known issue: affects color of disabled elements. 248 | // 2. Correct font properties not being inherited. 249 | // 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | // 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; // 1 258 | font: inherit; // 2 259 | margin: 0; // 3 260 | } 261 | 262 | // 263 | // Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | // 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | // 271 | // Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | // All other form control elements do not inherit `text-transform` values. 273 | // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | // Correct `select` style inheritance in Firefox. 275 | // 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | // 283 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | // and `video` controls. 285 | // 2. Correct inability to style clickable `input` types in iOS. 286 | // 3. Improve usability and consistency of cursor style between image-type 287 | // `input` and others. 288 | // 289 | 290 | button, 291 | html input[type="button"], // 1 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; // 2 295 | cursor: pointer; // 3 296 | } 297 | 298 | // 299 | // Re-set default cursor for disabled elements. 300 | // 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | // 308 | // Remove inner padding and border in Firefox 4+. 309 | // 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | // 318 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | // the UA stylesheet. 320 | // 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | // 327 | // It's recommended that you don't attempt to style these elements. 328 | // Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | // 330 | // 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | // 2. Remove excess padding in IE 8/9/10. 332 | // 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; // 1 337 | padding: 0; // 2 338 | } 339 | 340 | // 341 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | // `font-size` values of the `input`, it causes the cursor style of the 343 | // decrement button to change from `default` to `text`. 344 | // 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | // 352 | // 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | // 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | // 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; // 1 358 | box-sizing: content-box; //2 359 | } 360 | 361 | // 362 | // Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | // Safari (but not Chrome) clips the cancel button when the search input has 364 | // padding (and `textfield` appearance). 365 | // 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | // 373 | // Define consistent border, margin, and padding. 374 | // 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | // 383 | // 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | // 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | // 386 | 387 | legend { 388 | border: 0; // 1 389 | padding: 0; // 2 390 | } 391 | 392 | // 393 | // Remove default vertical scrollbar in IE 8/9/10/11. 394 | // 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | // 401 | // Don't inherit the `font-weight` (applied by a rule above). 402 | // NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | // 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | // Tables 410 | // ========================================================================== 411 | 412 | // 413 | // Remove most spacing between table cells. 414 | // 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /scss/_tomorrow.scss: -------------------------------------------------------------------------------- 1 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ 2 | 3 | /* Tomorrow Comment */ 4 | .hljs-comment { 5 | color: #8e908c; 6 | } 7 | 8 | /* Tomorrow Red */ 9 | .hljs-variable, 10 | .hljs-attribute, 11 | .hljs-tag, 12 | .hljs-regexp, 13 | .ruby .hljs-constant, 14 | .xml .hljs-tag .hljs-title, 15 | .xml .hljs-pi, 16 | .xml .hljs-doctype, 17 | .html .hljs-doctype, 18 | .css .hljs-id, 19 | .css .hljs-class, 20 | .css .hljs-pseudo { 21 | color: #c82829; 22 | } 23 | 24 | /* Tomorrow Orange */ 25 | .hljs-number, 26 | .hljs-preprocessor, 27 | .hljs-pragma, 28 | .hljs-built_in, 29 | .hljs-literal, 30 | .hljs-params, 31 | .hljs-constant { 32 | color: #f5871f; 33 | } 34 | 35 | /* Tomorrow Yellow */ 36 | .ruby .hljs-class .hljs-title, 37 | .css .hljs-rule .hljs-attribute { 38 | color: #eab700; 39 | } 40 | 41 | /* Tomorrow Green */ 42 | .hljs-string, 43 | .hljs-value, 44 | .hljs-inheritance, 45 | .hljs-header, 46 | .hljs-name, 47 | .ruby .hljs-symbol, 48 | .xml .hljs-cdata { 49 | color: #718c00; 50 | } 51 | 52 | /* Tomorrow Aqua */ 53 | .hljs-title, 54 | .css .hljs-hexcolor { 55 | color: #3e999f; 56 | } 57 | 58 | /* Tomorrow Blue */ 59 | .hljs-function, 60 | .python .hljs-decorator, 61 | .python .hljs-title, 62 | .ruby .hljs-function .hljs-title, 63 | .ruby .hljs-title .hljs-keyword, 64 | .perl .hljs-sub, 65 | .javascript .hljs-title, 66 | .coffeescript .hljs-title { 67 | color: #4271ae; 68 | } 69 | 70 | /* Tomorrow Purple */ 71 | .hljs-keyword, 72 | .javascript .hljs-function { 73 | color: #8959a8; 74 | } 75 | 76 | .hljs { 77 | display: block; 78 | overflow-x: auto; 79 | background: white; 80 | color: #4d4d4c; 81 | padding: 0.5em; 82 | -webkit-text-size-adjust: none; 83 | } 84 | 85 | .coffeescript .javascript, 86 | .javascript .xml, 87 | .tex .hljs-formula, 88 | .xml .javascript, 89 | .xml .vbscript, 90 | .xml .css, 91 | .xml .hljs-cdata { 92 | opacity: 0.5; 93 | } 94 | -------------------------------------------------------------------------------- /scss/demo.scss: -------------------------------------------------------------------------------- 1 | @import "normalize"; 2 | @import "tomorrow"; 3 | 4 | body{ 5 | font-family: 'DejaVu Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 6 | background-color: #ffffff; 7 | color: #34495E; 8 | } 9 | 10 | .container{ 11 | a{ 12 | color: inherit; 13 | text-decoration: none; 14 | border-bottom: 2px solid rgba(52, 73, 94, 0.5); 15 | transition: 0.2s; 16 | &:hover{ 17 | border-color: rgba(52, 73, 94, 1); 18 | } 19 | } 20 | } 21 | 22 | h1{ 23 | text-align: center; 24 | } 25 | 26 | h2{ 27 | margin-top: 50px; 28 | &:first-child{ 29 | margin-top: 20px; 30 | } 31 | } 32 | 33 | p{ 34 | line-height: 1.3; 35 | } 36 | 37 | div.description{ 38 | position: relative; 39 | top: -10px; 40 | text-align: center; 41 | color: rgba(52, 73, 94, 0.6); 42 | line-height: 1.3; 43 | } 44 | 45 | .svg-container { 46 | width: 100%; 47 | height: 0; 48 | padding-top: 43%; 49 | position: relative; 50 | margin: 0 auto; 51 | } 52 | 53 | svg { 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | } 58 | 59 | .demo-code{ 60 | text-align: center; 61 | color: #4D4D4C; 62 | margin: 10px 0 0; 63 | .code-snippet { 64 | display: inline-block; 65 | padding: 20px 30px; 66 | background-color: rgba(239, 236, 244, 1); 67 | select { 68 | border: none; 69 | color: darken(#2980b9, 10%); 70 | background-color: darken(rgba(239, 236, 244, 1), 5%); 71 | text-align: center; 72 | -webkit-appearance: none; 73 | -moz-appearance: none; 74 | text-indent: 1px; 75 | text-overflow: ''; 76 | padding-right: 7px; 77 | cursor: pointer; 78 | option{ 79 | border: none; 80 | } 81 | } 82 | } 83 | } 84 | 85 | .selectable{ 86 | position: relative; 87 | display: inline-block; 88 | select { 89 | &:hover { 90 | + .tooltip { 91 | opacity: 1; 92 | } 93 | } 94 | } 95 | .tooltip { 96 | position: absolute; 97 | bottom: 160%; 98 | left: 50%; 99 | transform: translateX(-50%); 100 | color: #ffffff; 101 | text-emphasis-color: transparent; 102 | font-size: 13px; 103 | padding: 2px 5px; 104 | border-radius: 3px; 105 | white-space: nowrap; 106 | background-color: #707F8E; 107 | cursor: default; 108 | pointer-events: none; 109 | opacity: 0; 110 | transition: 0.2s; 111 | &::selection{ 112 | background: transparent; 113 | } 114 | &:before{ 115 | position: absolute; 116 | content: ''; 117 | width: 10px; 118 | height: 10px; 119 | bottom: -2px; 120 | left: 50%; 121 | transform: translateX(-50%) rotate(45deg); 122 | background-color: #707F8E; 123 | z-index: -1; 124 | } 125 | } 126 | } 127 | 128 | button, a.documentation-link{ 129 | display: block; 130 | background-color: #2980b9; 131 | border: none; 132 | outline: none; 133 | color: #ffffff; 134 | padding: 12px 0; 135 | width: 300px; 136 | max-width: 100%; 137 | text-align: center; 138 | margin: 20px auto; 139 | border-radius: 3px; 140 | cursor: pointer; 141 | transition: 0.3s; 142 | &.bordered{ 143 | padding: 10px 0; 144 | background-color: transparent; 145 | border: 2px solid #3498db; 146 | color: #34495E; 147 | opacity: 0.8; 148 | } 149 | &:hover{ 150 | color: #ffffff; 151 | background-color: #3498db; 152 | border-color: transparent; 153 | opacity: 1; 154 | } 155 | } 156 | 157 | code { 158 | &.inline-code { 159 | padding: 2px 5px; 160 | background-color: rgba(239, 236, 244, 1); 161 | } 162 | &.hljs{ 163 | padding: 1.5em; 164 | background-color: rgba(239, 236, 244, 1); 165 | } 166 | } 167 | 168 | footer{ 169 | font-size: 14px; 170 | text-align: center; 171 | padding: 15px 0 14px; 172 | margin-top: 20px; 173 | color: rgba(52, 73, 94, 0.5); 174 | background-color: rgba(52, 73, 94, 0.05); 175 | } 176 | 177 | @import "media"; --------------------------------------------------------------------------------