Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!--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|
*/
            
          
!
999px

Console