Zach Saucier ZachSaucier

Quick Presentation: SVG Animations For Kids

A few notes and ideas for talking about SVG animations to elementary school students⁠—no one is too young to appreciate and get excited about this stuff while learning that it's a real career option later!

Talking Points

The goal for the speaking part of the presentation is to share a bit about what you do for work, introduce the basics of SVG and coding basic shapes, and talk about the impact of animations.

The Job

Tell them about what you do day-to-day and how you got started
What's your favorite part of the job?
What was your favorite subject in school?

3D particles to a 2D canvas

HTML5 Canvas - Projecting 3D particles to a 2D canvas. from rectangleworld.com

added JQuery slider to resize

A Pen by borian on CodePen.

License.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);

	/**
	* Use the Web Storage API to save camera position and target between page refreshes.
	*
	* @param {Object} options
	* @param {*} options.camera - The camera you want to store the position of.
	* @param {*} [options.controls] - A controls object with a `.target` property.
	* @param {String} [options.name="main"] - An optional label. Useful if you want to store multiple cameras.
	* @param {Boolean} [options.session=true] - Indicates if you want to use local or session storage.
	* See https://developer.mozilla.org/en-US/docs/Web/API/Storage
	*/