sunrise (no JS)

index.pug

- var n_rays = 8;
- var base_angle = 360/n_rays;
- var sun_rad = 50;
- var ray_rad = sun_rad*1.4;

svg(viewbox='-200 -150 400 300')
	defs
		line#ray(x1='-5' x2='5')
		clipPath#cp
			rect(x='-200' y='-150' width='400' height='150')
	
	line#line(x1='-76' x2='76')
	text(text-anchor='middle' y='45') sunrise
	g#sun(clip-path='url(#cp)')
		g#mover
			circle#main(r=`${sun_rad}`)
			g#eyes
				circle(r='3' cx='-13')
				circle(r='3' cx='13')
			g#rays
				while n_rays--
					use(xlink:href='#ray' transform=`rotate(${n_rays*base_angle}) translate(${ray_rad})`)

script.js

// DONE

style.scss

$bg: #f4c042;
$c: #765d20;
$t: 5s;

html {
	text-align: center;
	background: $bg;
}

svg {
	width: 400px; height: 300px;
}

* {
	stroke: $c;
	stroke-linecap: round;
	vector-effec: non-scaling-stroke;
}

[id='line'] { stroke-width: 3; }

text {
	font: .875em century gothic, verdana, sans-serif;
}

[id='mover'] {
	animation: sun-motion $t cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

[id='main'] {
	fill: transparent;
	stroke-width: 7;
}

[id='eyes'] {
	animation: eye-motion $t ease-out infinite;
	
	circle { fill: $c; }
}

[id='ray'] {
	stroke-width: 4;
}

[id='rays'] {
	animation: rot $t linear infinite;
}

@keyframes rot {
	to { transform: rotate(.25turn); }
}

@keyframes eye-motion {
	0%, 20%, 49%, 100% { transform: translate(-13px); }
	21%, 25%, 29%, 47% { transform: translate(13px) scaleY(1); }
	27% { transform: translate(13px) scaleY(0); }
	48% { transform: translate(0); }
}

@keyframes sun-motion {
	0%, 99%, 100% { transform: translateY(-16px); }
	50% { transform: translateY(-29px); }
	52%, 98% { transform: translate(4px) scaleY(1.25); }
	53%, 97% { transform: translateY(23px); }
}

sunrise-no-js.markdown

sunrise (no JS)

Live coded on Friday, the 18th of September. Tested & works in Firefox 40, Chrome 45, 47 (canary)/ Opera 32 beta on Windows 8. Uses CSS transforms on SVG elements, so it won't work in IE. Inspiration:

From here.

A Pen by Ana Tudor on CodePen.

License.