Animated Chart

Developer
Christian Naths
Size
5,214 Kb
Views
14,168
  1. Animated Chart Previews
  2. Animated Chart HTML Codes
  3. Animated Chart CSS Codes
  4. Animated Chart JS Codes

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 Previews
IQ Test

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);
Animated Chart - Script Codes
Animated Chart - Script Codes
Home Page Home
Developer Christian Naths
Username christiannaths
Uploaded November 29, 2022
Rating 4.5
Size 5,214 Kb
Views 14,168
Do you need developer help for Animated Chart?

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!

Christian Naths (christiannaths) Script Codes
Name
Animated Open Mentorship Logo
Activity Timeline
A Pen by Christian Naths
MicroHero Logo Animation
CSS-Only Inputs
Responsive Admin Panel 2
Upcoming Event Stream
Checkbox Switch
Off-Canvas Responsive Layout
Responsive App Layout
Create amazing captions with AI!

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!