├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── gulpfile.js ├── package.json ├── public ├── favicon.ico ├── index.html ├── jquery.drawsvg.js ├── jquery.drawsvg.min.js ├── share.jpg └── style.css └── src └── jquery.drawsvg.js /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | end_of_line = lf 4 | indent_size = 2 5 | indent_style = space 6 | trim_trailing_whitespace = true -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "node": true, 6 | "jquery": true 7 | }, 8 | "extends": "eslint:recommended", 9 | "rules": { 10 | "accessor-pairs": "error", 11 | "array-bracket-spacing": [ 12 | "error", 13 | "never" 14 | ], 15 | "array-callback-return": "error", 16 | "arrow-body-style": "error", 17 | "arrow-parens": "error", 18 | "arrow-spacing": "error", 19 | "block-scoped-var": "error", 20 | "block-spacing": "error", 21 | "brace-style": [ 22 | "error", 23 | "1tbs" 24 | ], 25 | "callback-return": "error", 26 | "camelcase": "error", 27 | "class-methods-use-this": "error", 28 | "comma-dangle": "error", 29 | "comma-spacing": [ 30 | "error", 31 | { 32 | "after": true, 33 | "before": false 34 | } 35 | ], 36 | "comma-style": [ 37 | "error", 38 | "last" 39 | ], 40 | "complexity": "error", 41 | "computed-property-spacing": [ 42 | "error", 43 | "never" 44 | ], 45 | "consistent-return": "error", 46 | "consistent-this": "off", 47 | "curly": "off", 48 | "default-case": "error", 49 | "dot-location": "error", 50 | "dot-notation": "error", 51 | "eol-last": [ 52 | "error", 53 | "never" 54 | ], 55 | "eqeqeq": "error", 56 | "func-call-spacing": "error", 57 | "func-names": "off", 58 | "func-style": [ 59 | "error", 60 | "expression" 61 | ], 62 | "generator-star-spacing": "error", 63 | "global-require": "off", 64 | "guard-for-in": "error", 65 | "handle-callback-err": "error", 66 | "id-blacklist": "error", 67 | "id-length": "off", 68 | "id-match": "error", 69 | "indent": "off", 70 | "init-declarations": "error", 71 | "jsx-quotes": "error", 72 | "key-spacing": "error", 73 | "keyword-spacing": [ 74 | "error", 75 | { 76 | "after": true, 77 | "before": true 78 | } 79 | ], 80 | "line-comment-position": "error", 81 | "linebreak-style": [ 82 | "error", 83 | "unix" 84 | ], 85 | "lines-around-comment": "off", 86 | "lines-around-directive": "error", 87 | "max-depth": "error", 88 | "max-len": "off", 89 | "max-lines": "error", 90 | "max-nested-callbacks": "error", 91 | "max-params": "error", 92 | "max-statements": "error", 93 | "max-statements-per-line": "error", 94 | "multiline-ternary": "off", 95 | "new-cap": "error", 96 | "new-parens": "error", 97 | "newline-after-var": "off", 98 | "newline-before-return": "off", 99 | "newline-per-chained-call": "error", 100 | "no-alert": "error", 101 | "no-array-constructor": "error", 102 | "no-bitwise": "error", 103 | "no-caller": "error", 104 | "no-catch-shadow": "error", 105 | "no-confusing-arrow": "error", 106 | "no-continue": "error", 107 | "no-div-regex": "error", 108 | "no-duplicate-imports": "error", 109 | "no-else-return": "error", 110 | "no-empty-function": "error", 111 | "no-eq-null": "error", 112 | "no-eval": "error", 113 | "no-extend-native": "error", 114 | "no-extra-bind": "error", 115 | "no-extra-label": "error", 116 | "no-extra-parens": "off", 117 | "no-floating-decimal": "error", 118 | "no-global-assign": "error", 119 | "no-implicit-globals": "error", 120 | "no-implied-eval": "error", 121 | "no-inline-comments": "error", 122 | "no-inner-declarations": [ 123 | "error", 124 | "functions" 125 | ], 126 | "no-invalid-this": "off", 127 | "no-iterator": "error", 128 | "no-label-var": "error", 129 | "no-labels": "error", 130 | "no-lone-blocks": "error", 131 | "no-lonely-if": "error", 132 | "no-loop-func": "error", 133 | "no-magic-numbers": "off", 134 | "no-mixed-operators": "error", 135 | "no-mixed-requires": "error", 136 | "no-multi-spaces": "error", 137 | "no-multi-str": "error", 138 | "no-multiple-empty-lines": "error", 139 | "no-negated-condition": "off", 140 | "no-nested-ternary": "error", 141 | "no-new": "error", 142 | "no-new-func": "error", 143 | "no-new-object": "error", 144 | "no-new-require": "error", 145 | "no-new-wrappers": "error", 146 | "no-octal-escape": "error", 147 | "no-param-reassign": "off", 148 | "no-path-concat": "error", 149 | "no-plusplus": "error", 150 | "no-process-env": "error", 151 | "no-process-exit": "error", 152 | "no-proto": "error", 153 | "no-prototype-builtins": "error", 154 | "no-restricted-globals": "error", 155 | "no-restricted-imports": "error", 156 | "no-restricted-modules": "error", 157 | "no-restricted-properties": "error", 158 | "no-restricted-syntax": "error", 159 | "no-return-assign": "error", 160 | "no-script-url": "error", 161 | "no-self-compare": "error", 162 | "no-sequences": "error", 163 | "no-shadow": "off", 164 | "no-shadow-restricted-names": "error", 165 | "no-spaced-func": "error", 166 | "no-sync": "error", 167 | "no-tabs": "error", 168 | "no-template-curly-in-string": "error", 169 | "no-ternary": "off", 170 | "no-throw-literal": "error", 171 | "no-trailing-spaces": "error", 172 | "no-undef-init": "error", 173 | "no-undefined": "off", 174 | "no-underscore-dangle": "off", 175 | "no-unmodified-loop-condition": "error", 176 | "no-unneeded-ternary": "error", 177 | "no-unsafe-negation": "error", 178 | "no-use-before-define": "error", 179 | "no-useless-call": "off", 180 | "no-useless-computed-key": "error", 181 | "no-useless-concat": "error", 182 | "no-useless-constructor": "error", 183 | "no-useless-escape": "error", 184 | "no-useless-rename": "error", 185 | "no-var": "off", 186 | "no-void": "error", 187 | "no-warning-comments": "error", 188 | "no-whitespace-before-property": "error", 189 | "no-with": "error", 190 | "object-curly-newline": "off", 191 | "object-curly-spacing": [ 192 | "error", 193 | "always" 194 | ], 195 | "object-property-newline": "error", 196 | "object-shorthand": "off", 197 | "one-var": "off", 198 | "one-var-declaration-per-line": "error", 199 | "operator-assignment": "error", 200 | "operator-linebreak": [ 201 | "error", 202 | "after" 203 | ], 204 | "padded-blocks": "off", 205 | "prefer-arrow-callback": "off", 206 | "prefer-const": "error", 207 | "prefer-numeric-literals": "error", 208 | "prefer-reflect": "off", 209 | "prefer-rest-params": "error", 210 | "prefer-spread": "error", 211 | "prefer-template": "off", 212 | "quote-props": "off", 213 | "quotes": [ 214 | "error", 215 | "single" 216 | ], 217 | "radix": "error", 218 | "require-jsdoc": "error", 219 | "rest-spread-spacing": "error", 220 | "semi": "error", 221 | "semi-spacing": "error", 222 | "sort-imports": "error", 223 | "sort-keys": "off", 224 | "sort-vars": "off", 225 | "space-before-blocks": "error", 226 | "space-before-function-paren": "off", 227 | "space-in-parens": "off", 228 | "space-infix-ops": "off", 229 | "space-unary-ops": "error", 230 | "spaced-comment": [ 231 | "error", 232 | "always" 233 | ], 234 | "strict": "off", 235 | "symbol-description": "error", 236 | "template-curly-spacing": "error", 237 | "unicode-bom": [ 238 | "error", 239 | "never" 240 | ], 241 | "valid-jsdoc": "error", 242 | "vars-on-top": "off", 243 | "wrap-iife": [ 244 | "error", 245 | "any" 246 | ], 247 | "wrap-regex": "error", 248 | "yield-star-spacing": "error", 249 | "yoda": [ 250 | "error", 251 | "never" 252 | ] 253 | } 254 | }; -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .npm-debug.log 3 | tmp 4 | .publish 5 | *.sublime-project 6 | *.sublime-workspace -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Leonardo Santos 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery DrawSVG 2 | 3 | This plugin uses the jQuery built-in animation engine to transition the `stroke` on every `` inside the selected `` element, using `stroke-dasharray` and `stroke-dashoffset` properties. 4 | 5 | * Weighs less than 2KB minified and 800 bytes gzipped. 6 | * Easy to use. 7 | * Easing and stagger support. 8 | * Free! 9 | 10 | ## Usage 11 | 12 | Include jQuery DrawSVG after jQuery 13 | 14 | ```html 15 | 16 | 17 | ``` 18 | 19 | Initialize the plugin on the element you want to animate and store in a variable 20 | 21 | ```js 22 | var mySVG = $('#my_svg_element').drawsvg(); 23 | ``` 24 | 25 | Run the animation 26 | 27 | ```js 28 | mySVG.drawsvg('animate'); 29 | ``` 30 | 31 | Look at the demos for more advanced usages. 32 | 33 | ## Options 34 | 35 | | Option | Type | Default | Description | 36 | | ---------- | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | 37 | | `duration` | Integer | `1000` | The time to complete the animation of each path. | 38 | | `stagger` | Integer | `200` | Delay to start animating each individual path. | 39 | | `easing` | String | `swing` | Which easing function each path will use to transition.
Use [jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/) for different easing functions. | 40 | | `reverse` | Boolean | `false` | Direction that the line will be drawn. | 41 | | `callback` | Function | `function() {}` | A function to call once the animation has been completed. | 42 | 43 | ## Demos 44 | 45 | [Simple usage](http://codepen.io/lcdsantos/pen/zvGXbr/) 46 | 47 | [Draw on scroll](http://codepen.io/lcdsantos/pen/zvGQYB/) 48 | 49 | [Callback example](http://codepen.io/lcdsantos/pen/vNNXrm/) 50 | 51 | [Animate mask path](http://codepen.io/lcdsantos/pen/xwwEJw/) 52 | 53 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-drawsvg", 3 | "version": "1.1.0", 4 | "homepage": "https://github.com/lcdsantos/jquery-drawsvg", 5 | "authors": [ 6 | "Leonardo Santos " 7 | ], 8 | "description": "Lightweight, simple to use jQuery plugin to animate SVG paths", 9 | "main": "public/jquery.drawsvg.js", 10 | "keywords": [ 11 | "svg", 12 | "path", 13 | "animation", 14 | "draw", 15 | "transition" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ], 25 | "dependencies": { 26 | "jquery": "1.9.1 - 2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var $ = require('gulp-load-plugins')(); 3 | var fs = require('fs'); 4 | 5 | var getPackageJson = function() { 6 | return JSON.parse(fs.readFileSync('./package.json', 'utf8')); 7 | }; 8 | 9 | /*====================================== 10 | Bump version 11 | ======================================*/ 12 | gulp.task('bump', function() { 13 | var pkg = getPackageJson(); 14 | var newVersion = $.util.env.version || pkg.version; 15 | 16 | return gulp.src(['./package.json', './bower.json']) 17 | .pipe($.bump({ 18 | version: newVersion 19 | })) 20 | .pipe(gulp.dest('./')); 21 | }); 22 | 23 | /*====================================== 24 | JavaScript 25 | ======================================*/ 26 | gulp.task('js', ['bump'], function() { 27 | var pkg = getPackageJson(); 28 | var banner = [ 29 | '/*!', 30 | ' * jQuery DrawSVG v<%= pkg.version %> (<%= new Date().toString().substr(4, 11) %>) - http://lcdsantos.github.io/jquery-drawsvg/', 31 | ' *', 32 | ' * Copyright (c) <%= new Date().getFullYear() %> Leonardo Santos; MIT License', 33 | ' *', 34 | ' */\n\n' 35 | ].join('\n'); 36 | 37 | return gulp.src('src/jquery.drawsvg.js') 38 | .pipe($.plumber()) 39 | .pipe($.header(banner, { pkg: pkg })) 40 | .pipe(gulp.dest('./public')) 41 | .pipe($.connect.reload()); 42 | }); 43 | 44 | gulp.task('js-min', ['bump'], function() { 45 | var pkg = getPackageJson(); 46 | 47 | return gulp.src('src/jquery.drawsvg.js') 48 | .pipe($.plumber()) 49 | .pipe($.uglify()) 50 | .pipe($.header('/*! jQuery DrawSVG v<%= pkg.version %> (<%= new Date().toJSON().slice(0,10) %>) - git.io/vGFa5 - Copyright (c) <%= new Date().getFullYear() %> Leonardo Santos - MIT License */\n', { pkg: pkg })) 51 | .pipe($.rename({ suffix: '.min' })) 52 | .pipe(gulp.dest('./public')) 53 | .pipe($.connect.reload()); 54 | }); 55 | 56 | /*====================================== 57 | Live preview 58 | ======================================*/ 59 | gulp.task('serve', function() { 60 | $.connect.server({ 61 | root: './public', 62 | livereload: true 63 | }); 64 | }); 65 | 66 | gulp.task('html', function() { 67 | return gulp.src('./public/*.html') 68 | .pipe($.connect.reload()); 69 | }); 70 | 71 | gulp.task('css', function() { 72 | return gulp.src('./public/*.css') 73 | .pipe($.connect.reload()); 74 | }) 75 | 76 | /*====================================== 77 | Watch 78 | ======================================*/ 79 | gulp.task('watch', ['serve'], function() { 80 | gulp.watch(['*.css'], { cwd: './public/' }, ['css']); 81 | gulp.watch(['*.html'], { cwd: './public/' }, ['html']); 82 | gulp.watch(['*.js'], { cwd: './src/' }, ['js', 'js-min']); 83 | }); 84 | 85 | /*====================================== 86 | ZIP 87 | ======================================*/ 88 | gulp.task('zip', function() { 89 | var pkg = getPackageJson(); 90 | 91 | return gulp.src('./public/*') 92 | .pipe($.zip('drawsvg_v' + pkg.version + '.zip')) 93 | .pipe(gulp.dest('./')); 94 | }); 95 | 96 | /*====================================== 97 | GitHub Pages 98 | ======================================*/ 99 | gulp.task('gh-pages', function() { 100 | return gulp.src('./public/**/*') 101 | .pipe($.ghPages()); 102 | }); 103 | 104 | /*====================================== 105 | Default tasks 106 | ======================================*/ 107 | gulp.task('build', ['js', 'js-min']); 108 | gulp.task('default', ['build', 'watch']); 109 | gulp.task('release', ['bump', 'build', 'zip']); 110 | gulp.task('publish', ['gh-pages']); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drawsvg", 3 | "version": "1.1.0", 4 | "title": "jQuery DrawSVG", 5 | "main": "public/jquery.drawsvg.js", 6 | "author": { 7 | "email": "leocs.1991@gmail.com", 8 | "name": "Leonardo Santos" 9 | }, 10 | "license": "MIT", 11 | "description": "Lightweight, simple to use jQuery plugin to animate SVG paths", 12 | "keywords": [ 13 | "svg", 14 | "animate", 15 | "animation", 16 | "path", 17 | "jquery-plugin", 18 | "ecosystem:jquery" 19 | ], 20 | "docs": "http://lcdsantos.github.io/jquery-drawsvg/", 21 | "demo": "http://lcdsantos.github.io/jquery-drawsvg/#demos", 22 | "bugs": "https://github.com/lcdsantos/jquery-drawsvg/issues", 23 | "homepage": "http://lcdsantos.github.io/jquery-drawsvg/", 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/lcdsantos/jquery-drawsvg.git" 27 | }, 28 | "dependencies": { 29 | "jquery": "^3.1.1" 30 | }, 31 | "devDependencies": { 32 | "gulp": "^3.9.1", 33 | "gulp-bump": "^2.4.0", 34 | "gulp-connect": "^5.0.0", 35 | "gulp-gh-pages": "^0.5.4", 36 | "gulp-header": "^1.8.8", 37 | "gulp-load-plugins": "^1.3.0", 38 | "gulp-plumber": "^1.1.0", 39 | "gulp-rename": "^1.2.2", 40 | "gulp-uglify": "^2.0.0", 41 | "gulp-util": "^3.0.7", 42 | "gulp-zip": "^3.2.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lcdsantos/jquery-drawsvg/a334df92cd7b197044cca891057049081e07e4c2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | jQuery DrawSVG 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 |

