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.
- 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})`) |
// DONE |
$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); } | |
} |