meiriko/index.html

## 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>-->
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></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 pathData = "m 62 -60 c 15.56641 -46.6993 -20.6098 -107.76764 -31.133 -108.96511 c -15.56641 15.56643 -15.56641 15.56643 -31.13281 31.13288 c -15.5665 -15.56645 -15.5665 -15.56645 -31.133 -31.13288 c -8.5199 6.26242 -46.6994 62.26581 -31.1329 112.04731 c -39.60339 -26.15331 -108.86192 -15.4411 -113.25261 -5.80299 c 9.99431 19.6149 9.99431 19.6149 19.98848 39.22969 c -19.61484 9.9944 -19.61484 9.9944 -39.2297 19.98871 c 3.32312 10.0381 45.91053 62.11888 95.13433 67.97179 c -40.04272 34.8573 -47.79364 96.40732 -39.98402 103.56131 c 21.74323 -3.44379 21.74323 -3.44379 43.48642 -6.8876 c 3.44391 21.74332 3.44391 21.74332 6.88771 43.48651 c 10.5737 -0.0585 71.79469 -33.43201 89.2352 -71.66782 c 17.44049 55.62469 80.01801 76.26559 89.2352 71.0488 c 3.44379 -21.74319 3.44379 -21.74319 6.88779 -43.4863 c 21.7431 3.4437 21.7431 3.4437 43.20081 6.28061 c 2.92621 -10.6814 2.16931 -75.9288 -31.64688 -111.90869 c 55.45059 -6.97562 89.19598 -49.0872 87.08298 -59.46541 c -19.6149 -9.9944 -19.6149 -9.9944 -39.2298 -19.9886 c 9.9942 -19.61501 9.9942 -19.61501 19.98862 -39.2299 c -8.58881 -6.1678 -73.6496 -25.1725 -113.25281 4.06291" ;
			var parts = pathData.split( " " ) ;
			for( var j = 0 ; j < parts.length ; j++ ) {
				if( ! isNaN( Number( parts[j] ) ) ) {
					parts[j] = Number( parts[j] ) / 100 ;
				}
			}
			var pathDataSmall = parts.join( " " ) ;

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.mouse(this);

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

	svg.append("svg:path")
		.attr( "transform" , "translate(" + m[0] + " " + m[1] + ") rotate(" + (i*3) + ")" )
		.attr( "d" , pathDataSmall )
		.style( "stroke" , z(i) )
		.style("stroke-opacity", 1)
		.transition()
		.duration(tDuration)
		.attr( "d" , pathData )
		.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>-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></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 pathData = "m 62 -60 c 15.56641 -46.6993 -20.6098 -107.76764 -31.133 -108.96511 c -15.56641 15.56643 -15.56641 15.56643 -31.13281 31.13288 c -15.5665 -15.56645 -15.5665 -15.56645 -31.133 -31.13288 c -8.5199 6.26242 -46.6994 62.26581 -31.1329 112.04731 c -39.60339 -26.15331 -108.86192 -15.4411 -113.25261 -5.80299 c 9.99431 19.6149 9.99431 19.6149 19.98848 39.22969 c -19.61484 9.9944 -19.61484 9.9944 -39.2297 19.98871 c 3.32312 10.0381 45.91053 62.11888 95.13433 67.97179 c -40.04272 34.8573 -47.79364 96.40732 -39.98402 103.56131 c 21.74323 -3.44379 21.74323 -3.44379 43.48642 -6.8876 c 3.44391 21.74332 3.44391 21.74332 6.88771 43.48651 c 10.5737 -0.0585 71.79469 -33.43201 89.2352 -71.66782 c 17.44049 55.62469 80.01801 76.26559 89.2352 71.0488 c 3.44379 -21.74319 3.44379 -21.74319 6.88779 -43.4863 c 21.7431 3.4437 21.7431 3.4437 43.20081 6.28061 c 2.92621 -10.6814 2.16931 -75.9288 -31.64688 -111.90869 c 55.45059 -6.97562 89.19598 -49.0872 87.08298 -59.46541 c -19.6149 -9.9944 -19.6149 -9.9944 -39.2298 -19.9886 c 9.9942 -19.61501 9.9942 -19.61501 19.98862 -39.2299 c -8.58881 -6.1678 -73.6496 -25.1725 -113.25281 4.06291" ;
	var parts = pathData.split( " " ) ;
	for( var j = 0 ; j < parts.length ; j++ ) {
	if( ! isNaN( Number( parts[j] ) ) ) {
	parts[j] = Number( parts[j] ) / 100 ;
	}
	}
	var pathDataSmall = parts.join( " " ) ;

	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.mouse(this);

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

	svg.append("svg:path")
	.attr( "transform" , "translate(" + m[0] + " " + m[1] + ") rotate(" + (i*3) + ")" )
	.attr( "d" , pathDataSmall )
	.style( "stroke" , z(i) )
	.style("stroke-opacity", 1)
	.transition()
	.duration(tDuration)
	.attr( "d" , pathData )
	.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>