jQuery DrawSVG

35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 | 79 |
80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
95 | 96 |
97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |
113 |
114 | 115 |

Lightweight, simple to use jQuery plugin to animate SVG paths

116 | 117 |
118 | Download (ZIP) 119 | Download (TAR) 120 | View on GitHub 121 |
122 | jquery.drawsvg.js 123 | jquery.drawsvg.min.js 124 |
125 |
126 |
127 |
128 | 129 |

Icons by Luboš Volkov

130 |
131 | 132 |
133 |
134 | 142 |
143 |
144 | 145 |
146 |
147 |
148 |

FEATURES

149 | 150 |

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.

151 | 152 |
153 | 154 |
    155 |
  • 156 |

    Weights less than 2KB minified and 800 bytes gzipped.

    157 |
    • 158 | 159 |
  • 160 |

    Easy to use.

    161 |
    • 162 | 163 |
  • 164 |

    Easing and stagger support.

    165 |
    • 166 | 167 |
  • 168 |

    Free!

    169 |
    • 170 |
171 | 172 | 193 |
194 | 195 |
196 |
197 |

USAGE

198 | 199 |
    200 |
  • 201 |

    Include jQuery DrawSVG after jQuery

    202 | 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="jquery.drawsvg.js"></script>
    203 |
    • 204 |
  • 205 |

    Initialize the plugin on the <svg> element you want to animate and store in a variable

    206 | 
    var mySVG = $('#my_svg_element').drawsvg();
    207 |
    • 208 |
  • 209 |

    Run the animation

    210 | 
    mySVG.drawsvg('animate');
    211 |
    • 212 |
