<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Animated Chart</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<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>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
@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: 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;
}
(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);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFBLFVBQUEsR0FBYSxRQUFBLENBQUEsQ0FBQTtJQUNYLENBQUEsQ0FBRSxNQUFGLENBQVMsQ0FBQyxXQUFWLENBQXNCLFFBQXRCO1dBQ0EsVUFBQSxDQUFZLFFBQUEsQ0FBQSxDQUFBO2FBQ1YsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFFBQVYsQ0FBbUIsUUFBbkI7SUFEVSxDQUFaLEVBRUUsR0FGRjtFQUZXOztFQU1iLENBQUEsQ0FBRSxpQkFBRixDQUFvQixDQUFDLEVBQXJCLENBQXdCLE9BQXhCLEVBQWlDLFFBQUEsQ0FBQSxDQUFBO1dBQy9CLFVBQUEsQ0FBQTtFQUQrQixDQUFqQzs7RUFHQSxVQUFBLENBQUE7QUFUQSIsInNvdXJjZXNDb250ZW50IjpbImxvYWRfY2hhcnQgPSAoKSAtPlxuICAkKFwiYm9keVwiKS5yZW1vdmVDbGFzcyhcImxvYWRlZFwiKVxuICBzZXRUaW1lb3V0KCAoKSAtPlxuICAgICQoXCJib2R5XCIpLmFkZENsYXNzKFwibG9hZGVkXCIpXG4gICwgNTAwKVxuXG4kKFwiLmpzLWRvLWl0LWFnYWluXCIpLm9uIFwiY2xpY2tcIiwgKCkgLT5cbiAgbG9hZF9jaGFydCgpXG4gIFxubG9hZF9jaGFydCgpIl19
//# sourceURL=coffeescript