LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Top 50 Codepen Users by Follower Count

As of July 26, 2015

Chris Coyier had double the amount of the highest follower count. He's so popular we had to omit him because he was visually skewing the data.

CSS
/* ------------------------------
      best seen full screen:
https://codepen.io/sdras/full/XbybLo/
------------------------------ */
body {
  background: #222;
  color: #777;
  font-family: 'Oxygen';
}

.ct-label {
  fill: #777;
  color: #777;
  font-size: 0.75rem;
  line-height: 1;
}

.ct-chart-line .ct-label,
.ct-chart-bar .ct-label {
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ct-label.ct-horizontal.ct-start {
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: start;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: start;
}

.ct-label.ct-vertical.ct-start {
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: flex-end;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: end;
}

.ct-label.ct-vertical.ct-end {
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: start;
}

.ct-chart-bar .ct-label.ct-horizontal.ct-start {
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: start;
}

.ct-chart-bar .ct-label.ct-horizontal.ct-end {
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: start;
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: start;
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: start;
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: left;
  -webkit-box-pack: flex-end;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: end;
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: left;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: left;
  justify-content: left;
  text-align: left;
  text-anchor: end;
}

.ct-grid {
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1px;
  stroke-dasharray: 2px;
}

.ct-point {
  stroke-width: 10px;
  stroke-linecap: round;
}

.ct-line {
  fill: none;
  stroke-width: 4px;
  -webkit-transition: 0.5s ease all;
  transition: 0.5s ease all;
}

.ct-area {
  stroke: none;
  fill-opacity: 0.1;
}

.ct-bar {
  fill: none;
  stroke-width: 10px;
  -webkit-transition: 0.8s ease-in all;
  transition: 0.8s ease-in all;
}

.ct-slice-donut {
  fill: none;
  stroke-width: 60px;
}

.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
  stroke: #d70206;
}
.ct-series-a .ct-slice-pie, .ct-series-a .ct-area {
  fill: #d70206;
}

.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
  stroke: #f05b4f;
}
.ct-series-b .ct-slice-pie, .ct-series-b .ct-area {
  fill: #f05b4f;
}

.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
  stroke: #f4c63d;
}
.ct-series-c .ct-slice-pie, .ct-series-c .ct-area {
  fill: #f4c63d;
}

.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
  stroke: #d17905;
}
.ct-series-d .ct-slice-pie, .ct-series-d .ct-area {
  fill: #d17905;
}

.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
  stroke: #59922b;
}
.ct-series-e .ct-slice-pie, .ct-series-e .ct-area {
  fill: #59922b;
}

.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
  stroke: #14846B;
}
.ct-series-f .ct-slice-pie, .ct-series-f .ct-area {
  fill: #14846B;
}

.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
  stroke: #0544d3;
}
.ct-series-g .ct-slice-pie, .ct-series-g .ct-area {
  fill: #0544d3;
}

.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
  stroke: #6b0392;
}
.ct-series-h .ct-slice-pie, .ct-series-h .ct-area {
  fill: #6b0392;
}

.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
  stroke: #f05b4f;
}
.ct-series-i .ct-slice-pie, .ct-series-i .ct-area {
  fill: #f05b4f;
}

.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
  stroke: #dda458;
}
.ct-series-j .ct-slice-pie, .ct-series-j .ct-area {
  fill: #dda458;
}

.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
  stroke: #CE123C;
}
.ct-series-k .ct-slice-pie, .ct-series-k .ct-area {
  fill: #CE123C;
}

.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
  stroke: #86797d;
}
.ct-series-l .ct-slice-pie, .ct-series-l .ct-area {
  fill: #86797d;
}

.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
  stroke: #b2c326;
}
.ct-series-m .ct-slice-pie, .ct-series-m .ct-area {
  fill: #b2c326;
}

.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
  stroke: #6188e2;
}
.ct-series-n .ct-slice-pie, .ct-series-n .ct-area {
  fill: #6188e2;
}

.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut {
  stroke: #a748ca;
}
.ct-series-o .ct-slice-pie, .ct-series-o .ct-area {
  fill: #a748ca;
}

