https://github.com/gkjohnson/animated-svg-path-element

Polymer element that animates the drawing of SVG paths
https://github.com/gkjohnson/animated-svg-path-element

animation css html javascript polymer svg web webcomponents

Last synced: 2 months ago
JSON representation

Polymer element that animates the drawing of SVG paths

• Host: GitHub
• URL: https://github.com/gkjohnson/animated-svg-path-element
• Owner: gkjohnson
• Created: 2017-08-06T22:27:49.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-12T19:03:49.000Z (almost 9 years ago)
• Last Synced: 2025-11-13T22:54:22.757Z (7 months ago)
• Topics: animation, css, html, javascript, polymer, svg, web, webcomponents
• Language: JavaScript
• Homepage: https://gkjohnson.github.io/animated-svg-path-element/example/
• Size: 181 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# animated-svg-path-element

Polymer element that animates the drawing of SVG paths using the `stroke-dasharray` css attribute

![example](/docs/animation.gif)

[Demo here!](https://gkjohnson.github.io/animated-svg-path-element/example/)

## Use

Wrap an SVG tag in the `animated-svg-path` element and add the `order` attribute to decribe the order in which the paths are animated:

```html

  

    

    

  

```