213 | 214 |

Look at the demos for more advanced usages.

215 |
216 | 217 |
218 |
219 |

OPTIONS

220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 |
OptionTypeDefaultDescription
durationInteger1000The time to complete the animation of each path.
staggerInteger200Delay to start animating each individual path.
easingStringswingWhich easing function each path will use to transition.
Use jQuery Easing Plugin for different easing functions.
reverseBooleanfalseDirection that the line will be drawn.
callbackFunctionfunction() {}A function to call once the animation has been completed.
264 |
265 | 266 |
267 |
268 |

DEMOS

269 | 270 |

Simple usage

271 |

See the Pen zvGXbr by Leonardo Santos (@lcdsantos) on CodePen.

272 | 273 |

Draw on scroll

274 |

See the Pen zvGQYB by Leonardo Santos (@lcdsantos) on CodePen.

275 | 276 |

Callback example

277 |

See the Pen vNNXrm by Leonardo Santos (@lcdsantos) on CodePen.

278 | 279 |

Animate mask path

280 |

See the Pen xwwEJw by Leonardo Santos (@lcdsantos) on CodePen.

281 |
282 |
283 | 284 |
285 |
286 |
287 |

Project maintained by Leonardo Santos
288 | Github • Twitter • Email

289 |

Hosted on GitHub Pages