.ct-series-p .ct-point, .ct-series-p .ct-line, .ct-series-p .ct-bar, .ct-series-p .ct-slice-donut {
  stroke: #d70206;
}
.ct-series-p .ct-slice-pie, .ct-series-p .ct-area {
  fill: #d70206;
}

.ct-series-q .ct-point, .ct-series-q .ct-line, .ct-series-q .ct-bar, .ct-series-q .ct-slice-donut {
  stroke: #f05b4f;
}
.ct-series-q .ct-slice-pie, .ct-series-q .ct-area {
  fill: #f05b4f;
}

.ct-series-r .ct-point, .ct-series-r .ct-line, .ct-series-r .ct-bar, .ct-series-r .ct-slice-donut {
  stroke: #f4c63d;
}
.ct-series-r .ct-slice-pie, .ct-series-r .ct-area {
  fill: #f4c63d;
}

.ct-series-s .ct-point, .ct-series-s .ct-line, .ct-series-s .ct-bar, .ct-series-s .ct-slice-donut {
  stroke: #d17905;
}
.ct-series-s .ct-slice-pie, .ct-series-s .ct-area {
  fill: #d17905;
}

.ct-series-t .ct-point, .ct-series-t .ct-line, .ct-series-t .ct-bar, .ct-series-t .ct-slice-donut {
  stroke: #59922b;
}
.ct-series-t .ct-slice-pie, .ct-series-t .ct-area {
  fill: #59922b;
}

.ct-series-u .ct-point, .ct-series-u .ct-line, .ct-series-u .ct-bar, .ct-series-u .ct-slice-donut {
  stroke: #14846B;
}
.ct-series-u .ct-slice-pie, .ct-series-u .ct-area {
  fill: #14846B;
}

.ct-series-v .ct-point, .ct-series-v .ct-line, .ct-series-v .ct-bar, .ct-series-v .ct-slice-donut {
  stroke: #0544d3;
}
.ct-series-v .ct-slice-pie, .ct-series-v .ct-area {
  fill: #0544d3;
}

.ct-series-w .ct-point, .ct-series-w .ct-line, .ct-series-w .ct-bar, .ct-series-w .ct-slice-donut {
  stroke: #6b0392;
}
.ct-series-w .ct-slice-pie, .ct-series-w .ct-area {
  fill: #6b0392;
}

.ct-series-x .ct-point, .ct-series-x .ct-line, .ct-series-x .ct-bar, .ct-series-x .ct-slice-donut {
  stroke: #f05b4f;
}
.ct-series-x .ct-slice-pie, .ct-series-x .ct-area {
  fill: #f05b4f;
}

.ct-series-y .ct-point, .ct-series-y .ct-line, .ct-series-y .ct-bar, .ct-series-y .ct-slice-donut {
  stroke: #dda458;
}
.ct-series-y .ct-slice-pie, .ct-series-y .ct-area {
  fill: #dda458;
}

.ct-series-z .ct-point, .ct-series-z .ct-line, .ct-series-z .ct-bar, .ct-series-z .ct-slice-donut {
  stroke: #CE123C;
}
.ct-series-z .ct-slice-pie, .ct-series-z .ct-area {
  fill: #CE123C;
}

.ct-series-aa .ct-point, .ct-series-aa .ct-line, .ct-series-aa .ct-bar, .ct-series-aa .ct-slice-donut {
  stroke: #86797d;
}
.ct-series-aa .ct-slice-pie, .ct-series-aa .ct-area {
  fill: #86797d;
}

.ct-series-bb .ct-point, .ct-series-bb .ct-line, .ct-series-bb .ct-bar, .ct-series-bb .ct-slice-donut {
  stroke: #b2c326;
}
.ct-series-bb .ct-slice-pie, .ct-series-bb .ct-area {
  fill: #b2c326;
}

