Ratings Inspiration
How do I make an ratings inspiration?
A couple of thoughts about rating interactions & animations. What is a ratings inspiration? How do you make a ratings inspiration? This script and codes were developed by Tadaima on 01 December 2022, Thursday.
Ratings Inspiration - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ratings Inspiration</title> <title>Ratings Inspiration</title> <meta charset="utf-8"> <meta name="description" content="Ratings Inspiration, a couple of thoughts about rating interactions & animations."> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A group of digital interface crafters."> <meta name="author" content="Tadaima"> <meta name="organization" content="Tadaima Web Site"> <meta name="application-name" content="Tadaima Web Site"> <meta name="keywords" content="art direction, design, graphic design, simple, easy, ux, ui, ui/ux, interaction, interactive, interactive design, ecommerce, native app development app, iOS, Android, front-end development, creative development, visual coding, CSS3, HTML5"> <link rel='stylesheet prefetch' href='css/https___codepen_io_tadaim.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="svg-icon__sprite"> <defs> <symbol id="triangle" viewbox="0 0 32 32"> <title>Triangle icon.</title> <desc>For interactions.</desc> <g stroke-width="3" stroke-linecap="round"> <line x1="6" y1="6" x2="26" y2="6"></line> <line x1="6" y1="6" x2="16" y2="26"></line> <line x1="26" y1="6" x2="16" y2="26"></line> </g> </symbol> <symbol id="reload" viewbox="0 0 32 32"> <title>Reload icon.</title> <desc>For interactions.</desc> <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"></path> </symbol> <symbol id="dot-inverted" viewbox="0 0 32 32"> <title>Dot icon.</title> <desc>For interactions.</desc> <circle cx="16" cy="16" r="10" fill="none" stroke-width="9"></circle> </symbol> <symbol id="dot" viewbox="0 0 32 32"> <title>Dot icon.</title> <desc>For interactions.</desc> <circle cx="16" cy="16" r="14" fill="none" stroke-width="3"></circle> <circle cx="16" cy="16" r="4" fill="none" stroke-width="3"></circle> </symbol> <symbol id="arrow" viewbox="0 0 32 32"> <title>Arrow icon.</title> <desc>For interactions.</desc> <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"></path> </symbol> <symbol id="eye" viewbox="0 0 32 32"> <title>Eye icon.</title> <desc>For toggleable elements.</desc> <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"></path> </symbol> <symbol id="firefox" viewbox="0 0 32 32"> <title>Firefox icon.</title> <desc>Support for this browser.</desc> <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"></path> </symbol> <symbol id="chrome" viewbox="0 0 32 32"> <title>Chrome icon.</title> <desc>Support for this browser.</desc> <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"></path> </symbol> <symbol id="safari" viewbox="0 0 32 32"> <title>Safari icon.</title> <desc>Support for this browser.</desc> <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"></path> </symbol> <symbol id="edge" viewbox="0 0 32 32"> <title>Edge icon.</title> <desc>Support for this browser.</desc> <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"></path> </symbol> <symbol id="explorer" viewbox="0 0 32 32"> <title>iExplorer icon.</title> <desc>Support for this browser.</desc> <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"></path> </symbol> <symbol id="checkmark" viewbox="0 0 32 32"> <title>Check icon.</title> <desc>For interactions.</desc> <path d="M2 20 L12 28 30 4"></path> </symbol> <symbol id="star" viewbox="0 0 32 32"> <title>Star icon.</title> <desc>For ratings.</desc> <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"></path> </symbol> <symbol id="heart" viewbox="0 0 32 32"> <title>Heart icon.</title> <desc>For interactions.</desc> <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"></path> </symbol> <symbol id="smiley" viewbox="0 0 32 32"> <title>Smiley icon.</title> <desc>For user reactions.</desc> <path d="M20 18.8c0 2.2-1.8 4-4 4s-4-1.8-4-4h8z"></path> <circle cx="4.5" cy="16.8" r="2.5"></circle> <circle cx="27.6" cy="16.8" r="2.5"></circle> <path d="M1.5 12.3c0-1.7 1.3-3 3-3s3 1.3 3 3"></path> <path d="M24.5 12.3c0-1.7 1.3-3 3-3s3 1.3 3 3"></path> </symbol> </defs>
</svg>
<main class="flexy__item flexy--items-center flexy--justify-center flexy--column"> <section class="section flexy__item flexy--column flexy--items-center space--big"> <header class="accessible-hide"> <h2>CSS Ratings</h2> </header> <article class="section__article flexy__item flexy--column flexy--items-center"> <header class="header space--medium"> <h3 class="accessible-hide">A Sassy-Animated kit for inspiration</h3> </header> <form> <fieldset class="space--medium"> <legend class="accessible-hide">Effect 1</legend> <div class="card"> <svg class="stroke--white space--normal" id="svg" fill="none" width="150" viewbox="0 0 245 120"> <g stroke-width="8" stroke-linejoin="round" stroke-linecap="round"> <path id="mouth" d="M90,110 C100,110 144,110 155,110 C144,110 100,110 90,110"></path> <g fill="white"> <circle r="15" cx="34" cy="67"></circle> <circle r="15" cx="211" cy="65"></circle> </g> <path id="eyebrowL" d="M14,8 56,30"></path> <path id="eyebrowR" d="M189,28 232,6"></path> </g> </svg> </div> <div class="rating rating__fx--2 flexy__item flexy--reverse-row" id="reaction"> <input type="radio" id="value-2-4" name="rating-2"/> <label class="rating__label sparks" for="value-2-4" data-reaction="smile"> <svg class="rating__label__icon svg-icon stroke--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#heart"></use> </svg> </label> <input type="radio" id="value-2-3" name="rating-2"/> <label class="rating__label" for="value-2-3" data-reaction="less-smile"> <svg class="rating__label__icon svg-icon stroke--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#heart"></use> </svg> </label> <input type="radio" id="value-2-2" name="rating-2"/> <label class="rating__label" for="value-2-2" data-reaction="serious"> <svg class="rating__label__icon svg-icon stroke--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#heart"></use> </svg> </label> <input type="radio" id="value-2-1" name="rating-2"/> <label class="rating__label" for="value-2-1" data-reaction="less-angry"> <svg class="rating__label__icon svg-icon stroke--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#heart"></use> </svg> </label> <input type="radio" id="value-2-0" name="rating-2" checked="checked"/> <label class="rating__label" for="value-2-0" data-reaction="angry"> <svg class="rating__label__icon svg-icon stroke--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#heart"></use> </svg> </label> </div> </fieldset> <fieldset class="space--medium"> <legend class="accessible-hide">Effect 2</legend> <div class="rating rating__fx--0 flexy__item flexy--reverse-row"> <input type="radio" id="value-0-4" name="rating-0"/> <label class="rating__label sparks" for="value-0-4"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-0-3" name="rating-0"/> <label class="rating__label" for="value-0-3"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-0-2" name="rating-0"/> <label class="rating__label" for="value-0-2"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-0-1" name="rating-0"/> <label class="rating__label" for="value-0-1"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-0-0" name="rating-0" checked="checked"/> <label class="rating__label" for="value-0-0"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> </div> </fieldset> <fieldset class="space--medium"> <legend class="accessible-hide">Effect 3</legend> <div class="rating rating__fx--1 flexy__item flexy--reverse-row"> <input type="radio" id="value-1-4" name="rating-1"/> <label class="rating__label sparks" for="value-1-4"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-1-3" name="rating-1"/> <label class="rating__label" for="value-1-3"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-1-2" name="rating-1"/> <label class="rating__label" for="value-1-2"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-1-1" name="rating-1"/> <label class="rating__label" for="value-1-1"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <input type="radio" id="value-1-0" name="rating-1" checked="checked"/> <label class="rating__label" for="value-1-0"> <svg class="rating__label__icon svg-icon fill--white"> <use class="use" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use> </svg> </label> <div class="rating__background"></div> </div> </fieldset> </form> </article> </section> <header class="header"> <h1><a href="http://tadaima.studio" title="Go to Tadaima"></a></h1> </header>
</main>
<svg class="svg-bg" xmlns="http://www.w3.org/2000/svg"> <defs> <circle id="a" cx="1468" cy="133" r="35"></circle> <mask id="h" x="0" y="0" width="70" height="70" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> </mask> <circle id="b" cx="236.5" cy="732.5" r="23.5"></circle> <mask id="i" x="0" y="0" width="47" height="47" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> </mask> <circle id="c" cx="1120.5" cy="945.5" r="28.5"></circle> <mask id="j" x="0" y="0" width="57" height="57" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> </mask> <path id="d" d="M1193.375 302.875l44.6 77.25h-89.2z"></path> <mask id="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"></use> </mask> <path id="e" d="M1610.8 513.3l34.14 59.128h-68.278z"></path> <mask id="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"></use> </mask> <path id="f" d="M51.045 967.864l38.314 66.362H12.73z"></path> <mask id="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"></use> </mask> <path id="g" d="M46.045 311.097l26.5 45.897H19.546z"></path> <mask id="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"></use> </mask> </defs> <g style="mix-blend-mode:overlay" fill="none" fill-rule="evenodd" opacity=".35" stroke="#FFF"> <use class="svg-bg_element" mask="url(#h)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> <use class="svg-bg_element" mask="url(#i)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> <use class="svg-bg_element opacity-anim" mask="url(#j)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> <path class="stroke-anim" d="M657.5 848.5l46 46" stroke-width="3" stroke-linecap="square"></path> <path d="M1360.5 1206.5l89-89M761.5 42.5l42-42" stroke-width="3" stroke-linecap="square"></path> <use class="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> <use class="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> <use class="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> <use class="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"></use> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Ratings Inspiration - Script Codes CSS Codes
@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; } } } }
}
Ratings Inspiration - Script Codes JS Codes
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); }
Developer | Tadaima |
Username | tadaima |
Uploaded | December 01, 2022 |
Rating | 4.5 |
Size | 106,676 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Progress Ball | 105,332 Kb |
Safe Range Tooltip | 100,215 Kb |
Pure CSS Radial Chart | 105,429 Kb |
CSS Preloaders | 97,977 Kb |
Infinite Calendar | 104,555 Kb |
CSS Dropdown | 103,937 Kb |
HTML5 Video Player | 101,864 Kb |
Letter I | 97,110 Kb |
Logo Effect | 104,723 Kb |
CSS Random Mosaic | 107,691 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Hello People | Danburrows | 2,365 Kb |
Twitch TV | Natester13 | 4,488 Kb |
Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Sticky footer testing | 75th | 1,649 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!