Infinite argyle with random ColorBrewer and d3 4.0 color scales.
Noah Veltman
veltman
View README.md
A canvas version of this rainbow spinner.
View README.md
An Android-style loading spinner with a touch of rainbow.
Canvas would probably be a better idea.
View draw.js
| // Pipe to ffmpeg with something like: | |
| // node draw.js | ffmpeg -y -c:v png -f image2pipe -r 20 -i - -an -c:v libx264 -pix_fmt yuv420p -movflags +faststart myvideo.mp4 | |
| var Canvas = require("canvas"), | |
| d3 = require("d3"), | |
| topojson = require("topojson"), | |
| rw = require("rw"), | |
| world = require("./world-110m.json"); | |
| var width = 1280, |
View README.md
Animating a portion of a larger path with a four-part stroke-dasharray pattern.
View README.md
Animating a path with an arrowhead using stroke-dasharray and interpolation along the path for the arrow positioning. The translate is determined by a point along the length of the path and the rotation is determined by calculating the approximate tangent of the path using two nearby points.
See also: Animating along a path
View README.md
Moving elements along a path while maintaining orientation. For each arrow, the translate is determined by interpolating a point along the length of the path and the rotation is determined by calculating the approximate tangent of the path using two nearby points.
View README.md
Animating a path's dashed stroke using stroke-dasharray and stroke-dashoffset, similar to this example. This version ensures that there's no little "seam" at the end of a closed path by dynamically setting the dash array and the animation keyframe to a factor of the computed path length.
stroke-dashadjust might make this easier eventually.
View README.md
Animating a path's dashed stroke without JavaScript using stroke-dasharray and stroke-dashoffset. As long as you animate the offset to be equal to one full dash group (e.g. stroke-dasharray: 10,5 and stroke-dashoffset: -15), the animation will appear continuous.
Two caveats:
- You can only animate the dash "backwards" in this way, so you may need to reverse the path's direction for the desired effect.
- If the path is closed, you might get a tiny "seam" at the start/end of the path where the dash doesn't line up. To fix that, you can ensure that the dash group is a factor of the path length like in this example.
View index.html
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <style> | |
| path { | |
| fill: none; | |
| stroke-width: 2px; | |
| stroke-linejoin: round; |
NewerOlder