.ct-series-cc .ct-point, .ct-series-cc .ct-line, .ct-series-cc .ct-bar, .ct-series-cc .ct-slice-donut {
  stroke: #6188e2;
}
.ct-series-cc .ct-slice-pie, .ct-series-cc .ct-area {
  fill: #6188e2;
}

.ct-square {
  display: block;
  position: relative;
  width: 100%;
}
.ct-square:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 100%;
}
.ct-square:after {
  content: "";
  display: table;
  clear: both;
}
.ct-square > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-minor-second {
  display: block;
  position: relative;
  width: 100%;
}
.ct-minor-second:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 93.75%;
}
.ct-minor-second:after {
  content: "";
  display: table;
  clear: both;
}
.ct-minor-second > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-major-second {
  display: block;
  position: relative;
  width: 100%;
}
.ct-major-second:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 88.88889%;
}
.ct-major-second:after {
  content: "";
  display: table;
  clear: both;
}
.ct-major-second > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-minor-third {
  display: block;
  position: relative;
  width: 100%;
}
.ct-minor-third:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 83.33333%;
}
.ct-minor-third:after {
  content: "";
  display: table;
  clear: both;
}
.ct-minor-third > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-major-third {
  display: block;
  position: relative;
  width: 100%;
}
.ct-major-third:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 80%;
}
.ct-major-third:after {
  content: "";
  display: table;
  clear: both;
}
.ct-major-third > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-perfect-fourth {
  display: block;
  position: relative;
  width: 100%;
}
.ct-perfect-fourth:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 75%;
}
.ct-perfect-fourth:after {
  content: "";
  display: table;
  clear: both;
}
.ct-perfect-fourth > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-perfect-fifth {
  display: block;
  position: relative;
  width: 100%;
}
.ct-perfect-fifth:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 66.66667%;
}
.ct-perfect-fifth:after {
  content: "";
  display: table;
  clear: both;
}
.ct-perfect-fifth > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-minor-sixth {
  display: block;
  position: relative;
  width: 100%;
}
.ct-minor-sixth:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 62.5%;
}
.ct-minor-sixth:after {
  content: "";
  display: table;
  clear: both;
}
.ct-minor-sixth > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-golden-section {
  display: block;
  position: relative;
  width: 100%;
}
.ct-golden-section:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 61.8047%;
}
.ct-golden-section:after {
  content: "";
  display: table;
  clear: both;
}
.ct-golden-section > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-major-sixth {
  display: block;
  position: relative;
  width: 100%;
}
.ct-major-sixth:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 60%;
}
.ct-major-sixth:after {
  content: "";
  display: table;
  clear: both;
}
.ct-major-sixth > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-minor-seventh {
  display: block;
  position: relative;
  width: 100%;
}
.ct-minor-seventh:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 56.25%;
}
.ct-minor-seventh:after {
  content: "";
  display: table;
  clear: both;
}
.ct-minor-seventh > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-major-seventh {
  display: block;
  position: relative;
  width: 100%;
}
.ct-major-seventh:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 53.33333%;
}
.ct-major-seventh:after {
  content: "";
  display: table;
  clear: both;
}
.ct-major-seventh > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-octave {
  display: block;
  position: relative;
  width: 100%;
}
.ct-octave:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 50%;
}
.ct-octave:after {
  content: "";
  display: table;
  clear: both;
}
.ct-octave > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-major-tenth {
  display: block;
  position: relative;
  width: 100%;
}
.ct-major-tenth:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 40%;
}
.ct-major-tenth:after {
  content: "";
  display: table;
  clear: both;
}
.ct-major-tenth > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-major-eleventh {
  display: block;
  position: relative;
  width: 100%;
}
.ct-major-eleventh:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 37.5%;
}
.ct-major-eleventh:after {
  content: "";
  display: table;
  clear: both;
}
.ct-major-eleventh > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-major-twelfth {
  display: block;
  position: relative;
  width: 100%;
}
.ct-major-twelfth:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 33.33333%;
}
.ct-major-twelfth:after {
  content: "";
  display: table;
  clear: both;
}
.ct-major-twelfth > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-double-octave {
  display: block;
  position: relative;
  width: 100%;
}
.ct-double-octave:before {
  display: block;
  float: left;
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 25%;
}
.ct-double-octave:after {
  content: "";
  display: table;
  clear: both;
}
.ct-double-octave > svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-transform: rotate(90deg) translateX(10px);
          transform: rotate(90deg) translateX(10px);
  -webkit-transition: 0.35 all ease;
  transition: 0.35 all ease;
}
.ct-label.ct-horizontal.ct-end:hover {
  color: #999;
  -webkit-transition: 0.5 all ease;
  transition: 0.5 all ease;
  cursor: pointer;
}

