svg.svg-icon__sprite
defs
symbol#triangle(viewbox='0 0 32 32')
title Triangle icon.
desc For interactions.
g(stroke-width='3' stroke-linecap='round')
line(x1='6' y1='6' x2='26' y2='6')
line(x1='6' y1='6' x2='16' y2='26')
line(x1='26' y1='6' x2='16' y2='26')
symbol#reload(viewbox='0 0 32 32')
title Reload icon.
desc For interactions.
path(d='M14.5 1c1.9 0 3.7.4 5.5 1.1 1.8.7 3.4 1.8 4.8 3.2 0 0 1.4 1.4 4.3 4.2V3.9c0-.4.1-.7.4-1 .3-.3.6-.4 1-.4s.7.1 1 .4c.3.3.4.6.4 1v8.7c0 .4-.1.7-.4 1-.3.3-.6.4-1 .4h-8.7c-.4 0-.7-.1-1-.4-.3-.3-.4-.6-.4-1s.1-.7.4-1c.3-.3.6-.4 1-.4h4.9c-2.1-2-3.4-3.3-4-3.9-1.1-1.1-2.4-2-3.9-2.6-1.4-.6-2.8-.9-4.4-.9s-3 .3-4.4.9c-1.3.6-2.6 1.5-3.7 2.6s-2 2.4-2.6 3.9c-.6 1.4-.9 2.8-.9 4.4s.3 3 .9 4.4c.6 1.4 1.4 2.7 2.6 3.9 1.1 1.1 2.4 2 3.9 2.6 1.4.6 2.8.9 4.4.9s3-.3 4.4-.9c1.4-.6 2.7-1.4 3.9-2.6 1.3-1.3 2.2-2.7 2.8-4.4.1-.4.4-.7.7-.8.4-.2.7-.2 1.1-.1.4.1.7.4.8.8.2.4.2.7.1 1.1-.3 1-.8 2-1.4 2.9s-1.3 1.8-2 2.5c-1.4 1.4-3 2.5-4.8 3.2-1.8.7-3.6 1.1-5.5 1.1s-3.7-.4-5.5-1.1c-1.8-.7-3.4-1.8-4.8-3.2s-2.5-3-3.2-4.8C.4 19.3 0 17.4 0 15.5s.4-3.7 1.1-5.5c.7-1.8 1.8-3.4 3.2-4.8s3-2.5 4.8-3.2c1.7-.6 3.6-1 5.4-1z')
symbol#dot-inverted(viewbox='0 0 32 32')
title Dot icon.
desc For interactions.
circle(cx='16' cy='16' r='10' fill='none' stroke-width='9')
symbol#dot(viewbox='0 0 32 32')
title Dot icon.
desc For interactions.
circle(cx='16' cy='16' r='14' fill='none' stroke-width='3')
circle(cx='16' cy='16' r='4' fill='none' stroke-width='3')
symbol#arrow(viewbox='0 0 32 32')
title Arrow icon.
desc For interactions.
path(d='M12.8 3c.4 0 .8.2 1.1.5s.5.7.5 1.1c0 .5-.2.8-.5 1.1l-8.5 8.5h24.9c.4 0 .8.2 1.1.5.3.3.5.7.5 1.1s-.2.8-.5 1.1c-.3.3-.7.5-1.1.5H5.5l8.5 8.5c.3.3.5.7.5 1.1 0 .4-.2.8-.5 1.1s-.7.5-1.1.5c-.4 0-.8-.2-1.1-.5L.5 17c-.3-.3-.5-.7-.5-1.1s.2-.8.5-1.1L11.7 3.5c.3-.3.7-.5 1.1-.5z')
symbol#eye(viewbox='0 0 32 32')
title Eye icon.
desc For toggleable elements.
path(d='M16 4c1.5 0 2.9.2 4.2.7 1.4.4 2.6 1 3.6 1.7s2 1.5 2.9 2.3 1.7 1.7 2.3 2.6 1.2 1.6 1.6 2.3c.5.7.8 1.3 1 1.7l.4.7c0 .1-.1.2-.2.4s-.3.5-.6 1.1-.6 1.1-1 1.6-.8 1.2-1.4 1.9c-.6.7-1.2 1.4-1.8 2s-1.3 1.2-2.2 1.9c-.8.6-1.7 1.2-2.6 1.6s-1.9.8-3 1.1c-.9.3-2.1.4-3.2.4-1.5 0-2.9-.2-4.2-.7s-2.6-1-3.6-1.7-2-1.5-2.9-2.3-1.7-1.7-2.3-2.5-1.2-1.6-1.6-2.3-.8-1.3-1-1.7l-.4-.7c0-.1.1-.2.2-.4s.3-.5.6-1.1.6-1.1 1-1.6.8-1.2 1.4-1.9 1.2-1.4 1.8-2 1.3-1.2 2.2-1.9S8.8 6 9.7 5.5c.9-.4 1.9-.8 3-1.1S14.9 4 16 4zm0 2.7c-1 0-1.9.1-2.9.4s-1.8.6-2.5 1c-.8.4-1.5.8-2.2 1.4-.7.6-1.3 1.1-1.9 1.7S5.5 12.4 5 13s-.9 1.2-1.2 1.7c-.3.5-.6.9-.8 1.4.3.5.5.9.8 1.4s.7 1 1.2 1.6l1.5 1.8s1.1 1.1 1.9 1.7c.7.6 1.5 1.1 2.2 1.5.8.4 1.6.7 2.5 1s1.9.4 2.9.4 1.9-.1 2.9-.4c.9-.3 1.8-.6 2.5-1s1.5-.9 2.2-1.5c.7-.6 1.3-1.1 1.9-1.7l1.5-1.8 1.2-1.6c.3-.5.6-.9.8-1.4-.3-.5-.5-.9-.8-1.4-.3-.5-.7-1-1.2-1.6l-1.5-1.8c-.5-.6-1.1-1.1-1.9-1.7-.7-.6-1.5-1.1-2.2-1.5-.8-.4-1.6-.7-2.5-1S17 6.7 16 6.7zm0 4c1.5 0 2.7.5 3.8 1.6 1 1 1.6 2.3 1.6 3.8s-.5 2.7-1.6 3.8c-1 1-2.3 1.6-3.8 1.6s-2.7-.5-3.8-1.6c-1-1-1.6-2.3-1.6-3.8s.5-2.7 1.6-3.8 2.3-1.6 3.8-1.6zm0 2.6c-.7 0-1.4.3-1.9.8s-.8 1.1-.8 1.9.3 1.4.8 1.9 1.1.8 1.9.8 1.4-.3 1.9-.8.8-1.1.8-1.9-.3-1.4-.8-1.9-1.2-.8-1.9-.8z')
symbol#firefox(viewbox='0 0 32 32')
title Firefox icon.
desc Support for this browser.
path(d='M31.8 10.6l-.4 2.4s-.5-4.4-1.2-6c-1-2.5-1.4-2.5-1.4-2.5.7 1.7.5 2.6.5 2.6S28.1 3.9 25 2.9c-3.4-1.1-5.3-.8-5.5-.8h-.1.1s3.8.7 4.5 1.6c0 0-1.6 0-3.2.5-.1 0 5.9.7 7.1 6.7 0 0-.7-1.4-1.5-1.6.5 1.6.4 4.7-.1 6.2-.1.2-.1-.8-1.1-1.3.3 2.3 0 5.9-1.6 6.9-.1.1 1-3.6.2-2.2-4.4 6.8-9.6 3.1-12 1.5 1.2.3 3.5 0 4.5-.8 1.1-.8 1.7-1.3 2.3-1.2.6.1 1-.5.5-1s-1.6-1.2-3-.8c-1.1.3-2.4 1.4-4.3.3-1.5-.9-1.7-1.7-1.7-2.2 0-.2.1-.4.1-.5.2-.5.7-.6 1-.8.5.1.9.2 1.4.5v-.6c0-.1 0-.3-.1-.7 0-.3-.1-.6-.2-.9 0-.1.4-.4.8-.7.4-.3.8-.5 1.2-.8.5-.2.7-.3.7-.4l.1-.1c.2-.1.4-.4.5-.9v-.1-.2-.1c-.1-.1-.3-.2-1.1-.2h-1.4c-1 0-1.6-1-1.8-1.4.2-1.4 1-2.4 2.1-3 .2-.1-2.8 0-4.2 1.8-1.1-.4-2.2-.4-3.1-.2-.2 0-.4 0-.7-.1-.6-.5-1.5-1.6-1.6-2.8 0 0-1.9 1.4-1.6 5.4v.2c-.5.6-.7 1.2-.7 1.3-.5.9-.9 2.3-1.3 4.4 0 0 .3-.8.8-1.8-.4 1.2-.7 3-.5 5.8 0 0 0-.6.2-1.5.1 1.7.7 3.8 2.1 6.3 2.8 4.7 7 7.1 11.7 7.5.8.1 1.7.1 2.5 0h.2c1-.1 1.9-.2 2.9-.4 13.1-3.2 11.7-19.1 11.7-19.1z')
symbol#chrome(viewbox='0 0 32 32')
title Chrome icon.
desc Support for this browser.
path(d='M8.2 14.1L3.7 6.3c2.9-3.6 7.4-6 12.4-6C21.9.3 27 3.4 29.7 8.1H16.1c-3.8 0-7 2.5-7.9 6zm13.6-3.7h9.1c.7 1.8 1.1 3.7 1.1 5.8 0 8.7-7 15.7-15.7 15.8l6.5-11.2c.9-1.3 1.4-2.9 1.4-4.6 0-2.3-.9-4.3-2.4-5.8zm-11.5 5.8c0-3.2 2.6-5.8 5.8-5.8s5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8-5.8-2.7-5.8-5.8zm8 7.8l-4.5 7.9C6.1 30.7.2 24.1.2 16.2c0-2.8.7-5.5 2-7.8l6.5 11.2c1.3 2.8 4.1 4.7 7.3 4.7.8 0 1.6-.1 2.3-.3z')
symbol#safari(viewbox='0 0 32 32')
title Safari icon.
desc Support for this browser.
path(d='M16.1.3C7.3.3.2 7.4.2 16.2S7.3 32 16.1 32s15.8-7.1 15.8-15.8S24.8.3 16.1.3zM29.9 15v-.3.3zm-2.2-6.4l-.2-.3c.1.1.2.2.2.3zm-.8-1.1l-.1-.2s0 .1.1.2zm-2-2l-.2-.1c.1 0 .2.1.2.1zm-1-.8l-.3-.2c.1.1.2.2.3.2zm-6.3-2.3h-.3.3zm-2.7 0h-.3.3zM8.6 4.5l-.4.2c.1 0 .2-.1.4-.2zm-1.2.9l-.2.1c.1 0 .1-.1.2-.1zm-2 1.9l-.1.2c0-.1.1-.1.1-.2zm-.7 1l-.3.3.3-.3zm-2.4 6.3v0zm0 2.8v0zm2.1 6.3l.3.3-.3-.3zm.3.4l2.5-1.7-.3-.4-2.5 1.7C3.3 22 2.5 20 2.3 17.8l1.5-.1v-.5l-1.5.1v-.9h3v-.5h-3V15l1.5.1v-.5l-1.5-.1c.2-2.2 1-4.2 2.1-5.9l2.5 1.7.3-.4-2.5-1.6c.2-.3.3-.5.5-.7l1.1.9.3-.4-1.1-.9c.2-.2.4-.5.6-.7l2.1 2.1.4-.4-2.1-2 .6-.6.9 1.2.4-.3-.9-1.2c.2-.2.5-.4.7-.5l1.7 2.5.3-.3-1.6-2.5c1.7-1.1 3.7-1.9 5.9-2.1l.1 1.5h.5L15 2.3h.9v3h.5v-3h.9l-.1 1.5h.5l.1-1.5c2.2.2 4.2 1 5.9 2.1L21.9 7l.4.3L24 4.8c.2.2.5.3.7.5l-.9 1.1.4.3.9-1.1.6.6-.8.8-10.8 7.2L6.9 25l-.8.8-.6-.6 1.1-.9-.3-.4-1.1.9c-.2-.3-.3-.5-.5-.7zm.7.9c0-.1-.1-.1-.1-.2l.1.2zm1.8 1.8l.2.2-.2-.2zm1 .8l.3.2c-.1-.1-.2-.1-.3-.2zm6.3 2.3h.3c0 .1-.2.1-.3 0zm2.8.1h.3-.3zm6.3-2.2l.3-.2c-.1.1-.2.1-.3.2zm1.2-.8l.2-.1c-.1 0-.2 0-.2.1zm1.1-1zm.8-1l.1-.2c0 .1 0 .2-.1.2zm.3-.2l-1.1-.9-.3.4 1.1.9-.6.6-2.1-2.1-.4.4 2.1 2.1-.6.6-.9-1.2-.4.3.9 1.1c-.2.2-.5.4-.7.5L22.3 25l-.4.3 1.7 2.5c-1.7 1.1-3.7 1.9-5.9 2.1l-.1-1.5h-.5l.1 1.5h-.9v-3h-.5v3h-.9l.1-1.5h-.5l-.1 1.5c-2.2-.2-4.2-1-5.9-2.1l1.7-2.5-.4-.3-1.6 2.5c-.2-.2-.5-.3-.7-.5l.9-1.1-.4-.3-.9 1.1-.6-.6.8-.8 10.8-7.2 7.2-10.8.8-.8.6.6-1.1.9.3.4 1.1-.8c.2.2.4.5.5.7L25 9.9l.3.4 2.5-1.7c1.1 1.7 1.9 3.7 2.1 5.9l-1.5.1v.5l1.5-.1v.9h-3v.5h3v.9l-1.5-.1v.5l1.5.1c-.2 2.2-1 4.2-2.1 5.9L25.3 22l-.3.4 2.5 1.7c-.2.2-.4.4-.5.7zm2.9-7.4v.3-.3zm-2.2 6.3c-.1.1-.1.2-.2.3l.2-.3z')
symbol#edge(viewbox='0 0 32 32')
title Edge icon.
desc Support for this browser.
path(d='M1.7 13.9C2.7 6.7 7.6.1 16.5 0c5.4.1 9.8 2.5 12.4 7.2 1.3 2.4 1.7 5 1.8 7.8v3.3H11c.1 8.1 12 7.8 17.1 4.3v6.6c-3 1.8-9.8 3.4-15 1.3-4.5-1.7-7.7-6.4-7.6-10.9-.3-5.9 2.8-9.8 7.5-12-1 1.2-1.8 2.6-2.2 5H22S22.7 6 15.7 6c-6.6.2-11.3 4-14 7.9z')
symbol#explorer(viewbox='0 0 32 32')
title iExplorer icon.
desc Support for this browser.
path(d='M23.8 17.5H31c.1-.5.1-1 .1-1.5 0-2.5-.7-4.8-1.8-6.8 1.2-3.2 1.1-5.9-.4-7.5-1.5-1.5-5.6-1.3-10.2.8h-1C11.3 2.5 6 6.9 4.6 12.7c2-2.5 4.1-4.4 6.9-5.7-.3.2-1.7 1.7-2 2-7.3 7.3-9.7 16.9-7.2 19.4 1.9 1.9 5.3 1.6 9.3-.4 1.8.9 3.9 1.5 6.1 1.5 5.9 0 10.9-3.8 12.8-9.1h-7.3c-1 1.9-3 3.1-5.2 3.1s-4.2-1.3-5.2-3.1c-.4-.8-.7-1.8-.7-2.8l11.7-.1zM12 14c.2-3 2.6-5.4 5.7-5.4s5.5 2.4 5.7 5.4H12zM28.8 3.3c1 1 1 3 .1 5.3-1.5-2.3-3.7-4.1-6.3-5.1 2.8-1.2 5.1-1.4 6.2-.2zM4.2 27.9c-1.3-1.3-.9-4.1.8-7.4 1.1 3 3.1 5.4 5.7 7-2.9 1.4-5.3 1.6-6.5.4z')
symbol#checkmark(viewbox='0 0 32 32')
title Check icon.
desc For interactions.
path(d='M2 20 L12 28 30 4')
symbol#star(viewbox='0 0 32 32')
title Star icon.
desc For ratings.
path(d='M12.224 11.623L16 0l3.776 11.623H32l-9.888 6.865 3.776 11.417L16 22.668 6.112 29.85l3.776-11.362L0 11.623h12.224')
symbol#heart(viewbox='0 0 32 32')
title Heart icon.
desc For interactions.
path(d='M15.452 29.874L2.626 17.152c-.528-.524-.985-1.11-1.36-1.736C-.835 11.928-.28 7.478 2.623 4.6 4.312 2.925 6.556 2 8.942 2c3.76 0 6.087 2.19 7.06 3.426.976-1.24 3.3-3.424 7.058-3.424 2.384 0 4.63.924 6.318 2.6 2.9 2.878 3.46 7.328 1.354 10.82-.37.625-.83 1.208-1.358 1.733L16.55 29.878c-.303.303-.792.303-1.095 0')
symbol#smiley(viewbox='0 0 32 32')
title Smiley icon.
desc For user reactions.
path(d='M20 18.8c0 2.2-1.8 4-4 4s-4-1.8-4-4h8z')
circle(cx='4.5', cy='16.8', r='2.5')
circle(cx='27.6', cy='16.8', r='2.5')
path(d='M1.5 12.3c0-1.7 1.3-3 3-3s3 1.3 3 3')
path(d='M24.5 12.3c0-1.7 1.3-3 3-3s3 1.3 3 3')
main.flexy__item.flexy--items-center.flexy--justify-center.flexy--column
section.section.flexy__item.flexy--column.flexy--items-center.space--big
header.accessible-hide
h2 CSS Ratings
article.section__article.flexy__item.flexy--column.flexy--items-center
header.header.space--medium
h3.accessible-hide A Sassy-Animated kit for inspiration
form
fieldset.space--medium
legend.accessible-hide Effect 1
.card
svg#svg.stroke--white.space--normal(fill='none' width='150' viewbox='0 0 245 120')
g(stroke-width='8' stroke-linejoin='round' stroke-linecap='round')
path#mouth(d='M90,110 C100,110 144,110 155,110 C144,110 100,110 90,110')
g(fill='white')
circle(r='15' cx='34' cy='67')
circle(r='15' cx='211' cy='65')
path#eyebrowL(d='M14,8 56,30')
path#eyebrowR(d='M189,28 232,6')
#reaction.rating.rating__fx--2.flexy__item.flexy--reverse-row
- var reactions = ['angry','less-angry','serious','less-smile','smile']
- var j = 4
while j >= 0
if (j == 0)
input(type='radio' id='value-2-'+(j) name='rating-2' checked)
else
input(type='radio' id='value-2-'+(j) name='rating-2')
if (j == 4)
label.rating__label.sparks(for='value-2-'+(j) data-reaction=''+(reactions[j]))
svg.rating__label__icon.svg-icon.stroke--white
use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#heart')
else
label.rating__label(for='value-2-'+(j) data-reaction=''+(reactions[j]))
svg.rating__label__icon.svg-icon.stroke--white
use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#heart')
- j--
fieldset.space--medium
legend.accessible-hide Effect 2
.rating.rating__fx--0.flexy__item.flexy--reverse-row
- var i = 4
while i >= 0
if (i == 0)
input(type='radio' id='value-0-'+(i) name='rating-0' checked)
else
input(type='radio' id='value-0-'+(i) name='rating-0')
if (i == 4)
label.rating__label.sparks(for='value-0-'+(i))
svg.rating__label__icon.svg-icon.fill--white
use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#star')
else
label.rating__label(for='value-0-'+(i))
svg.rating__label__icon.svg-icon.fill--white
use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#star')
- i--
fieldset.space--medium
legend.accessible-hide Effect 3
.rating.rating__fx--1.flexy__item.flexy--reverse-row
- var j = 4
while j >= 0
if (j == 0)
input(type='radio' id='value-1-'+(j) name='rating-1' checked)
else
input(type='radio' id='value-1-'+(j) name='rating-1')
if (j == 4)
label.rating__label.sparks(for='value-1-'+(j))
svg.rating__label__icon.svg-icon.fill--white
use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#star')
else
label.rating__label(for='value-1-'+(j))
svg.rating__label__icon.svg-icon.fill--white
use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#star')
- j--
.rating__background
header.header
h1
a(href='http://tadaima.studio' title='Go to Tadaima')
//- svg.logo-tadaima.fill--white(xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 80 80')
title Tadaima Studio.
desc A group of digital interface crafters.
g
rect.st5(y='0', width='80', height='80')
lineargradient#SVGID_1_(gradientunits='userSpaceOnUse', x1='27.7468', y1='18.248', x2='52.244', y2='42.7452')
stop(offset='0', style='stop-color:#FF5572')
stop(offset='1', style='stop-color:#FF7555')
polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10;', points='52,27 25,27 25,23 55,23 55,31 40,31 40,54 ')
lineargradient#SVGID_2_(gradientunits='userSpaceOnUse', x1='23.9948', y1='30.0043', x2='48.4901', y2='54.4996')
stop(offset='0', style='stop-color:#FF5572')
stop(offset='1', style='stop-color:#FF7555')
polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;', points='24,31 36,31 36,57 44,57 44,34 ')
svg.svg-bg(xmlns='http://www.w3.org/2000/svg')
defs
circle#a(cx='1468', cy='133', r='35')
mask#h(x='0', y='0', width='70', height='70', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
circle#b(cx='236.5', cy='732.5', r='23.5')
mask#i(x='0', y='0', width='47', height='47', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
circle#c(cx='1120.5', cy='945.5', r='28.5')
mask#j(x='0', y='0', width='57', height='57', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
path#d(d='M1193.375 302.875l44.6 77.25h-89.2z')
mask#k(x='0', y='0', width='89.201', height='77.25', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
path#e(d='M1610.8 513.3l34.14 59.128h-68.278z')
mask#l(x='0', y='0', width='68.277', height='59.13', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
path#f(d='M51.045 967.864l38.314 66.362H12.73z')
mask#m(x='0', y='0', width='76.629', height='66.362', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
path#g(d='M46.045 311.097l26.5 45.897H19.546z')
mask#n(x='0', y='0', width='52.997', height='45.897', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
g(style='mix-blend-mode:overlay', fill='none', fill-rule='evenodd', opacity='.35', stroke='#FFF')
use.svg-bg_element(mask='url(#h)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
use.svg-bg_element(mask='url(#i)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
use.svg-bg_element.opacity-anim(mask='url(#j)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
path.stroke-anim(d='M657.5 848.5l46 46', stroke-width='3', stroke-linecap='square')
path(d='M1360.5 1206.5l89-89M761.5 42.5l42-42', stroke-width='3', stroke-linecap='square')
use.svg-bg_element(mask='url(#k)', stroke-width='6', transform='rotate(90 1193.375 341.5)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
use.svg-bg_element(mask='url(#l)', stroke-width='6', transform='rotate(45 1610.8 542.863)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
use.svg-bg_element.rotate-anim(mask='url(#m)', stroke-width='6', transform='rotate(45 51.045 1001.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
use.svg-bg_element(mask='url(#n)', stroke-width='6', transform='rotate(20 46.045 334.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
View Compiled
@function rndNumber($limit) {
@return random($limit);
}
$globalSize: 400%;
$colorsList: ($white, $white, $white);
$bgDots: ();
$resultPosList: ();
$prevPosList: ();
$resultSizeList: ();
$prevSizeList: ();
$randomSize: 0;
@for $i from 1 through 16 {
$thisColor: nth($colorsList, rndNumber(3));
$bgDots: append($bgDots, radial-gradient($thisColor, $thisColor 70%, transparent 71%), 'comma');
$resultPosList: append($resultPosList, (rndNumber(100) * 1%) (rndNumber(100) * 1%), 'comma');
$prevPosList: append($prevPosList, 50% 50%, 'comma');
$randomSize: rndNumber(3) * 2%;
$resultSizeList: append($resultSizeList, $randomSize $randomSize, 'comma');
$prevSizeList: append($prevSizeList, .25em .25em, 'comma');
}
.sparks {
&:before {
content: '';
position: absolute;
pointer-events: none;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: $globalSize;
height: $globalSize;
background-image: $bgDots;
background-size: $prevSizeList;
background-position: $prevPosList;
background-repeat: no-repeat;
transition: all 0s ease-out;
transition-delay: 0;
}
}
.card {
height: 15em;
border-radius: 15em 15em 0 0;
display: flex;
align-items: flex-end;
justify-content: center;
background-color: rgba($white, .2);
}
.rating {
&__label {
cursor: pointer;
padding: 1em;
display: flex;
box-sizing: border-box;
transition: all $fastDuration ease-in-out;
border: 1px solid rgba($white, .2);
margin-left: -1px;
&__icon {
z-index: 2;
transition: fill $fastDuration ease-in-out;
}
@for $i from 1 through 5 {
&:nth-of-type(#{5-$i}) .rating__label__icon {
transition-delay: ($fastDuration / 4) * $i;
}
}
}
&__background {
width: 100%;
height: 100%;
min-width: 20%;
position: absolute;
border-radius: 3em;
z-index: -1;
bottom: 0;
left: 0;
transition: width $fastDuration $bezier;
background-color: $white;
}
[type='radio'] {
display: none;
}
&__fx {
&--0 {
perspective: 20em;
.rating__label {
transform-style: preserve-3d;
@for $i from 1 through 5 {
&:nth-of-type(#{5-$i}) {
transition-delay: ($fastDuration / 4) * $i;
}
}
}
[type='radio'] {
display: none;
&:checked ~ .rating__label {
background-color: $white;
transform: rotateY(180deg);
.rating__label__icon {
fill: $coral;
}
}
&:first-of-type:checked + .rating__label:before {
background-size: $resultSizeList;
background-position: $resultPosList;
transition-duration: $slowDuration;
transition-delay: $fastDuration * 1.3;
opacity: 0;
}
}
}
&--1 {
position: relative;
@for $i from 1 through 24 {
$thisColor: nth($colorsList, rndNumber(3));
$bgDots: append($bgDots, radial-gradient($thisColor, $thisColor 70%, transparent 71%), 'comma');
$resultPosList: append($resultPosList, (rndNumber(100) * 1%) (rndNumber(100) * 1%), 'comma');
$prevPosList: append($prevPosList, 50% 50%, 'comma');
$randomSize: rndNumber(3) * 2%;
$resultSizeList: append($resultSizeList, $randomSize $randomSize, 'comma');
$prevSizeList: append($prevSizeList, .25em .25em, 'comma');
}
.rating__label {
transform-style: preserve-3d;
border-left-color: transparent;
border-right-color: transparent;
&:first-of-type {
border-radius: 0 3em 3em 0;
border-right-color: rgba($white, .2);
position: relative;
}
&:last-of-type {
border-radius: 3em 0 0 3em;
border-left-color: rgba($white, .2);
}
}
[type='radio'] {
display: none;
@for $j from 5 through 1 {
&:nth-of-type(#{$j}):checked ~ {
.rating__label {
.rating__label__icon {
fill: $coral;
}
}
.rating__background {
$thisColor: hsl((340 - ($j * 20)), 56%, 66%);
$thisPos: 20% * (6 - $j);
// background-color: saturate($thisColor, 55%);
width: $thisPos;
}
}
}
&:first-of-type:checked + .rating__label:before {
background-size: $resultSizeList;
background-position: $resultPosList;
transition-duration: $slowDuration;
transition-delay: $fastDuration;
opacity: 0;
}
}
}
&--2 {
position: relative;
@for $i from 1 through 18 {
$thisColor: nth($colorsList, rndNumber(3));
$bgDots: append($bgDots, radial-gradient($thisColor, $thisColor 70%, transparent 71%), 'comma');
$resultPosList: append($resultPosList, (rndNumber(100) * 1%) (rndNumber(100) * 1%), 'comma');
$prevPosList: append($prevPosList, 50% 50%, 'comma');
$randomSize: rndNumber(3) * 2%;
$resultSizeList: append($resultSizeList, $randomSize $randomSize, 'comma');
$prevSizeList: append($prevSizeList, .25em .25em, 'comma');
}
.rating__label {
transform-style: preserve-3d;
.rating__label__icon {
fill: $coral;
}
}
[type='radio'] {
display: none;
@for $j from 5 through 1 {
&:nth-of-type(#{$j}):checked ~ {
.rating__label {
.rating__label__icon {
fill: $white;
}
}
}
}
&:first-of-type:checked + .rating__label:before {
background-size: $resultSizeList;
background-position: $resultPosList;
transition-duration: $slowDuration;
transition-delay: $fastDuration;
opacity: 0;
}
}
}
}
}
View Compiled
var mouth = Snap("#mouth"),
eyebrowL = Snap('#eyebrowL'),
eyebrowR = Snap('#eyebrowR'),
items = document.querySelectorAll('[data-reaction]'),
eyebrowPathLeft,
eyebrowPathRight,
mouthPath;
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', function() {
switchReaction(this.getAttribute('data-reaction'));
});
}
function switchReaction(reaction) {
switch (reaction) {
case 'smile':
mouthPath = 'M90,80 C100,124 144,124 155,80 C144,80 100,80 90,80';
eyebrowPathLeft = 'M10,28 C20,4 46,4 56,28';
eyebrowPathRight = 'M189,28 C199,4 223,4 233,28';
break;
case 'less-smile':
mouthPath = 'M90,80 C100,124 144,124 155,80 C144,124 100,124 90,80';
eyebrowPathLeft = 'M10,28 C20,4 46,4 56,28';
eyebrowPathRight = 'M189,28 C199,4 223,4 233,28';
break;
case 'serious':
mouthPath = 'M90,110 C100,110 144,110 155,110 C144,110 100,110 90,110';
eyebrowPathLeft = 'M14,30 56,8';
eyebrowPathRight = 'M189,28 232,28';
break;
case 'less-angry':
mouthPath = 'M90,110 C100,80 144,80 155,110 C144,80 100,80 90,110';
eyebrowPathLeft = 'M10,28 C20,4 46,4 56,28';
eyebrowPathRight = 'M189,28 C199,4 223,4 233,28';
break;
case 'angry':
mouthPath = 'M90,110 C100,110 144,110 155,110 C144,110 100,110 90,110';
eyebrowPathLeft = 'M14,8 56,30';
eyebrowPathRight = 'M189,28 232,6';
break;
}
mouth.animate({
d: mouthPath
}, 600, mina.backout);
eyebrowL.animate({
d: eyebrowPathLeft
}, 600, mina.backout);
eyebrowR.animate({
d: eyebrowPathRight
}, 600, mina.backout);
}
