Pure CSS Radial Chart
How do I make an pure css radial chart?
An interactive, scalable and customizable radial-chart, crafted without JavaScript. Stable for Chrome, Firefox, Safari, IE 10+, Vivaldi & Opera.. What is a pure css radial chart? How do you make a pure css radial chart? This script and codes were developed by Tadaima on 01 December 2022, Thursday.
Pure CSS Radial Chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Radial Chart</title> <title>Pure CSS Radial Chart</title> <meta charset="utf-8"> <meta name="description" content="Pure CSS Radial Chart. An interactive, scalable and customizable radial-chart, crafted without JavaScript. Stable for Chrome, Firefox, Safari, IE 10+, Vivaldi & Opera."> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable = yes"> <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="dot" viewbox="0 0 32 32"> <title>Dit 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> </defs>
</svg>
<main> <section class="section space--medium"> <header class="header accessible-hide"> <h2>Infinite Calendar</h2> </header> <article class="flexy__child"> <header class="header accessible-hide"> <h3>A liquid & 'light-weight' calendar without any library.</h3> </header> <input class="change-values" type="radio" name="values" id="change-values_0" checked="checked"/> <input class="change-values" type="radio" name="values" id="change-values_1"/> <input class="change-values" type="radio" name="values" id="change-values_2"/> <div class="flexy__item flexy--justify-center"> <div class="chart chart__pie__shadow big"> <div class="chart__pie__icon flexy__item flexy--items-center flexy--justify-center"> <svg class="svg-icon fill--white" width="512" height="512" viewBox="0 0 512 512"> <g> <polygon points="164,240.6 164,271.1 186.2,255.5 "></polygon> <polygon points="300.4,241.8 336.2,217.7 266.6,169.3 266.8,217.4 "></polygon> <polygon points="242,216.3 242,169.3 173.3,217.4 207.65,240.4 "></polygon> <path d="m374,0h-236c-76.2,0-138,61.8-138,138v236c0,76.2 61.8,138 138,138h236c76.2,0 138-61.8 138-138v-236c0-76.2-61.8-138-138-138zm-3,291.5c0,6.2-3.3,12.1-8.5,15.5l-97.1,64.1c-6.2,4.1-14.35,4.1-20.55,0l-95.325-62.9c-5.2-3.4-8.525-9.3-8.525-15.5v-70.2c0-6.1 3.2-11.8 8.2-15.3l93.6-65.2c6.3-4.4 14.65-4.5 20.95-0.3l98.725,65.3c5.2,3.4 8.525,9.3 8.525,15.5v69z"></path> <polygon points="267,293.4 267,340.9 336.05,294.7 300.275,271.2 "></polygon> <polygon points="243,293.5 208.15,270.2 173.625,294.4 243,340.833 "></polygon> <polygon points="346,271.9 346,240.6 322.4,256.4 "></polygon> <polygon points="252.1,239.4 229.6,255.1 255.1,272.2 278.3,256.6 "></polygon> </g> </svg> </div> <svg class="chart__pie" width="1em" height="1em" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <defs> <filter id="glow" x="-120%" y="-120%" width="400%" height="400%"> <feoffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feoffset> <fegaussianblur result="blurOut" in="offOut" stddeviation="10"></fegaussianblur> <feblend in="SourceGraphic" in2="blurOut" mode="multiply"></feblend> </filter> </defs> <circle class="stroke--white chart__pie__circle--base" r=".5em" cx=".5em" cy=".5em" fill="none"></circle> <circle class="stroke--white chart__pie__circle" r=".5em" cx=".5em" cy=".5em" fill="none" filter="url(#glow)"></circle> </svg> <div class="chart__tooltip" data-tooltip-content="25"></div> </div> </div> <div class="flexy__item flexy--justify-center space--medium"> <div class="chart chart__pie__shadow medium"> <div class="chart__pie__icon flexy__item flexy--items-center flexy--justify-center"> <svg class="svg-icon fill--white" width="512" height="512" viewBox="0 0 512 512"> <g> <polygon points="164,240.6 164,271.1 186.2,255.5 "></polygon> <polygon points="300.4,241.8 336.2,217.7 266.6,169.3 266.8,217.4 "></polygon> <polygon points="242,216.3 242,169.3 173.3,217.4 207.65,240.4 "></polygon> <path d="m374,0h-236c-76.2,0-138,61.8-138,138v236c0,76.2 61.8,138 138,138h236c76.2,0 138-61.8 138-138v-236c0-76.2-61.8-138-138-138zm-3,291.5c0,6.2-3.3,12.1-8.5,15.5l-97.1,64.1c-6.2,4.1-14.35,4.1-20.55,0l-95.325-62.9c-5.2-3.4-8.525-9.3-8.525-15.5v-70.2c0-6.1 3.2-11.8 8.2-15.3l93.6-65.2c6.3-4.4 14.65-4.5 20.95-0.3l98.725,65.3c5.2,3.4 8.525,9.3 8.525,15.5v69z"></path> <polygon points="267,293.4 267,340.9 336.05,294.7 300.275,271.2 "></polygon> <polygon points="243,293.5 208.15,270.2 173.625,294.4 243,340.833 "></polygon> <polygon points="346,271.9 346,240.6 322.4,256.4 "></polygon> <polygon points="252.1,239.4 229.6,255.1 255.1,272.2 278.3,256.6 "></polygon> </g> </svg> </div> <svg class="chart__pie" width="1em" height="1em" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <defs> <filter id="glow" x="-120%" y="-120%" width="400%" height="400%"> <feoffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feoffset> <fegaussianblur result="blurOut" in="offOut" stddeviation="10"></fegaussianblur> <feblend in="SourceGraphic" in2="blurOut" mode="multiply"></feblend> </filter> </defs> <circle class="stroke--white chart__pie__circle--base" r=".5em" cx=".5em" cy=".5em" fill="none"></circle> <circle class="stroke--white chart__pie__circle" r=".5em" cx=".5em" cy=".5em" fill="none" filter="url(#glow)"></circle> </svg> <div class="chart__tooltip" data-tooltip-content="25"></div> </div> </div> <ul class="flexy__item flexy--justify-center values-list"> <li> <label for="change-values_0">85/100</label> </li> <li> <label for="change-values_1">65/100</label> </li> <li> <label for="change-values_2">15/100</label> </li> </ul> </article> </section> <header class="header"> <h1><a href="http://tadaima.studio" title="Go to Tadaima"> <svg class="logo-tadaima fill--white" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 80 80"> <title>Tadaima Studio.</title> <desc>A group of digital interface crafters.</desc> <g> <rect class="st5" y="0" width="80" height="80"></rect> </g> <lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="27.7468" y1="18.248" x2="52.244" y2="42.7452"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="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 "></polyline> <lineargradient id="SVGID_2_" gradientunits="userSpaceOnUse" x1="23.9948" y1="30.0043" x2="48.4901" y2="54.4996"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="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 "></polyline> </svg></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>
</body>
</html>
Pure CSS Radial Chart - Script Codes CSS Codes
$animDuration: $slowDuration;
.section { &__article { overflow: auto; min-height: 700px; }
}
.chart { $pieChartSize: 1em; $pieChartRadius: .5em; $pieChartLength: 2 * pi() * $pieChartRadius; $circleStrokeWidth: $pieChartSize / 5; width: $pieChartSize; height: $pieChartSize; position: relative; z-index: 2; margin-bottom: .2em; border-radius: 50%; box-shadow: 0 0 .2em .005em rgba(#FFB0A1, 1), inset 0 0 .2em .025em rgba(#FFB0A1, 1); &__tooltip { width: 1px; height: $pieChartSize; position: absolute; left: 50%; top: 0; // transform-origin: 50% 100%; transform: translate(-50%, 0); transition: all $animDuration ease-in-out; &:before { font-size: 6%; width: 1.5em; height: 1.5em; display: flex; align-items: center; justify-content: center; content: attr(data-tooltip-content); position: absolute; left: 50%; top: 0; transform: translate(-50%, -15%); background-color: $white; border-radius: 50%; padding: .75em; box-shadow: 0 0 2em 0 $white; transition: all $animDuration ease-in-out; color: lighten($gray, 30); } } &__pie { transform: rotate(-90deg); border-radius: $pieChartSize; &__icon { width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-size: 30%; opacity: .5; } &__circle { stroke-dasharray: $pieChartLength; stroke-dashoffset: $pieChartLength; stroke-width: $circleStrokeWidth; transition: all $animDuration ease-in-out; &--base { opacity: .25; stroke-width: $circleStrokeWidth; stroke-dasharray: ($pieChartLength / 100) 1px; } } &__shadow { $shadowDistance: 3.5em; &:before { content: ''; display: inline-block; position: absolute; bottom: 50%; left: 50%; border-radius: 100%; transform: translate(-50%, 50%) rotateX(80deg); width: $pieChartSize / 5; height: $pieChartSize / 5; box-shadow: 0 $shadowDistance .15em -.03em rgba(darken($red, 40), .5), 0 $shadowDistance .4em .15em rgba(darken($red, 40), .15), 0 $shadowDistance .6em .2em rgba(darken($red, 50), .1); } } @for $i from 0 through 100 { &[aria-valuenow='#{$i}'] { &~ .chart__tooltip { $rotationAngle: (360 / 100) * $i; transform: translate(-50%, 0) rotate($rotationAngle+deg); &:before { transform: translate(-50%, -19%) rotate(-$rotationAngle+deg); content: '#{$i}'; } } .chart__pie__circle { stroke-dashoffset: $pieChartLength - (($pieChartLength * $i) / 100); } } } }
}
.medium { font-size: 10em;
}
.big { font-size: 20em;
}
.change-values { display: none; &:checked { &:nth-of-type(1) ~ { .flexy__item .chart [aria-valuenow] .chart__pie__circle { stroke-dashoffset: 0.47124em; } .flexy__item .chart .chart__tooltip { transform: translate(-50%, 0) rotate(306deg); &:before { transform: translate(-50%, -19%) rotate(-306deg); content: '85'; } } .values-list li:nth-child(1) label { cursor: pointer; opacity: 1; box-shadow: 0 0 5em 0 rgba($white, .35), inset 0 0 2em 0 rgba($white, .35); } } &:nth-of-type(2) ~ { .flexy__item .chart [aria-valuenow] .chart__pie__circle { stroke-dashoffset: 1.09956em; } .flexy__item .chart .chart__tooltip { transform: translate(-50%, 0) rotate(234deg); &:before { transform: translate(-50%, -19%) rotate(-234deg); content: '65'; } } .values-list li:nth-child(2) label { cursor: pointer; opacity: 1; box-shadow: 0 0 5em 0 rgba($white, .35), inset 0 0 2em 0 rgba($white, .35); } } &:nth-of-type(3) ~ { .flexy__item .chart [aria-valuenow] .chart__pie__circle { stroke-dashoffset: 2.67035em; } .flexy__item .chart .chart__tooltip { transform: translate(-50%, 0) rotate(54deg); &:before { transform: translate(-50%, -19%) rotate(-54deg); content: "15"; } } .values-list li:nth-child(3) label { cursor: pointer; opacity: 1; box-shadow: 0 0 5em 0 rgba($white, .35), inset 0 0 2em 0 rgba($white, .35); } } }
}
label { width: 8em; text-align: center; display: inline-block; padding: 1em; box-sizing: border-box; // margin: 0 .65em; border-radius: 2px; border: 3px solid $white; color: $white; opacity: .6; box-shadow: 0 0 0 0 rgba($white, .5), inset 0 0 0 0 rgba($white, .5); transition: all ($animDuration / 2) ease-in-out; &:active, &:hover { cursor: pointer; opacity: 1; box-shadow: 0 0 5em 0 rgba($white, .35), inset 0 0 2em 0 rgba($white, .35); }
}
Developer | Tadaima |
Username | tadaima |
Uploaded | December 01, 2022 |
Rating | 3.5 |
Size | 105,429 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 |
Infinite Calendar | 104,555 Kb |
CSS Dropdown | 103,937 Kb |
CSS Preloaders | 97,977 Kb |
Bars Chart | 98,019 Kb |
HTML5 Video Player | 101,864 Kb |
Letter I | 97,110 Kb |
Ratings Inspiration | 106,676 Kb |
Progress Ball | 105,332 Kb |
CSS Random Mosaic | 107,691 Kb |
Logo Effect | 104,723 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 |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Degree Picker | Idered | 4,307 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 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!