meiriko · December 18, 2012 08:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 		<title>צנימי</title>
 		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
 		<style type="text/css">

 			body {
 				background: #222;
 			}

 			rect {
 				fill: none;
 				stroke-width: 2.5px;
 			}

 			path {
 				fill: none;
 				stroke-width: 3.5px;
 			}

 			circle {
 				fill: none;
 				stroke-width: 2.5px;
 			}

 		</style>
 	</head>
 	<body>
 		<script type="text/javascript">

 			var w = 1024,
 			h = 760,
 			z = d3.scale.category20c(),
 			i = 0;

 var svg = d3.select("body").append("svg:svg")
 .attr("width", w)
 .attr("height", h)
 .style("pointer-evem 0.5716916 0.0223518 c -0.0083682 0.0002261 -0.016818200000000002 0.0025134000000000003 -0.0246054 0.0070092 l -0.4987524 0.2879638 c -0.0249181 0.0143864 -0.0333699 0.0459775 -0.0189835 0.0708956 l 0.1699016 0.2943159 c 0.0143864 0.0249181 0.0460506 0.0333698 0.0709688 0.0189835 l 0.2606567 -0.15048 l 0 1.0997963 c 0 0.028773 0.0232123 0.0519855 0.0519855 0.0519855 l 0.9628967 0 c 0.0287729 0 0.051912200000000006 -0.0232124 0.051912200000000006 -0.0519855 l 0 -1.1013295 l 0.2633585 0.1520132 c 0.0249179 0.0143863 0.0565091 0.0059347 0.0708954 -0.0189835 l 0.1699017 -0.2943159 c 0.0143863 -0.0249181 0.0059348000000000005 -0.0565092 -0.0189835 -0.0708956 l -0.4986795 -0.2879638 c -0.010123 -0.0058445 -0.021391 -0.0079161 -0.0321259 -0.0066442 c -0.0020621 -0.0002469 -0.0041483 -0.000365 -0.006279 -0.000365 l -0.2758435 0 c -0.0040836 0.0327251 -0.0941113 0.0589215 -0.2043637 0.0589215 c -0.1102524 0 -0.2002072 -0.0261964 -0.2042908 -0.0589215 l -0.2783987 0 c -0.0016742 0 -0.0033322 0.0001386 -0.0049648999999999995 0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292nts", "all")
 .on("mousemove", particle);

 function particle() {
 	if( ++i % 3 ) {
 		return ;
 	}
 	var m = d3.svg.mouse(this);

 	var tDuration = 500 + Math.random()*2000 ;

 	svg.append("svg:path")
 		.attr( "transform" , "translate(" + m[0] + " " + m[1] + ") rotate(" + (i*3) + ")" )
 		.attr( "d" , "m -0.5716916 0.0223518 c -0.0083682 0.0002261 -0.016818200000000002 0.0025134000000000003 -0.0246054 0.0070092 l -0.4987524 0.2879638 c -0.0249181 0.0143864 -0.0333699 0.0459775 -0.0189835 0.0708956 l 0.1699016 0.2943159 c 0.0143864 0.0249181 0.0460506 0.0333698 0.0709688 0.0189835 l 0.2606567 -0.15048 l 0 1.0997963 c 0 0.028773 0.0232123 0.0519855 0.0519855 0.0519855 l 0.9628967 0 c 0.0287729 0 0.051912200000000006 -0.0232124 0.051912200000000006 -0.0519855 l 0 -1.1013295 l 0.2633585 0.1520132 c 0.0249179 0.0143863 0.0565091 0.0059347 0.0708954 -0.0189835 l 0.1699017 -0.2943159 c 0.0143863 -0.0249181 0.0059348000000000005 -0.0565092 -0.0189835 -0.0708956 l -0.4986795 -0.2879638 c -0.010123 -0.0058445 -0.021391 -0.0079161 -0.0321259 -0.0066442 c -0.0020621 -0.0002469 -0.0041483 -0.000365 -0.006279 -0.000365 l -0.2758435 0 c -0.0040836 0.0327251 -0.0941113 0.0589215 -0.2043637 0.0589215 c -0.1102524 0 -0.2002072 -0.0261964 -0.2042908 -0.0589215 l -0.2783987 0 c -0.0016742 0 -0.0033322 0.0001386 -0.0049648999999999995 0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292" )
 		.style( "stroke" , z(i) )
 		.style("stroke-opacity", 1)
 		.transition()
 		.duration(tDuration)
 		.attr( "d" , "m -57.16916 2.23518 c -0.83682 0.02261 -1.68182 0.25134 -2.46054 0.70092 l -49.87524 28.79638 c -2.49181 1.43864 -3.33699 4.59775 -1.89835 7.08956 l 16.99016 29.43159 c 1.43864 2.49181 4.60506 3.33698 7.09688 1.89835 l 26.06567 -15.048 l 0 109.97963 c 0 2.8773 2.32123 5.19855 5.19855 5.19855 l 96.28967 0 c 2.87729 0 5.19122 -2.32124 5.19122 -5.19855 l 0 -110.13295 l 26.33585 15.20132 c 2.49179 1.43863 5.65091 0.59347 7.08954 -1.89835 l 16.99017 -29.43159 c 1.43863 -2.49181 0.59348 -5.65092 -1.89835 -7.08956 l -49.86795 -28.79638 c -1.0123 -0.58445 -2.1391 -0.79161 -3.21259 -0.66442 c -0.20621 -0.02469 -0.41483 -0.0365 -0.6279 -0.0365 l -27.58435 0 c -0.40836 3.27251 -9.41113 5.89215 -20.43637 5.89215 c -11.02524 0 -20.02072 -2.61964 -20.42908 -5.89215 l -27.83987 0 c -0.16742 0 -0.33322 0.01386 -0.49649 0.0292 c -0.20724 -0.01952 -0.41132 -0.03486 -0.62064 -0.0292 z" )
 		.delay( 1 )
 		.ease(Math.sqrt)
 		.attr("r", 100)
 		.attr("transform","translate(" + m[0] + " " + m[1] + ") rotate(" + (i*3+180) +")" )
 		.style("stroke-opacity", 1e-6)
 		.remove();
 	}

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>צנימי</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
	<style type="text/css">

	body {
	background: #222;
	}

	rect {
	fill: none;
	stroke-width: 2.5px;
	}

	path {
	fill: none;
	stroke-width: 3.5px;
	}

	circle {
	fill: none;
	stroke-width: 2.5px;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 1024,
	h = 760,
	z = d3.scale.category20c(),
	i = 0;

	var svg = d3.select("body").append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.style("pointer-evem 0.5716916 0.0223518 c -0.0083682 0.0002261 -0.016818200000000002 0.0025134000000000003 -0.0246054 0.0070092 l -0.4987524 0.2879638 c -0.0249181 0.0143864 -0.0333699 0.0459775 -0.0189835 0.0708956 l 0.1699016 0.2943159 c 0.0143864 0.0249181 0.0460506 0.0333698 0.0709688 0.0189835 l 0.2606567 -0.15048 l 0 1.0997963 c 0 0.028773 0.0232123 0.0519855 0.0519855 0.0519855 l 0.9628967 0 c 0.0287729 0 0.051912200000000006 -0.0232124 0.051912200000000006 -0.0519855 l 0 -1.1013295 l 0.2633585 0.1520132 c 0.0249179 0.0143863 0.0565091 0.0059347 0.0708954 -0.0189835 l 0.1699017 -0.2943159 c 0.0143863 -0.0249181 0.0059348000000000005 -0.0565092 -0.0189835 -0.0708956 l -0.4986795 -0.2879638 c -0.010123 -0.0058445 -0.021391 -0.0079161 -0.0321259 -0.0066442 c -0.0020621 -0.0002469 -0.0041483 -0.000365 -0.006279 -0.000365 l -0.2758435 0 c -0.0040836 0.0327251 -0.0941113 0.0589215 -0.2043637 0.0589215 c -0.1102524 0 -0.2002072 -0.0261964 -0.2042908 -0.0589215 l -0.2783987 0 c -0.0016742 0 -0.0033322 0.0001386 -0.0049648999999999995 0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292nts", "all")
	.on("mousemove", particle);

	function particle() {
	if( ++i % 3 ) {
	return ;
	}
	var m = d3.svg.mouse(this);

	var tDuration = 500 + Math.random()*2000 ;

	svg.append("svg:path")
	.attr( "transform" , "translate(" + m[0] + " " + m[1] + ") rotate(" + (i*3) + ")" )
	.attr( "d" , "m -0.5716916 0.0223518 c -0.0083682 0.0002261 -0.016818200000000002 0.0025134000000000003 -0.0246054 0.0070092 l -0.4987524 0.2879638 c -0.0249181 0.0143864 -0.0333699 0.0459775 -0.0189835 0.0708956 l 0.1699016 0.2943159 c 0.0143864 0.0249181 0.0460506 0.0333698 0.0709688 0.0189835 l 0.2606567 -0.15048 l 0 1.0997963 c 0 0.028773 0.0232123 0.0519855 0.0519855 0.0519855 l 0.9628967 0 c 0.0287729 0 0.051912200000000006 -0.0232124 0.051912200000000006 -0.0519855 l 0 -1.1013295 l 0.2633585 0.1520132 c 0.0249179 0.0143863 0.0565091 0.0059347 0.0708954 -0.0189835 l 0.1699017 -0.2943159 c 0.0143863 -0.0249181 0.0059348000000000005 -0.0565092 -0.0189835 -0.0708956 l -0.4986795 -0.2879638 c -0.010123 -0.0058445 -0.021391 -0.0079161 -0.0321259 -0.0066442 c -0.0020621 -0.0002469 -0.0041483 -0.000365 -0.006279 -0.000365 l -0.2758435 0 c -0.0040836 0.0327251 -0.0941113 0.0589215 -0.2043637 0.0589215 c -0.1102524 0 -0.2002072 -0.0261964 -0.2042908 -0.0589215 l -0.2783987 0 c -0.0016742 0 -0.0033322 0.0001386 -0.0049648999999999995 0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292 c -0.0020724000000000003 -0.0001952 -0.0041132 -0.0003486 -0.0062064 -0.000292" )
	.style( "stroke" , z(i) )
	.style("stroke-opacity", 1)
	.transition()
	.duration(tDuration)
	.attr( "d" , "m -57.16916 2.23518 c -0.83682 0.02261 -1.68182 0.25134 -2.46054 0.70092 l -49.87524 28.79638 c -2.49181 1.43864 -3.33699 4.59775 -1.89835 7.08956 l 16.99016 29.43159 c 1.43864 2.49181 4.60506 3.33698 7.09688 1.89835 l 26.06567 -15.048 l 0 109.97963 c 0 2.8773 2.32123 5.19855 5.19855 5.19855 l 96.28967 0 c 2.87729 0 5.19122 -2.32124 5.19122 -5.19855 l 0 -110.13295 l 26.33585 15.20132 c 2.49179 1.43863 5.65091 0.59347 7.08954 -1.89835 l 16.99017 -29.43159 c 1.43863 -2.49181 0.59348 -5.65092 -1.89835 -7.08956 l -49.86795 -28.79638 c -1.0123 -0.58445 -2.1391 -0.79161 -3.21259 -0.66442 c -0.20621 -0.02469 -0.41483 -0.0365 -0.6279 -0.0365 l -27.58435 0 c -0.40836 3.27251 -9.41113 5.89215 -20.43637 5.89215 c -11.02524 0 -20.02072 -2.61964 -20.42908 -5.89215 l -27.83987 0 c -0.16742 0 -0.33322 0.01386 -0.49649 0.0292 c -0.20724 -0.01952 -0.41132 -0.03486 -0.62064 -0.0292 z" )
	.delay( 1 )
	.ease(Math.sqrt)
	.attr("r", 100)
	.attr("transform","translate(" + m[0] + " " + m[1] + ") rotate(" + (i*3+180) +")" )
	.style("stroke-opacity", 1e-6)
	.remove();
	}

	</script>
	</body>
	</html>