290 |
291 |
292 |
293 | 294 |
295 | 296 | 297 | 298 | 299 | 369 | 370 | -------------------------------------------------------------------------------- /public/jquery.drawsvg.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery DrawSVG v1.1.0 (Oct 05 2016) - http://lcdsantos.github.io/jquery-drawsvg/ 3 | * 4 | * Copyright (c) 2016 Leonardo Santos; MIT License 5 | * 6 | */ 7 | 8 | (function(factory) { 9 | /* global define */ 10 | /* istanbul ignore next */ 11 | if ( typeof define === 'function' && define.amd ) { 12 | define(['jquery'], factory); 13 | } else if ( typeof module === 'object' && module.exports ) { 14 | // Node/CommonJS 15 | module.exports = function( root, jQuery ) { 16 | if ( jQuery === undefined ) { 17 | if ( typeof window !== 'undefined' ) { 18 | jQuery = require('jquery'); 19 | } else { 20 | jQuery = require('jquery')(root); 21 | } 22 | } 23 | factory(jQuery); 24 | return jQuery; 25 | }; 26 | } else { 27 | // Browser globals 28 | factory(jQuery); 29 | } 30 | }(function($) { 31 | 'use strict'; 32 | 33 | var pluginName = 'drawsvg', 34 | defaults = { 35 | duration: 1000, 36 | stagger: 200, 37 | easing: 'swing', 38 | reverse: false, 39 | callback: $.noop 40 | }, 41 | DrawSvg = (function() { 42 | var fn = function fn(elm, options) { 43 | var _this = this, 44 | opts = $.extend(defaults, options); 45 | 46 | _this.$elm = $(elm); 47 | 48 | if ( !_this.$elm.is('svg') ) 49 | return; 50 | 51 | _this.options = opts; 52 | _this.$paths = _this.$elm.find('path'); 53 | 54 | _this.totalDuration = opts.duration + (opts.stagger * _this.$paths.length); 55 | _this.duration = opts.duration / _this.totalDuration; 56 | 57 | _this.$paths.each(function(index, elm) { 58 | var pathLength = elm.getTotalLength(); 59 | 60 | elm.pathLen = pathLength; 61 | elm.delay = (opts.stagger * index) / _this.totalDuration; 62 | elm.style.strokeDasharray = [pathLength, pathLength].join(' '); 63 | elm.style.strokeDashoffset = pathLength; 64 | }); 65 | 66 | _this.$elm.attr('class', function(index, classNames) { 67 | return [classNames, pluginName + '-initialized'].join(' '); 68 | }); 69 | }; 70 | 71 | fn.prototype.getVal = function(p, easing) { 72 | return 1 - $.easing[easing](p, p, 0, 1, 1); 73 | }; 74 | 75 | fn.prototype.progress = function progress(prog) { 76 | var _this = this, 77 | opts = _this.options, 78 | duration = _this.duration; 79 | 80 | _this.$paths.each(function(index, elm) { 81 | var elmStyle = elm.style; 82 | 83 | if ( prog === 1 ) { 84 | elmStyle.strokeDashoffset = 0; 85 | } else if ( prog === 0 ) { 86 | elmStyle.strokeDashoffset = elm.pathLen + 'px'; 87 | } else if ( prog >= elm.delay && prog <= duration + elm.delay ) { 88 | var p = ((prog - elm.delay) / duration); 89 | elmStyle.strokeDashoffset = ((_this.getVal(p, opts.easing) * elm.pathLen) * (opts.reverse ? -1 : 1)) + 'px'; 90 | } 91 | }); 92 | }; 93 | 94 | fn.prototype.animate = function animate() { 95 | var _this = this; 96 | 97 | _this.$elm.attr('class', function(index, classNames) { 98 | return [classNames, pluginName + '-animating'].join(' '); 99 | }); 100 | 101 | $({ len: 0 }).animate({ 102 | len: 1 103 | }, { 104 | easing: 'linear', 105 | duration: _this.totalDuration, 106 | step: function(now, fx) { 107 | _this.progress.call(_this, now / fx.end); 108 | }, 109 | complete: function() { 110 | _this.options.callback.call(this); 111 | 112 | _this.$elm.attr('class', function(index, classNames) { 113 | return classNames.replace(pluginName + '-animating', ''); 114 | }); 115 | } 116 | }); 117 | }; 118 | 119 | return fn; 120 | })(); 121 | 122 | // A really lightweight plugin wrapper around the constructor, 123 | // preventing against multiple instantiations 124 | $.fn[pluginName] = function(method, args) { 125 | return this.each(function() { 126 | var data = $.data(this, pluginName); 127 | 128 | ( data && ''+method === method && data[method] ) ? 129 | data[method](args) : 130 | $.data(this, pluginName, new DrawSvg(this, method)); 131 | }); 132 | }; 133 | })); -------------------------------------------------------------------------------- /public/jquery.drawsvg.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery DrawSVG v1.1.0 (2016-10-05) - git.io/vGFa5 - Copyright (c) 2016 Leonardo Santos - MIT License */ 2 | !function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof module&&module.exports?module.exports=function(e,n){return void 0===n&&(n="undefined"!=typeof window?require("jquery"):require("jquery")(e)),t(n),n}:t(jQuery)}(function(t){"use strict";var e="drawsvg",n={duration:1e3,stagger:200,easing:"swing",reverse:!1,callback:t.noop},a=function(){var a=function(a,o){var i=this,r=t.extend(n,o);i.$elm=t(a),i.$elm.is("svg")&&(i.options=r,i.$paths=i.$elm.find("path"),i.totalDuration=r.duration+r.stagger*i.$paths.length,i.duration=r.duration/i.totalDuration,i.$paths.each(function(t,e){var n=e.getTotalLength();e.pathLen=n,e.delay=r.stagger*t/i.totalDuration,e.style.strokeDasharray=[n,n].join(" "),e.style.strokeDashoffset=n}),i.$elm.attr("class",function(t,n){return[n,e+"-initialized"].join(" ")}))};return a.prototype.getVal=function(e,n){return 1-t.easing[n](e,e,0,1,1)},a.prototype.progress=function(t){var e=this,n=e.options,a=e.duration;e.$paths.each(function(o,i){var r=i.style;if(1===t)r.strokeDashoffset=0;else if(0===t)r.strokeDashoffset=i.pathLen+"px";else if(t>=i.delay&&t<=a+i.delay){var s=(t-i.delay)/a;r.strokeDashoffset=e.getVal(s,n.easing)*i.pathLen*(n.reverse?-1:1)+"px"}})},a.prototype.animate=function(){var n=this;n.$elm.attr("class",function(t,n){return[n,e+"-animating"].join(" ")}),t({len:0}).animate({len:1},{easing:"linear",duration:n.totalDuration,step:function(t,e){n.progress.call(n,t/e.end)},complete:function(){n.options.callback.call(this),n.$elm.attr("class",function(t,n){return n.replace(e+"-animating","")})}})},a}();t.fn[e]=function(n,o){return this.each(function(){var i=t.data(this,e);i&&""+n===n&&i[n]?i[n](o):t.data(this,e,new a(this,n))})}}); -------------------------------------------------------------------------------- /public/share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lcdsantos/jquery-drawsvg/a334df92cd7b197044cca891057049081e07e4c2/public/share.jpg -------------------------------------------------------------------------------- /public/style.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | img,legend{border:0}legend,td,th{padding:0}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,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.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:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{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;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0} 3 | 4 | .cf:before, .cf:after, 5 | .container:before, .container:after { 6 | content: " "; 7 | display: table; 8 | } 9 | 10 | .clear, .cf:after, .container:after { 11 | clear: both; 12 | } 13 | 14 | .cf, .container { 15 | zoom: 1; 16 | } 17 | 18 | body { 19 | font-size: 100%; 20 | font-family: 'Open Sans', sans-serif; 21 | color: #444; 22 | } 23 | 24 | h1 { 25 | font-size: 2.25em; 26 | margin: 2em 0; 27 | } 28 | 29 | h2 { 30 | font-size: 1.88em; 31 | margin: 2em 0; 32 | } 33 | 34 | .container { 35 | max-width: 960px; 36 | margin: auto; 37 | } 38 | 39 | a { 40 | color: inherit; 41 | font: inherit; 42 | text-decoration: none; 43 | } 44 | 45 | .btn { 46 | display: inline-block; 47 | vertical-align: top; 48 | zoom: 1; 49 | *display: inline; 50 | padding: 10px 20px; 51 | font-size: 16px; 52 | border: 1px solid #FFF; 53 | border-radius: 4px; 54 | -webkit-transition: .2s; 55 | transition: .2s; 56 | } 57 | 58 | .btn + .btn { 59 | margin-left: 20px; 60 | } 61 | 62 | .btn:hover { 63 | background: #FFF; 64 | border-color: #3f51b5; 65 | color: #3F51B5; 66 | } 67 | 68 | header { 69 | background: #FFF; 70 | text-align: center; 71 | position: absolute; 72 | z-index: 999; 73 | bottom: 0; 74 | left: 0; 75 | right: 0; 76 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 77 | } 78 | 79 | header.affix { 80 | position: fixed; 81 | top: 0; 82 | bottom: auto; 83 | } 84 | 85 | header ul { 86 | margin: 0; 87 | padding: 18px 0; 88 | font-size: 0; 89 | } 90 | 91 | header li { 92 | display: inline-block; 93 | vertical-align: middle; 94 | zoom: 1; 95 | *display: inline; 96 | text-transform: uppercase; 97 | font-size: 16px; 98 | line-height: 24px; 99 | padding: 0 20px; 100 | } 101 | 102 | header li a { 103 | -webkit-transition: .2s; 104 | transition: .2s; 105 | } 106 | 107 | header li a:hover { 108 | opacity: 0.5; 109 | } 110 | 111 | /* Intro */ 112 | .intro { 113 | background: #3f51b5; 114 | text-align: center; 115 | width: 100%; 116 | height: 900px; 117 | height: 100vh; 118 | position: relative; 119 | } 120 | 121 | .intro .icons-author { 122 | position: absolute; 123 | bottom: 70px; 124 | right: 10px; 125 | margin: 0; 126 | color: rgba(255, 255, 255, 0.5); 127 | font-size: 12px; 128 | } 129 | 130 | .intro .icons-author a:hover { 131 | color: #FFF; 132 | } 133 | 134 | .intro .container { 135 | position: absolute; 136 | top: 0; 137 | right: 0; 138 | left: 0; 139 | bottom: 60px; 140 | } 141 | 142 | .intro .overlay { 143 | width: 100%; 144 | height: 100%; 145 | position: relative; 146 | z-index: 10; 147 | color: #FFF; 148 | display: table; 149 | } 150 | 151 | .intro .overlay .inner { 152 | height: 100%; 153 | display: table-cell; 154 | vertical-align: middle; 155 | } 156 | 157 | .intro .items-wrapper { 158 | width: 220px; 159 | height: 220px; 160 | position: relative; 161 | margin: auto; 162 | } 163 | 164 | .intro .overlay h1 { 165 | margin: 0; 166 | } 167 | 168 | .intro .overlay p { 169 | margin: 0 auto; 170 | max-width: 560px; 171 | } 172 | 173 | .intro .btn-group { 174 | margin-top: 18px; 175 | font-size: 0; 176 | } 177 | 178 | .intro .btn-group .link { 179 | display: inline-block; 180 | vertical-align: top; 181 | zoom: 1; 182 | *display: inline; 183 | font-size: 14px; 184 | margin: 20px 10px 0; 185 | opacity: 0.6; 186 | } 187 | 188 | .intro .btn-group .link:hover { 189 | opacity: 1; 190 | } 191 | 192 | .intro .item, 193 | .intro .item svg { 194 | position: absolute; 195 | top: 0; 196 | left: 0; 197 | right: 0; 198 | bottom: 0; 199 | } 200 | 201 | .intro .item svg { 202 | visibility: hidden; 203 | } 204 | 205 | .intro .item svg.drawsvg-initialized { 206 | visibility: visible; 207 | } 208 | 209 | .intro .item { 210 | -webkit-transition: .6s; 211 | transition: .6s; 212 | opacity: 0; 213 | top: 30px; 214 | } 215 | 216 | @-webkit-keyframes comeIn { 217 | from { 218 | -webkit-transform: translate3d(0, -30px, 0); 219 | transform: translate3d(0, -30px, 0); 220 | } 221 | to { 222 | -webkit-transform: translate3d(0, 0, 0); 223 | transform: translate3d(0, 0, 0); 224 | } 225 | } 226 | 227 | @-o-keyframes comeIn { 228 | from { 229 | -o-transform: translate3d(0, -30px, 0); 230 | transform: translate3d(0, -30px, 0); 231 | } 232 | to { 233 | -o-transform: translate3d(0, 0, 0); 234 | transform: translate3d(0, 0, 0); 235 | } 236 | } 237 | 238 | @-moz-keyframes comeIn { 239 | from { 240 | transform: translate3d(0, -30px, 0); 241 | } 242 | to { 243 | transform: translate3d(0, 0, 0); 244 | } 245 | } 246 | 247 | @keyframes comeIn { 248 | from { 249 | transform: translate3d(0, -30px, 0); 250 | } 251 | to { 252 | transform: translate3d(0, 0, 0); 253 | } 254 | } 255 | 256 | .intro .item.active { 257 | top: 0; 258 | opacity: 1; 259 | -webkit-animation: comeIn .6s; 260 | animation: comeIn .6s; 261 | } 262 | 263 | .intro .item svg { 264 | margin: auto; 265 | } 266 | 267 | .social-buttons { 268 | list-style: none; 269 | margin: 60px auto; 270 | text-align: center; 271 | padding: 0; 272 | } 273 | 274 | .social-buttons li { 275 | display: inline-block; 276 | vertical-align: top; 277 | zoom: 1; 278 | *display: inline; 279 | margin: 0 5px; 280 | } 281 | 282 | .social-buttons a { 283 | color: #FFF; 284 | } 285 | 286 | .fb-btn .fb_iframe_widget { 287 | font-size: 0; 288 | } 289 | 290 | .gh-btn iframe { 291 | border: 0; 292 | overflow: hidden; 293 | vertical-align: top; 294 | } 295 | 296 | /* Main content */ 297 | main a { 298 | color: #3f51b5; 299 | -webkit-transition: .2s; 300 | transition: .2s; 301 | } 302 | 303 | main a:hover { 304 | color: #9fa8da; 305 | } 306 | 307 | .anchor { 308 | position: relative; 309 | top: -60px; 310 | } 311 | 312 | .steps, .steps li { 313 | list-style: none; 314 | } 315 | 316 | .steps { 317 | padding: 0; 318 | margin: 2em 0; 319 | } 320 | 321 | .steps li { 322 | margin: 40px 0; 323 | } 324 | 325 | .table-options { 326 | width: 100%; 327 | margin-top: 2em; 328 | table-layout: fixed; 329 | } 330 | 331 | .table-options th { 332 | border-bottom: 1px solid #F0F0F0; 333 | padding: 0 0 20px; 334 | text-align: left; 335 | } 336 | 337 | .table-options td { 338 | padding: 20px 0; 339 | } 340 | 341 | .table-options a { 342 | color: #3f51b5; 343 | } 344 | 345 | .cp_embed_iframe { 346 | vertical-align: bottom; 347 | margin: 0 0 40px; 348 | } 349 | 350 | pre { 351 | padding: 10px; 352 | background: #FEFEFE; 353 | border: 1px solid #F0F0F0; 354 | color: #666; 355 | } 356 | 357 | footer { 358 | color: #888; 359 | margin-top: 2em; 360 | font-size: 14px; 361 | } 362 | 363 | footer a:hover { 364 | color: #444; 365 | } 366 | 367 | footer .container { 368 | border-top: 1px solid #F0F0F0; 369 | padding-top: 10px; 370 | padding-bottom: 10px; 371 | } -------------------------------------------------------------------------------- /src/jquery.drawsvg.js: -------------------------------------------------------------------------------- 1 | (function(factory) { 2 | /* global define */ 3 | if ( typeof define === 'function' && define.amd ) { 4 | define(['jquery'], factory); 5 | } else if ( typeof module === 'object' && module.exports ) { 6 | // Node/CommonJS 7 | module.exports = function( root, jQuery ) { 8 | if ( jQuery === undefined ) { 9 | if ( typeof window !== 'undefined' ) { 10 | jQuery = require('jquery'); 11 | } else { 12 | jQuery = require('jquery')(root); 13 | } 14 | } 15 | factory(jQuery); 16 | return jQuery; 17 | }; 18 | } else { 19 | // Browser globals 20 | factory(jQuery); 21 | } 22 | }(function($) { 23 | 'use strict'; 24 | 25 | var pluginName = 'drawsvg', 26 | defaults = { 27 | duration: 1000, 28 | stagger: 200, 29 | easing: 'swing', 30 | reverse: false, 31 | callback: $.noop 32 | }, 33 | DrawSvg = (function() { 34 | var fn = function fn(elm, options) { 35 | var _this = this, 36 | opts = $.extend(defaults, options); 37 | 38 | _this.$elm = $(elm); 39 | 40 | if ( !_this.$elm.is('svg') ) 41 | return; 42 | 43 | _this.options = opts; 44 | _this.$paths = _this.$elm.find('path'); 45 | 46 | _this.totalDuration = opts.duration + (opts.stagger * _this.$paths.length); 47 | _this.duration = opts.duration / _this.totalDuration; 48 | 49 | _this.$paths.each(function(index, elm) { 50 | var pathLength = elm.getTotalLength(); 51 | 52 | elm.pathLen = pathLength; 53 | elm.delay = (opts.stagger * index) / _this.totalDuration; 54 | elm.style.strokeDasharray = [pathLength, pathLength].join(' '); 55 | elm.style.strokeDashoffset = pathLength; 56 | }); 57 | 58 | _this.$elm.attr('class', function(index, classNames) { 59 | return [classNames, pluginName + '-initialized'].join(' '); 60 | }); 61 | }; 62 | 63 | fn.prototype.getVal = function(p, easing) { 64 | return 1 - $.easing[easing](p, p, 0, 1, 1); 65 | }; 66 | 67 | fn.prototype.progress = function progress(prog) { 68 | var _this = this, 69 | opts = _this.options, 70 | duration = _this.duration; 71 | 72 | _this.$paths.each(function(index, elm) { 73 | var elmStyle = elm.style; 74 | 75 | if ( prog === 1 ) { 76 | elmStyle.strokeDashoffset = 0; 77 | } else if ( prog === 0 ) { 78 | elmStyle.strokeDashoffset = elm.pathLen + 'px'; 79 | } else if ( prog >= elm.delay && prog <= duration + elm.delay ) { 80 | var p = ((prog - elm.delay) / duration); 81 | elmStyle.strokeDashoffset = ((_this.getVal(p, opts.easing) * elm.pathLen) * (opts.reverse ? -1 : 1)) + 'px'; 82 | } 83 | }); 84 | }; 85 | 86 | fn.prototype.animate = function animate() { 87 | var _this = this; 88 | 89 | _this.$elm.attr('class', function(index, classNames) { 90 | return [classNames, pluginName + '-animating'].join(' '); 91 | }); 92 | 93 | $({ len: 0 }).animate({ 94 | len: 1 95 | }, { 96 | easing: 'linear', 97 | duration: _this.totalDuration, 98 | step: function(now, fx) { 99 | _this.progress.call(_this, now / fx.end); 100 | }, 101 | complete: function() { 102 | _this.options.callback.call(this); 103 | 104 | _this.$elm.attr('class', function(index, classNames) { 105 | return classNames.replace(pluginName + '-animating', ''); 106 | }); 107 | } 108 | }); 109 | }; 110 | 111 | return fn; 112 | })(); 113 | 114 | // A really lightweight plugin wrapper around the constructor, 115 | // preventing against multiple instantiations 116 | $.fn[pluginName] = function(method, args) { 117 | return this.each(function() { 118 | var data = $.data(this, pluginName); 119 | 120 | ( data && ''+method === method && data[method] ) ? 121 | data[method](args) : 122 | $.data(this, pluginName, new DrawSvg(this, method)); 123 | }); 124 | }; 125 | })); --------------------------------------------------------------------------------