cutting board (no JS)

cutting board (no JS).markdown

cutting board (no JS)

Live coded on the 17th of September 2015. Wish I could have really timed it, but my browser kept freezing and it even crashed at some point. Tested & works in Firefox 40, 43 (nightly), Chrome 45, 47 (canary)/ Opera 32 beta on Windows 8. Inspiration:

From Motion Addicts.

A Pen by Ana Tudor on CodePen.

License.

index.html

- r = 80;

mixin polygon(n)
	- var base_angle = 2*Math.PI/n
	- var points = ''
	- for(var i = 0; i < n; i++) {
		- var curr_angle = i*base_angle;
		- var x = r*Math.cos(curr_angle);
		- var y = r*Math.sin(curr_angle);
		- points += ~~x + ',' + ~~y + ' ';
	-}
	polygon(points=points.trim())

.demo
	svg(viewbox='-150 -150 300 300')
		g
			+polygon(4)
		g
			circle(r='#{r}')
		g
			+polygon(3)
		g
			+polygon(5)
		g
			+polygon(3)
		g
			+polygon(6)
		g
			circle(r='#{r}')

style.css

$demo-dim: 18.75em;
$data: 
	#d46ea8 (0, 0) 1 0deg 0/* square */, 
	#f2ca4c (-4em, -3em) .35 0deg .0833/* circle */, 
	#5076c5 (-1.25em, 3em) .8 0deg .1388/* 1st triangle */, 
	#6ed393 (2.5em, -3.25em) .7 0deg .25/* pentagon */, 
	#f2ca4c (0, .0) 1 0deg .5/* 2nd triangle */, 
	#d46ea8 (-4.5em, .75em) .5 0deg .611/* hexagon */, 
	#5076c5 (2.5em, 3.5em) .5 0deg .666/* 2nd circle */;
$n: length($data);
$t: 1.5s;

html { background: #dfdfdf; }

.demo {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	width: $demo-dim; height: $demo-dim;
	box-shadow: 0 0 .25em dimgrey, 
		0 0 .5em dimgrey;
	
	&:before {
		position: absolute;
		z-index: -1;
		top: 50%; left: 50%;
		margin: -$demo-dim/sqrt(2);
		width: $demo-dim*sqrt(2); height: $demo-dim*sqrt(2);
		background: 
			radial-gradient(#30584e, rgba(#30584e, 0) 65%), 
			linear-gradient(rgba(#fff, .2) 1px, transparent 1px) 0 $demo-dim/sqrt(2), 
			linear-gradient(90deg, rgba(#fff, .2) 1px, transparent 1px) $demo-dim/sqrt(2) 0, 
			radial-gradient(#30584e, #234038 72%);
		background-size: 100%, 6.25em 6.25em, 6.25em 6.25em, 100%;
		animation: rot $t linear infinite;
		content: '';
	}
}

svg { width: 100%; height: 100%; }

g {
	@for $i from 0 to $n {
		&:nth-child(#{$i + 1}) {
			$cd: nth($data, $i + 1);
			
			transform: translate(nth($cd, 2)) scale(nth($cd, 3));
			
			* {
				stroke: nth($cd, 1);
				animation-delay: nth($cd, 5)*$t;
			}
		}
	}
	
	* {
		fill: transparent;
		stroke-width: 64;
		transform: scale(0) rotate(0deg);
		animation: ani $t ease-in infinite;
	}
}

@keyframes ani {
	0% { transform: scale(0) rotate(0deg); }
	23% {
		transform: scale(.9) rotate(-20deg);
		stroke-width: 32;
		stroke-opacity: .9;
	}
	28% { stroke-width: 8; }
	33%, 100% {
		transform: scale(1) rotate(-30deg);
		stroke-width: 0;
		stroke-opacity: .5;
	}
}

@keyframes rot { to { transform: rotate(90deg); } }