Netscapes: Art from code – Inspirations

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].

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s