Since we are looking into creating web-based visualizations and animations from code, I decided to research some forms of web-based animations.
Modular SVG Animation Experiment – Mandala
By Dylan Cutler
Modular SVG animation pen (Cutler, 2017)
This example is made using HTML,CSS and Javascript. (Cutler, 2017)
I find this a particularly interesting example because of all the moving parts, how they all move in relation to each other and how they layer up.
Animated Background
By Marco Guglielmelli
Animated background in action (Guglielmelli, 2017)
This piece is created with CSS/Javascript/HTML. It is interactive; moving the mouse across the screen shows new areas of animated lines and points, growing brighter or darker as you move towards or away from them. (Guglielmelli, 2017)
Hexagon Fade
By Tina Anastopoulos
Hexagon fade example on codepen (Anastopoulos, 2017)
Created using HTML/CSS/Javascript and p5.js, Hexagon fade is an example of how p5.js can be used to create simple yet effective scaling visualizations. (Anastopoulos, 2017)
Rainbow Pinwheel – p5.js
By Tina Anastopoulos
Rainbow pinwheel interactive example on codepen (Anastopoulos, 2017)
Rainbow Pinwheel is a striking example of how interactive visualizations can be created using HTML/CSS/Js, and in this case, p5.js. In this example, you click and drag to create the effect of motion. (Anastopoulos, 2017)
Sources:
Cutler, D. (2017). Modular SVG Animation Experiment. [online] CodePen. Available at: https://codepen.io/DCtheTall/pen/KWpdRV [Accessed 26 Nov. 2017].
Guglielmelli, M. (2017). Animated Background. [online] CodePen. Available at: https://codepen.io/MarcoGuglielmelli/pen/lLCxy?limit=all&page=2&q=animation [Accessed 26 Nov. 2017].
Anastopoulos, T. (2017). Hexagon Fade. [online] CodePen. Available at: https://codepen.io/TWAIN/pen/RVjGYN?depth=everything&order=popularity&page=2&q=p5.js&show_forks=false [Accessed 26 Nov. 2017].
Anastopoulos, T. (2017). Rainbow Pinwheel – p5.js. [online] CodePen. Available at: https://codepen.io/TWAIN/pen/OpGayd?depth=everything&order=popularity&page=6&q=p5.js&show_forks=false [Accessed 26 Nov. 2017].
SField: 