svg {
  height: 530px !important;
  width: 96% !important;
  margin: 30px;
  padding-bottom: 40px;
}

h2 {
  margin-top: 25px;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 0;
}

p {
  text-align: center;
  margin-top: 6px;
  color: #444;
}

h3 {
  margin: 80px auto 100px;
  text-align: center;
  margin-left: 15%;
  width: 70%;
}

.ct-bar:hover {
  stroke-width: 15px;
  -webkit-transition: 0.3s ease-out all;
  transition: 0.3s ease-out all;
  cursor: pointer;
}

.ct-series {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.ct-series:nth-child(1) {
  -webkit-animation: grow 1s 0.05s ease-out both;
          animation: grow 1s 0.05s ease-out both;
}

.ct-series:nth-child(2) {
  -webkit-animation: grow 1s 0.1s ease-out both;
          animation: grow 1s 0.1s ease-out both;
}

.ct-series:nth-child(3) {
  -webkit-animation: grow 1s 0.15s ease-out both;
          animation: grow 1s 0.15s ease-out both;
}

.ct-series:nth-child(4) {
  -webkit-animation: grow 1s 0.2s ease-out both;
          animation: grow 1s 0.2s ease-out both;
}

.ct-series:nth-child(5) {
  -webkit-animation: grow 1s 0.25s ease-out both;
          animation: grow 1s 0.25s ease-out both;
}

.ct-series:nth-child(6) {
  -webkit-animation: grow 1s 0.3s ease-out both;
          animation: grow 1s 0.3s ease-out both;
}

.ct-series:nth-child(7) {
  -webkit-animation: grow 1s 0.35s ease-out both;
          animation: grow 1s 0.35s ease-out both;
}

.ct-series:nth-child(8) {
  -webkit-animation: grow 1s 0.4s ease-out both;
          animation: grow 1s 0.4s ease-out both;
}

.ct-series:nth-child(9) {
  -webkit-animation: grow 1s 0.45s ease-out both;
          animation: grow 1s 0.45s ease-out both;
}

.ct-series:nth-child(10) {
  -webkit-animation: grow 1s 0.5s ease-out both;
          animation: grow 1s 0.5s ease-out both;
}

.ct-series:nth-child(11) {
  -webkit-animation: grow 1s 0.55s ease-out both;
          animation: grow 1s 0.55s ease-out both;
}

.ct-series:nth-child(12) {
  -webkit-animation: grow 1s 0.6s ease-out both;
          animation: grow 1s 0.6s ease-out both;
}

.ct-series:nth-child(13) {
  -webkit-animation: grow 1s 0.65s ease-out both;
          animation: grow 1s 0.65s ease-out both;
}

.ct-series:nth-child(14) {
  -webkit-animation: grow 1s 0.7s ease-out both;
          animation: grow 1s 0.7s ease-out both;
}

.ct-series:nth-child(15) {
  -webkit-animation: grow 1s 0.75s ease-out both;
          animation: grow 1s 0.75s ease-out both;
}

.ct-series:nth-child(16) {
  -webkit-animation: grow 1s 0.8s ease-out both;
          animation: grow 1s 0.8s ease-out both;
}

.ct-series:nth-child(17) {
  -webkit-animation: grow 1s 0.85s ease-out both;
          animation: grow 1s 0.85s ease-out both;
}

.ct-series:nth-child(18) {
  -webkit-animation: grow 1s 0.9s ease-out both;
          animation: grow 1s 0.9s ease-out both;
}

.ct-series:nth-child(19) {
  -webkit-animation: grow 1s 0.95s ease-out both;
          animation: grow 1s 0.95s ease-out both;
}

.ct-series:nth-child(20) {
  -webkit-animation: grow 1s 1s ease-out both;
          animation: grow 1s 1s ease-out both;
}

.ct-series:nth-child(21) {
  -webkit-animation: grow 1s 1.05s ease-out both;
          animation: grow 1s 1.05s ease-out both;
}

.ct-series:nth-child(22) {
  -webkit-animation: grow 1s 1.1s ease-out both;
          animation: grow 1s 1.1s ease-out both;
}

.ct-series:nth-child(23) {
  -webkit-animation: grow 1s 1.15s ease-out both;
          animation: grow 1s 1.15s ease-out both;
}

.ct-series:nth-child(24) {
  -webkit-animation: grow 1s 1.2s ease-out both;
          animation: grow 1s 1.2s ease-out both;
}

.ct-series:nth-child(25) {
  -webkit-animation: grow 1s 1.25s ease-out both;
          animation: grow 1s 1.25s ease-out both;
}

.ct-series:nth-child(26) {
  -webkit-animation: grow 1s 1.3s ease-out both;
          animation: grow 1s 1.3s ease-out both;
}

.ct-series:nth-child(27) {
  -webkit-animation: grow 1s 1.35s ease-out both;
          animation: grow 1s 1.35s ease-out both;
}

.ct-series:nth-child(28) {
  -webkit-animation: grow 1s 1.4s ease-out both;
          animation: grow 1s 1.4s ease-out both;
}

.ct-series:nth-child(29) {
  -webkit-animation: grow 1s 1.45s ease-out both;
          animation: grow 1s 1.45s ease-out both;
}

.ct-series:nth-child(30) {
  -webkit-animation: grow 1s 1.5s ease-out both;
          animation: grow 1s 1.5s ease-out both;
}

.ct-series:nth-child(31) {
  -webkit-animation: grow 1s 1.55s ease-out both;
          animation: grow 1s 1.55s ease-out both;
}

.ct-series:nth-child(32) {
  -webkit-animation: grow 1s 1.6s ease-out both;
          animation: grow 1s 1.6s ease-out both;
}

.ct-series:nth-child(33) {
  -webkit-animation: grow 1s 1.65s ease-out both;
          animation: grow 1s 1.65s ease-out both;
}

.ct-series:nth-child(34) {
  -webkit-animation: grow 1s 1.7s ease-out both;
          animation: grow 1s 1.7s ease-out both;
}

.ct-series:nth-child(35) {
  -webkit-animation: grow 1s 1.75s ease-out both;
          animation: grow 1s 1.75s ease-out both;
}

.ct-series:nth-child(36) {
  -webkit-animation: grow 1s 1.8s ease-out both;
          animation: grow 1s 1.8s ease-out both;
}

.ct-series:nth-child(37) {
  -webkit-animation: grow 1s 1.85s ease-out both;
          animation: grow 1s 1.85s ease-out both;
}

.ct-series:nth-child(38) {
  -webkit-animation: grow 1s 1.9s ease-out both;
          animation: grow 1s 1.9s ease-out both;
}

.ct-series:nth-child(39) {
  -webkit-animation: grow 1s 1.95s ease-out both;
          animation: grow 1s 1.95s ease-out both;
}

.ct-series:nth-child(40) {
  -webkit-animation: grow 1s 2s ease-out both;
          animation: grow 1s 2s ease-out both;
}

.ct-series:nth-child(41) {
  -webkit-animation: grow 1s 2.05s ease-out both;
          animation: grow 1s 2.05s ease-out both;
}

.ct-series:nth-child(42) {
  -webkit-animation: grow 1s 2.1s ease-out both;
          animation: grow 1s 2.1s ease-out both;
}

.ct-series:nth-child(43) {
  -webkit-animation: grow 1s 2.15s ease-out both;
          animation: grow 1s 2.15s ease-out both;
}

.ct-series:nth-child(44) {
  -webkit-animation: grow 1s 2.2s ease-out both;
          animation: grow 1s 2.2s ease-out both;
}

.ct-series:nth-child(45) {
  -webkit-animation: grow 1s 2.25s ease-out both;
          animation: grow 1s 2.25s ease-out both;
}

.ct-series:nth-child(46) {
  -webkit-animation: grow 1s 2.3s ease-out both;
          animation: grow 1s 2.3s ease-out both;
}

.ct-series:nth-child(47) {
  -webkit-animation: grow 1s 2.35s ease-out both;
          animation: grow 1s 2.35s ease-out both;
}

.ct-series:nth-child(48) {
  -webkit-animation: grow 1s 2.4s ease-out both;
          animation: grow 1s 2.4s ease-out both;
}

.ct-series:nth-child(49) {
  -webkit-animation: grow 1s 2.45s ease-out both;
          animation: grow 1s 2.45s ease-out both;
}

.ct-series:nth-child(50) {
  -webkit-animation: grow 1s 2.5s ease-out both;
          animation: grow 1s 2.5s ease-out both;
}

@-webkit-keyframes grow {
  0% {
    opacity: 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes grow {
  0% {
    opacity: 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

.ct-label.ct-horizontal.ct-end {
  -webkit-animation: appear 5s ease-out both;
          animation: appear 5s ease-out both;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tooltip {
  display: block;
  background: black;
  color: white;
  font-size: 12px;
  width: auto;
  position: absolute;
  border-radius: 3px;
  padding: 10px;
  pointer-events: none;
}

.ct-bar:hover + .ct-label {
  color: #999;
  -webkit-transition: 0.5 all ease;
  transition: 0.5 all ease;
  cursor: pointer;
}

svg:not(:root) {
  overflow: visible !important;
}
JS
new Chartist.Bar('.ct-chart', {
  "series": [2677, 2542, 1456, 1381, 1311, 1084, 1043, 1030, 1011, 1005, 981, 929, 838, 825, 809, 801, 800, 796, 758, 740, 694, 674, 651, 614, 570, 569, 544, 535, 531, 510, 476, 442, 434, 421, 405, 386, 381, 379, 374, 372, 367, 366, 366, 351, 348, 347, 334, 329, 322],
  "labels": ["ionic", "thebabydino", "lbebber", "hakimel", "rachsmith", "SaraSoueidan", "tholman", "GreenSock", "bradfrost", "tmrDevelops", "sdras", "dissimulate", "soulwire", "sol0mka", "chrisgannon", "suez", "HugoGiraudel", "befamous", "jackrugile", "bennettfeely", "Yakudoo", "fbrz", "desandro", "kenjiSpecial", "simurai", "grayghostvisuals", "adobe", "pixelass", "natewiley", "katydecorah", "yoksel", "noahblon", "jakealbaugh", "oknoblich", "Hornebom", "davatron5000", "joshnh", "andreasstorm", "fixcl", "TimPietrusky", "hugo", "juliangarnier", "rachelnabors", "LukyVj", "ge1doot", "jonitrythall", "dudleystorey", "paulirish", "valhead"]
}, {
  distributeSeries: true
});

var $chart = $('.ct-chart');

var $toolTip = $chart
  .append('
') .find('.tooltip') .hide(); $chart.on('mouseenter', '.ct-bar', function() { var $point = $(this), value = $point.attr('ct:value'), seriesName = $point.parent().attr('ct:series-name'); $toolTip.html(value).show(); }); $chart.on('mouseleave', '.ct-bar', function() { $toolTip.hide(); }); $chart.on('mousemove', function(event) { $toolTip.css({ left: (window.pageXOffset + event.originalEvent.clientX) - $toolTip.width() / 2 - 10, top: (window.pageYOffset + event.originalEvent.clientY) - $toolTip.height() - 30 }); });

Description

There's been a lot of stat data on codepen users data lately, and some people were curious about follower count. @dizzyd did all the hard stuff and heavy lifting of database-scraping, I just presented the data in a silly fun format.
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv