Animated Chart
How do I make an animated chart?
Saw this on Dribbble today: https://dribbble.com/shots/2025084 and thought it might be a fun experiment to an HMTL/CSS version.. What is a animated chart? How do you make a animated chart? This script and codes were developed by Christian Naths on 29 November 2022, Tuesday.
Animated Chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Chart</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='chart'> <button class='js-do-it-again'> <span class='ion-loop'></span> </button> <svg viewbox='0 0 560 260'> <defs> <filter id='dropshadow'> <feGaussianBlur in='SourceAlpha' stdDeviation='3'></feGaussianBlur> <feOffset dx='0' dy='0' result='offsetblur'></feOffset> <feComponentTransfer> <feFuncA slope='0.2' type='linear'></feFuncA> </feComponentTransfer> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in='SourceGraphic'></feMergeNode> </feMerge> </filter> </defs> <g class='datasets'> <path class='dataset' d='M0,260 C0,260 4,252 7,252 C66,252 90,102 139,102 C188,102 205,135 252,135 C299,135 309,89 330,89 C350,89 366,122 404,122 C442,122 431,98 451,98 C470,98 499,213 560,260 L0,259 Z' id='dataset-3'></path> <path class='dataset' d='M0,260 C35,254 63,124 88,124 C114,124 148,163 219,163 C290,163 315,100 359,100 C402,100 520,244 560,259 C560,259 0,259 0,260 Z' id='dataset-2'></path> <path class='dataset' d='M0,260 C0,260 22,199 64,199 C105,199 112,144 154,144 C195,144 194,126 216,126 C237,126 263,184 314,184 C365,183 386,128 434,129 C483,130 511,240 560,260 L0,260 Z' id='dataset-1'></path> </g> </svg>
</div>
<div class='credit'> Credit the awesome work of Virgil Pana <span class='ion-social-dribbble'></span> <a href='https://dribbble.com/shots/2025084'>dribbble.com/shots/2025084</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated Chart - Script Codes CSS Codes
@import url("https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
body { background: #384051; color: rgba(255, 255, 255, 0.3); font-family: "Montserrat", sans-serif;
}
.credit { width: 560px; margin: 9em auto 3em auto; text-align: center; font-size: 0.75em;
}
a { text-decoration: none; color: #21A6EE;
}
.ion-social-dribbble { color: #EC4989;
}
.chart { position: relative; width: 560px; height: 260px; margin: 3em auto; background-image: -webkit-repeating-radial-gradient(center center, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 100%); background-image: repeating-radial-gradient(center center, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 100%); background-size: 29px 29px; background-position: -11px 11px;
}
.chart::before,
.chart::after { display: inline-block; font-size: 0.875em;
}
.chart::before { display: inline-block; position: absolute; left: -3.5em; top: -5px; content: "$4k \a$3k \a$2k \a$1k \a 0"; white-space: pre; height: 100%; line-height: 4.2; text-align: right;
}
.chart::after { content: "07:00h 21:00h"; width: 110%; margin-left: -5%; word-spacing: 36.5em; padding-top: 0.5em;
}
.dataset { fill-opacity: 0.8; -webkit-filter: url(#dropshadow); filter: url(#dropshadow);
}
#dataset-1 { fill: #50E3C2;
}
#dataset-2 { fill: #21A6EE;
}
#dataset-3 { fill: #807CCC;
}
.chart button { position: relative; top: -0.75em; border: none; background: rgba(255, 255, 255, 0.5); color: #384051; border-radius: 5px; padding: 0.25em 1em; font-size: 1em; float: right; cursor: pointer;
}
.chart button:focus { outline: none;
}
@-webkit-keyframes raise { 0% { -webkit-transform: scaleY(0.01); transform: scaleY(0.01); } 75% { -webkit-transform: scaleY(1.1); transform: scaleY(1.1); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes raise { 0% { -webkit-transform: scaleY(0.01); transform: scaleY(0.01); } 75% { -webkit-transform: scaleY(1.1); transform: scaleY(1.1); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
.dataset { -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scaleY(0.01); transform: scaleY(0.01); opacity: 0.5;
}
.loaded .dataset { opacity: 1; -webkit-animation: raise 0.5s ease 0.2s forwards; animation: raise 0.5s ease 0.2s forwards;
}
.loaded #dataset-1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
.loaded #dataset-2 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s;
}
.loaded #dataset-3 { -webkit-animation-delay: 0s; animation-delay: 0s;
}
Animated Chart - Script Codes JS Codes
(function() { var load_chart; load_chart = function() { $("body").removeClass("loaded"); return setTimeout(function() { return $("body").addClass("loaded"); }, 500); }; $(".js-do-it-again").on("click", function() { return load_chart(); }); load_chart();
}).call(this);
Developer | Christian Naths |
Username | christiannaths |
Uploaded | November 29, 2022 |
Rating | 4.5 |
Size | 5,214 Kb |
Views | 14,168 |
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 |
Responsive App Layout | 5,661 Kb |
Next Game Widget | 7,025 Kb |
Animated Open Mentorship Logo | 2,710 Kb |
Responsive Admin Panel | 4,254 Kb |
Collection-bootstrap | 2,843 Kb |
MicroHero Logo Animation | 5,290 Kb |
Off-Canvas Responsive Layout | 52,985 Kb |
CSS-Only Inputs | 4,678 Kb |
A Pen by Christian Naths | 2,563 Kb |
Pure CSS Radial Graph | 2,363 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 |
Cars going | Netoguimaraes | 1,699 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
AngularJS Skills | Supro | 3,312 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!