Joey Cherdarchuk cherdarchuk

forked from cherdarchuk's block: Pulse Animations

The breathing square optical illusion. All 5 squares are the same size, however the background square appears to grow and shrink as it rotates even though its size never changes.

Click each shape above to move it to the front.

An ever so slight change to Scott Murray's implementation, to prevent shapes in the middle of the stack from fading back a little before fading to front.

SVG doesn’t include a concept of z-index, layering, or depth, except that elements that exist later in an SVG document are drawn “on top”. But when designing interactive pieces, we often want shapes that the user has selected / clicked / interacted with to be moved “on top,” to prevent occlusion and ensure visibility.

It’s easy to take an element and simply move it to the bottom of its parent container:

var moveToFront = function() {

	<!DOCTYPE html>
	<meta charset="utf-8">
	<canvas id="canvas"></canvas>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var num = 10000;

	var canvas = document.getElementById("canvas");
	var width = canvas.width = 960;
	var height = canvas.height = 500;

	license: gpl-3.0
	height: 600
	border: no