cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .chart
  %button.js-do-it-again
    %span.ion-loop
    
  %svg(viewbox="0 0 560 260")
    %defs
      %filter#dropshadow
        %feGaussianBlur(in="SourceAlpha" stdDeviation="3")
        %feOffset(dx="0" dy="0" result="offsetblur")
        %feComponentTransfer
          %feFuncA(slope="0.2" type="linear")
        %feMerge
          %feMergeNode
          %feMergeNode(in="SourceGraphic")
    %g.datasets
      %path#dataset-3.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")
      %path#dataset-2.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")
      %path#dataset-1.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")

.credit 
  Credit the awesome work of Virgil Pana
  %span.ion-social-dribbble
  %a(href="https://dribbble.com/shots/2025084") dribbble.com/shots/2025084
            
          
!
            
              @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")

$green: #50E3C2
$blue: #21A6EE
$purple: #807CCC
$navy: #384051
$dot-color: fade-out(white, 0.9)
$text-color: fade-out(white, 0.7)

body 
  background: $navy
  color: $text-color
  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: $blue

.ion-social-dribbble
  color: #EC4989

.chart 
  position: relative
  width: 560px
  height: 260px
  margin: 3em auto
  background-image: repeating-radial-gradient(center center, $dot-color, $dot-color 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
  filter: url(#dropshadow)

#dataset-1 
  fill: $green

#dataset-2 
  fill: $blue

#dataset-3 
  fill: $purple

.chart button
  position: relative
  top: -0.75em
  border: none
  background: fade-out(white, 0.5)
  color: $navy
  border-radius: 5px
  padding: 0.25em 1em
  font-size: 1em
  float: right
  cursor: pointer
  
  &:focus
    outline: none

//---------------------- animations
@keyframes raise 
  0%    
    transform: scaleY(0.01)
  75%   
    transform: scaleY(1.1)
  100%  
    transform: scaleY(1)

.dataset 
  transform-origin: bottom
  transform: scaleY(0.01)
  opacity: 0.5

.loaded .dataset 
  opacity: 1
  animation: raise 0.5s ease 0.2s forwards

.loaded #dataset-1 
  animation-delay: 0.2s

.loaded #dataset-2 
  animation-delay: 0.1s

.loaded #dataset-3 
  animation-delay: 0s
            
          
!
            
              load_chart = () ->
  $("body").removeClass("loaded")
  setTimeout( () ->
    $("body").addClass("loaded")
  , 500)

$(".js-do-it-again").on "click", () ->
  load_chart()
  
load_chart()
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console