J. Voigt joyrexus

Simple demo of a compound animation controlled by mousemove events. Here, each of the two coordinates of a mouse move control distinct elements. Note how the y-coordinate delta scales both circle and radial line and simultaneously rotates this same radial line. The x-coordinate delta merely slides a 20-pixel circle along the horizon.

SVG-scripted variant of random walking bug.

First stab at using svg.js to recreate the algorithmic visualizations in Daniel Shiffman's The Nature of Code.

SVG-scripted variant of random walking bug.

First stab at using svg.js to recreate the algorithmic visualizations in Daniel Shiffman's The Nature of Code.

Extraction/conversion of a plotting visualization -- the nonlinear anecdote -- from @worrydream's Kill Math noodlings.

See also Evan Miller's response, Don't Kill Math.

Simple bouncing ball demo utilizing svg.js.

Click anywhere to pause/resume.

See example 1.1 in the Nature of Code.

Animated path drawing/erasing.

See Jake Archibald's article for more details.

Quick demo of a simple CSS transition and transform. See Animating CSS Transitions for an overview.

The container sets the animation's perspective and the inner pane is the element that actually flips, rotating 180 degrees around the Y-axis when the parent container is clicked.

Note that we're only using the -webkit vendor prefix, so this is only going to work in WebKit browsers.

Animate the movement of a bug along a path.

Demonstrates how to use the getTotalLength and getPointAtLength methods on SVG path elements to interpolate a point along an existing path.

Built with svg.js and inspired by @mbostock's much slicker D3-variants, here and here

Animate the movement of a bug along a curve while tracing/erasing path.

Demonstrates how to use the getTotalLength and getPointAtLength methods on SVG path elements to interpolate a point along an existing path ... as well as how to animate the path using "stroke-dash interpolation", previously demo-ed here.

Built with svg.js and inspired by @johan's much slicker D3-variant. Also check out @mbostock's Stroke Dash Interpolation block.

	class Base
	###
	Provides default options, mixins, and custom events.

	###
	defaults: {}

	constructor: (options) ->
	@setOptions options