Trying my hand at the Animated D3 Logo.
Created
April 4, 2016 01:27
-
-
Save danasilver/4c2d543ea6c50bea81d1363ab11004d4 to your computer and use it in GitHub Desktop.
Animated Ag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: MIT |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| stroke-width: 2px; | |
| fill: none; | |
| stroke-linecap: round; | |
| } | |
| .fill { | |
| stroke: #ccc; | |
| } | |
| .stroke { | |
| stroke: #000; | |
| } | |
| </style> | |
| <svg height="500" width="960" viewBox="-10 -10 120 120"> | |
| <defs> | |
| <path id="a1" d="M0,100 L25,0 L50,100" /> | |
| <path id="a2" d="M10,60 L40,60" /> | |
| <path id="g1" d="M50,35 A25,25 0 0 1 100,35 A25,25 0 0 1 50,35" /> | |
| <path id="g2" d="M100,15 L100,75 A25,25 0 0 1 50,75" /> | |
| </defs> | |
| <use class="fill" xlink:href="#a1" /> | |
| <use class="fill" xlink:href="#a2" /> | |
| <use class="fill" xlink:href="#g1" /> | |
| <use class="fill" xlink:href="#g2" /> | |
| <path class="stroke" style="display:none;" d="M0,100 L25,0 L50,100" /> | |
| <path class="stroke" style="display:none;" d="M10,60 L40,60" /> | |
| <path class="stroke" style="display:none;" d="M50,35 A25,25 0 0 1 100,35 A25,25 0 0 1 50,35" /> | |
| <path class="stroke" style="display:none;" id="g2" d="M100,15 L100,75 A25,25 0 0 1 50,75" /> | |
| </svg> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| d3.select(this) | |
| .on('load', animate); | |
| function animate() { | |
| var delay = 0, | |
| stroke = d3.selectAll('.stroke'); | |
| stroke.interrupt().transition(); | |
| stroke.transition().each(function() { | |
| var length = this.getTotalLength(), | |
| duration = length * 20; | |
| d3.select(this) | |
| .style('stroke-dasharray', '0,' + length) | |
| .transition() | |
| .delay(delay) | |
| .style('display', null) | |
| .duration(duration) | |
| .style('stroke-dasharray', length + ',' + length); | |
| delay += duration; | |
| }) | |
| .each('end', function() { | |
| if (this.id !== 'g2') | |
| return; | |
| setTimeout(function() { | |
| d3.selectAll('.stroke') | |
| .style('display', 'none'); | |
| animate(); | |
| }, 1000); | |
| }); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment