<!--View Full Screen For Best Experience & Please Note >> circle chart and bar graph animation does not accurately correspond with the actual numbers, it's just a visual !-->
<body>
<div class="container">
    <h1><small>CodePen</small><span class = 'stat'><a href = 'https://codepen.io/stats/'>STATS</a></span><br /><span class = 'date'>as of 12.9.2014</span><br/><span class ='quote'>"It's important that you prove your point with numbers."</i></span><br /><span class='auth'>- Samantha Levan</span></h1>
    <div class="statistics">
        <div>
            <h2 class="title-one">Unstoppable Growth</h2>
            <div class="rings">
                <div class="pie pie1">
                    <div class="title">Identified Users</div>
                    <div class="outer-right mask">
                        <div class="inner-right"></div>
                    </div>

                    <div class="outer-left mask">
                        <div class="inner-left"></div>
                    </div>
                    <div class="content">
                        <span>195,161</span>
                    </div>
                    <div class="arrow"></div>
                </div>

                <div class="pie pie2">
                    <div class="title">New Users</div>
                    <div class="outer-right mask">
                        <div class="inner-right"></div>
                    </div>

                    <div class="outer-left mask">
                        <div class="inner-left"></div>
                    </div>
                    <div class="content">
                        <span>373</span>
                    </div>
                    <div class="arrow"></div>
                </div>

                <div class="pie pie3">
                    <div class="title">Anonymous Users</div>
                    <div class="outer-right mask">
                        <div class="inner-right"></div>
                    </div>

                    <div class="outer-left mask">
                        <div class="inner-left"></div>
                    </div>
                    <div class="content">
                        <span>478,373</span>
                    </div>
                    <div class="arrow"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div>
            <h2 class="title-two">FrontEnd Activity</h2>
            <div class="circles">
                <div class="circle-one">
                    <div class="text">&nbsp;&nbsp;7,233<br />Created<br />&nbsp;&nbsp;Today</div>
                </div>
                <div class="circle-two">
                    <div class="text">Unique Pens<br />&nbsp;&nbsp;2,349,448</div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div>
            <h2 class="title-three">Activity Breakdown</h2>
            <div class="h-bars">
                <div class="bar-one"></div>
                <div class="bar-two"></div>
                <div class="bar-three"></div>
                <div class="bar-four"></div>
                <div class="bar-five"></div>
                <div class="clear"></div>
            </div>
        </div>
      </div>
    </body>
@import url(https://fonts.googleapis.com/css?family=Lato:700);


body
{
    font-family: 'Lato', sans-serif;
    background-color:#2980b9;
	width:100%;
	margin:0;
}

.container
{
    min-width:675px;
}

h1
{
    color:#fff;
    text-align:center;
    margin-top:90px;
}

.statistics
{
    width:100%;
    margin:0;
    border:1px solid #224761;
    border-radius:5px;
    padding:5px;
    padding-bottom:1em;
    background-color:#224761;
}

.statistics > div
{
    display:inline-block;
    min-width:500px;
    margin-left:5px;
 
}

*, *:before, *:after{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.clear
{
    clear:both;
}

p
{
    text-align:center;
}

p a
{
    color:#dd1111;
}

h2
{
    opacity:0;
    color:#fff;
    text-transform: uppercase;
    text-align:center;
}

h2.title-one
{
    animation: load-heading 1.6s linear;
    animation-fill-mode:forwards;
    -webkit-animation: load-heading 1.6s linear;
    -webkit-animation-fill-mode:forwards;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

h2.title-two
{
    animation: load-heading 1.6s linear;
    animation-fill-mode:forwards;
    -webkit-animation: load-heading 1.6s linear;
    -webkit-animation-fill-mode:forwards;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

h2.title-three
{
    animation: load-heading 1.6s linear;
    animation-fill-mode:forwards;
    -webkit-animation: load-heading 1.6s linear;
    -webkit-animation-fill-mode:forwards;
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

@keyframes load-heading
{
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes load-heading
{
    from {opacity: 0;}
    to {opacity: 1;}
}


.rings
{
    height:200px;
    padding-left:2em;
}

.arrow
{
    position: relative;
    height: 0px;
    width: 0px;
    border-top: 18px solid #dd1111;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    position:absolute;
    bottom:40px;
    left:57px;
    z-index:1;
    animation: load-arrow 1.6s linear;
    animation-fill-mode:forwards;
    -webkit-animation: load-arrow 1.6s linear;
    -webkit-animation-fill-mode:forwards;
}

@keyframes load-arrow
{
    from { transform: translate(0,0); }
    to { transform: translate(0,55px); }
}

@-webkit-keyframes load-arrow
{
    from { -webkit-transform: translate(0,0); }
    to { -webkit-transform: translate(0,55px); }
}

.pie
{
    width: 140px;
    height: 140px;
    position: relative;
    border-radius: 140px;
    background-color: #DD1111;
    float:left;
    margin-right:10px;
}

.pie .title
{
    position:absolute;
    bottom:-40px;
    text-align: center;
    width:100%;
	color:#fff;
}

.mask
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.outer-right
{
    clip: rect(0px 140px 140px 70px);
}

.inner-right
{
    background-color: #710000;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    clip: rect(0px 70px 140px 0px);
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

.pie1 .inner-right
{
    transform: rotate(280deg);
    animation: load-right-pie-1 1s linear;
    -webkit-animation: load-right-pie-1 1s linear;
    -webkit-transform: rotate(280deg);
}

@keyframes load-right-pie-1
{
    from {transform: rotate(0deg);}
    to {transform: rotate(280deg);}
}

@-webkit-keyframes load-right-pie-1
{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(280deg);}
}


.pie2 .inner-right
{
    transform: rotate(10deg);
    animation: load-right-pie-2 1s linear;
    -webkit-animation: load-right-pie-2 1s linear;
    -webkit-transform: rotate(10deg);
}

@keyframes load-right-pie-2
{
    from {transform: rotate(0deg);}
    to {transform: rotate(10deg);}
}

@-webkit-keyframes load-right-pie-2
{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(10deg);}
}


.pie3 .inner-right
{
    transform: rotate(340deg);
    animation: load-right-pie-3 1s linear;
    -webkit-animation: load-right-pie-3 1s linear;
    -webkit-transform: rotate(340deg);
}

@keyframes load-right-pie-3
{
    from {transform: rotate(0deg);}
    to {transform: rotate(340deg);}
}

@-webkit-keyframes load-right-pie-3
{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(340deg);}
}

.outer-left
{
    clip: rect(0px 70px 140px 0px);
}

.inner-left
{
    background-color: #710000;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    clip: rect(0px 70px 140px 0px);
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}


.content
{

    width:100px;
    height:100px;
    border-radius:50%;
    background-color:#fff;
    position:absolute;
    top:20px;
    left:20px;
    line-height: 100px;
    font-family:arial, sans-serif;
    font-size:25px;
	color:#224761;
    text-align: center;
    z-index:2;
}

.content span
{
    opacity: 0;
    animation: load-content 3s;
    animation-fill-mode:forwards;
    animation-delay: 0.6s;
    -webkit-animation: load-content 3s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 0.6s;
}

@keyframes load-content
{
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes load-content
{
    from {opacity:0;}
    to {opacity:1;}
}

.circles
{
    position: relative;
    min-height:250px;
    left:5em;
}

.circles .circle-one
{
    height:120px;
    width:120px;
    border-radius:50%;
    background-color: #DD1111;
    top:100px;
    z-index:2;
    font-size:18px;
	color:#fff;
}
.circles .circle-two
{
    height:250px;
    width:250px;
    border-radius:50%;
    background-color:#fff;
    left:55px;
    font-size:30px;
	color:#DD1111;
}

.circles > div
{
    position:relative;
    -webkit-transform: scale(0);
    transform: scale(0);
    position:absolute;
    animation: circles-load 1s cubic-bezier(0.17, 0.67, .58, 1.2);
    animation-fill-mode:forwards;
    animation-delay: 2s;
    -webkit-animation: circles-load 1s cubic-bezier(0.17, 0.67, .58, 1.2);
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2s;
}

.circles .text
{
    position:absolute;
    top:25%;
    left:20%;
}

@keyframes circles-load
{
    50%
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes circles-load
{
    50%
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


.h-bars > div
{
    width:0;
    height:30px;
    border-radius: 2px;
    display:block;
    position:relative;
}

.h-bars *:before
{
    position: absolute;
    left:-125px;
    top:4px;
    opacity:0;
	color:#fff;
}

.h-bars *:after
{
    top:4px;
    opacity:0;
    position:absolute;
	color:#fff;
}

@keyframes bars-after
{
    from { opacity:0; }
    to { opacity:1;}
}

@-webkit-keyframes bars-after
{
    from { opacity:0; }
    to { opacity:1;}
}

.h-bars .bar-one:before
{
    content: 'Comments';
    animation: bars-after 1s;
    animation-delay: 2.5s;
    animation-fill-mode:forwards;
    -webkit-animation: bars-after 1s;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-fill-mode:forwards;
}

.h-bars .bar-one
{
    background-color:#1645c8;
    animation: bars-bar-one 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.5s;
    -webkit-animation: bars-bar-one 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.5s;
}

.h-bars .bar-one:after
{
    content: '108 Is The Record For A Single Pen';
	 right:-260px;
    animation: bars-after 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.5s;
    -webkit-animation: bars-after 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.5s;
}

@keyframes bars-bar-one
{
    from { width:0; }
    to { width:50px;}
}

@-webkit-keyframes bars-bar-one
{
    from { width:0; }
    to { width:50px;}
}

.h-bars .bar-two:before
{
    content: 'Pens Featured';
    animation: bars-after 1s;
    animation-delay: 2.6s;
    animation-fill-mode:forwards;
    -webkit-animation: bars-after 1s;
    -webkit-animation-delay: 2.6s;
    -webkit-animation-fill-mode:forwards;
}

.h-bars .bar-two
{
    background-color:#0c8ec0;
    animation: bars-bar-two 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.6s;
    -webkit-animation: bars-bar-two 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.6s;
}

.h-bars .bar-two:after
{
    content: '13,972 By The CodePen Staff';
	 right:-225px;
    animation: bars-after 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.6s;
    -webkit-animation: bars-after 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.6s;
}

@keyframes bars-bar-two
{
    from { width:0; }
    to { width:180px; }
}

@-webkit-keyframes bars-bar-two
{
    from { width:0; }
    to { width:180px; }
}

.h-bars .bar-three:before
{
    content: 'Pens Hearted';
    animation: bars-after 1s;
    animation-delay: 2.6s;
    animation-fill-mode:forwards;
    -webkit-animation: bars-after 1s;
    -webkit-animation-delay: 2.6s;
    -webkit-animation-fill-mode:forwards;
}

.h-bars .bar-three
{
    background-color:#c0392b;
    animation: bars-bar-three 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.7s;
    -webkit-animation: bars-bar-three 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.7s;
}

.h-bars .bar-three:after
{
    content: '941,146 By The  Community';
	  right:-220px;
    animation: bars-after 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.6s;
    -webkit-animation: bars-after 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.6s;
}

@keyframes bars-bar-three
{
    from { width:0; }
    to { width:330px;}
}

@-webkit-keyframes bars-bar-three
{
    from { width:0; }
    to { width:330px;}
}

.h-bars .bar-four:before
{
    content: 'Forks';
    animation: bars-after 1s;
    animation-delay: 2.6s;
    animation-fill-mode:forwards;
    -webkit-animation: bars-after 1s;
    -webkit-animation-delay: 2.6s;
    -webkit-animation-fill-mode:forwards;
}

.h-bars .bar-four
{
    background-color:#27b096;
    animation: bars-bar-four 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.8s;
    -webkit-animation: bars-bar-four 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.8s;
}

.h-bars .bar-four:after
{
    content: '2,967 Is The Record For One Single Pen';
	right:-290px;
    animation: bars-after 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.6s;
    -webkit-animation: bars-after 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.6s;
}

@keyframes bars-bar-four
{
    from { width:0; }
    to { width:90px;}
}

@-webkit-keyframes bars-bar-four
{
    from { width:0; }
    to { width:90px;}
}

.h-bars .bar-five:before
{
    content: 'CodePen Haters  ';
    animation: bars-after 1s;
    animation-delay: 2.6s;
    animation-fill-mode:forwards;
    -webkit-animation: bars-after 1s;
    -webkit-animation-delay: 2.6s;
    -webkit-animation-fill-mode:forwards;
}

.h-bars .bar-five
{
    background-color:#95a5a6;
    animation: bars-bar-five 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.8s;
    -webkit-animation: bars-bar-five 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.8s;
}

.h-bars .bar-five:after
{
    content: 'Are You Serious?';
	right:-130px;
    animation: bars-after 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.6s;
    -webkit-animation: bars-after 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.6s;
}

@keyframes bars-bar-five
{
    from { width:0; }
    to { width:3px; }
}

@-webkit-keyframes bars-bar-five
{
    from { width:0; }
    to { width:3px; }
}
a{
	text-decoration:none;
}
.stat a{
	color:#094F80;
	letter-spacing:2px;
	transition:all 1s ease;
	-moz-transition:all 1s ease;
	-webkit-transition:all 1s ease;
}
.stat a:hover{
	color:#fff;
}
.date{
	color:#fff;
	font-size:.6em;
}
.quote{
	color:#094F80;
	font-size:.8em;
	font-style:italic;
	
}
.auth{
	color:#fff;
	margin-left:30%;
	font-size:.6em;
}
@media only screen and (min-width:600px){
  .statistics > div{
    display:block;
    max-width:100%;
    float:none;
  }
  .h-bars{
    margin-left:25%;
  }
  h2{text-align:left;
    margin-left:15%;
  }
  
}
@media only screen and (min-width:900px){
  
    .statistics{
      width:100%;
    }
   .statistics > div{
    display:inline-block;
    max-width:100%;
    margin:0;
  }
  h2{
    text-align:center;
    margin-left:-1em;
  
  }
}
//NO JS, NO Images, NO SVG. Just CSS.

/* Life's Not Complete Without Art 

                            ....+((zzz((-....
                      ..+6llllllllllllllllllllZz+.
                  .-OllllllltllllllltllllllllllllllOi.
               .JOllllllllllllltllllltltlltlllllllllllOI.
            ..6lllllltlltlOt?=!~         !?7<OOllllllllllwi.
          .(OlllllllllOv7`                      ?1ylltlllllO6.
         .OlllllllltO=                             ?COlllllllOn.
       .Sllllllltlln.                                 7ylllllllv+
      .Olllltlllllllvi                                  ?slltllltn
     Jllltlllltlltllllvi                                  TOllllllG.
    Jlllllltu= TOlllllllZ<            .                  c .sltllllw.
   .lltllltv`   .4OlllllllZ<          (                  b  .kllltllG
  .OlllltOr       .1OlltllllZ........ M                  M    SllllllL
  Dllllltr          .1Olltllll1TMMMMM.Mx.      ..........M    .ylltlld.
 .llltllJ             .2llllllllidMMMN.YMMMMMMMMMMMMMMMM"'     .OlltllL
 Klllllu\           .JMMmvltlllllliTMMMN&x MMMMMMMMMM           Sllllld
.6ltllld           .MMMMMMmvtlltlllliTMMM] HMMMMMMMM]           .lltllt]
.llltll]          .MMMMMMMMMmzlllllllliTM] .MMMMMMMM`           .llllll]
.llllll]      x  .MMMMMMMMMMMMm1lltlllllzb  (MMMMMM]            .lltlll]
.ltlltl]      b  MMMMMMMMMMMMMMMm1llllllllI. 4MMMM#             .llltll]
.ylllllG      M .MMMMMMMMMMMMMMMMMm1lltlllll6.TMMD              .lllllt]
 Kllltld      M  MMMMMMMMMMMMMMMMMMMg1llltlllt6.                Dtlllld
 jllllll]     (MgMMMMMMMMMMMMMMMMMMMMMg1llllllll6.             .llltll2
 .kltlltd.      .!"MMMMMMMMMMF????????TMe1lltllllt6.          .Olllltd^
  .lllllld.         "MMMMMMMMM         MM]?ylltllllO6.       .Iltllllr
   4lltlllw.           .!""MMM         MM]  7ylltllllOn.    .OlllltlJ
    Slllllld.     .MMa.    TMR         MM]    7slllllllOn..Ollllllld`
     4ltllllOn   (MMMMM    ?MM         TM]      7yltlllllllllltlltv`
      4tlltlllZ< .WMM#^      ?           `        7ylllllllltllltv
       ?slllllllZ<.                                 4lllltlllllu=
         TOlltllllOI.                             .vlltlllltlOv!
          .1OllllllllOI..                      .JOllllltllltv'
             TylltlltllllOz<...          ...zIlllllltllllOv'
               ?1OlllllllllllllltOOOOOtlltllllllllllllty=`
                  ?1ylltlllllllllllllllllltlllltltlOv7`
                      ?7lOlltlllllllltlllllltlOy?7`
                            `?7<<llllzz<+7=?~

 |NO BS|
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js