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

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                .box
  .pencil-1
    .rubber
    .outline
    .pencil-body
      .light-side
    .tip
      .charcle
  .pencil-2
    .rubber
    .outline
    .pencil-body
      .light-side
    .tip
      .charcle
  .jar-lid
    .shiny-1
    .shiny-2
    .shiny-3
    .shiny-4
  .jar
    .top-jar
    .bottom-jar
      .comet
        .fire
        .small-fire
        .comet-body
        .comet-lava
        .top-lava
      .green-planet
        .dark-green-stripe-1
        .dark-green-stripe-2
        .dark-green-stripe-3
        .light-green-stripe-1
        .light-green-stripe-2
      .purple-planet
        .dark-purple-stripe-1
        .dark-purple-stripe-2
        .dark-purple-stripe-3
        .dark-purple-stripe-4
        .dark-purple-stripe-5
        .light-purple-stripe-1
        .light-purple-stripe-2
        .light-purple-stripe-3
      .orange-planet
        .dark-orange-stripe-1
        .dark-orange-stripe-2
        .dark-orange-stripe-3
        .dark-orange-stripe-4
        .dark-orange-stripe-5
        .dark-orange-stripe-6
        .light-orange-stripe-1
        .light-orange-stripe-2
        .light-orange-stripe-3
        .light-orange-stripe-4
        .light-orange-stripe-5
        .light-orange-stripe-6
      .star-1
      .star-2
      .star-3
      .star-4
      .star-5
      .star-6
      .star-7
      .star-8
      .star-9
      .star-10
      .star-11
      .star-12
      .star-13
      .star-14
      .star-15
      .star-16
      .star-17
              
            
!

CSS

              
                // css variables
:root {
  --size: 0.6;
  --small-size: 0.2;
  --comit: 0.3;
}
// colors
$black: #2C272B;
$gray: #BDBDBD;
$light-gray: #E7E7E7;
$dark-gray: #666666;
$white: #FFFFFF;
$dark-green: #168A89;
$green: #27B6BB;
$light-green: #6CE7E6;
$dark-purple: #7B75B3;
$purple: #AD95C5;
$light-purple: #CEB6ED;
$dark-orange: #F56B30;
$orange: #FD8C25;
$light-orange: #FDBC4E;
$ruber: #FC5645;
$dark-yellow: #E9B13A;
$light-yellow: #FDBD36;
$bage: #E9D0AF;
$fire: #FE6982;
$body: #FFD7E1;
$outershell: #FFF7FF;
  
// shape
$circle: 50%;
$edge: 10px;
$triangle: polygon(50% 100%, 0 0, 100% 0);

* {
  box-sizing: border-box;
}

.box {
  position: relative;
  width: 500px;
  height: 600px;
  display: block;
  margin: auto;
  margin-top: 25%;
}

.pencil-1 {
  position: absolute;
  top: -25%;
  right: 30%;
  transform: rotate(15deg);
  width: 10%;
  height: 90%;
}

.pencil-2 {
  position: absolute;
  bottom: -45%;
  left: 30%;
  width: 10%;
  height: 90%;
  transform: rotate(100deg);
  z-index: 4;
}

.rubber {
  position: absolute;
  width: 100%;
  height: 10%;
  background: $ruber;
  border-radius: $edge;
}

.outline {
  position: absolute;
  top: 8%;
  width: 100%;
  height: 5%;
  background: $dark-gray;
}

.pencil-body {
  position: absolute;
  top: 13%;
  width: 100%;
  height: 80%;
  background: $dark-yellow;
  z-index: 2;
}

.light-side {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background: $light-yellow;
}

.tip {
  position: absolute;
  bottom: -4.9%;
  width: 100%;
  height: 12%;
  background: $bage;
  -webkit-clip-path: $triangle;
  clip-path: $triangle;
  z-index: 1;
}

.charcle {
  position: absolute;
  bottom: -4.9%;
  width: 100%;
  height: 30%;
  background: $dark-gray;
  -webkit-clip-path: $triangle;
  clip-path: $triangle;
  z-index: 1;
}

.jar-lid {
  position: absolute;
  left: 17.5%;
  width: 65%;
  height: 10%;
  background: $gray;
  border-radius: $edge;
   z-index: 3;
}

.shiny-1 {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 30%;
  height: 15%;
  background: $light-gray;
  border-radius: $edge;
}

.shiny-2 {
  position: absolute;
  top: 35%;
  left: 5%;
  width: 30%;
  height: 15%;
  background: $light-gray;
  border-radius: $edge;
}

.shiny-3 {
  position: absolute;
  top: 50%;
  left: 11%;
  width: 45%;
  height: 15%;
  background: $light-gray;
  border-radius: $edge;
}

.shiny-4 {
  position: absolute;
  top: 65%;
  left: 20%;
  width: 25%;
  height: 15%;
  background: $light-gray;
  border-radius: $edge;
}

.jar {
  position: absolute;
  left: 12.5%;
  top: 10%;
  width: 75%;
  height: 90%;
   z-index: 3;
}

.top-jar {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 3%;
  background: $black;
  border-radius: 50px;
}

.bottom-jar {
  position: absolute;
  top: 2%;
  left: 2.5%;
  width: 95%;
  height: 98%;
  overflow: hidden;
  background: $black;
  border-radius: 60px;
}

.comet {
  position: absolute;
  top: 0%;
  left: -20%;
  width: 30%;
  height: 15%;
  z-index: 2;
  transform: scale(var(--comit));
  animation: comet 5s infinite;
  animation-delay: 2s;
}

.fire {
  position: absolute;
  width: 60%;
  height: 90%;
  background: $fire;
  -webkit-clip-path: $triangle;
  clip-path: $triangle;
  transform: rotate(130deg);
  border-radius: $edge;
  z-index: 2;
}

.small-fire {
  position: absolute;
  top: 10%;
  left: 45%;
  width: 20%;
  height: 50%;
  background: $fire;
  -webkit-clip-path: $triangle;
  clip-path: $triangle;
  transform: rotate(130deg);
  border-radius: $edge;
  z-index: 2;
}

.comet-body {
  position: absolute;
  top: 40%;
  right: 4%;
  width: 65%;
  height: 85%;
  background: $fire;
  transform: rotate(130deg);
  border-radius: $circle;
  z-index: 2;
}

.comet-lava {
  position: absolute;
  top: 40%;
  right: -1%;
  width: 65%;
  height: 85%;
  background: $body;
  transform: rotate(130deg) scale(0.8);
  border-radius: $circle;
  z-index: 2;
}

.top-lava {
  position: absolute;
  top: 50%;
  right: -10%;
  width: 65%;
  height: 85%;
  background: $outershell;
  transform: rotate(130deg) scale(0.5);
  border-radius: $circle;
  z-index: 2;
}

.green-planet {
  position: absolute;
  top: 10%;
  left: 15%;
  width: 20%;
  height: 13%;
  overflow: hidden;
  background: $green;
  border-radius: $circle;
}

.dark-green-stripe-1 {
  position: absolute;
  top: 15%;
  width: 100%;
  height: 13%;
  background: $dark-green;
  border-radius: $edge;
}

.dark-green-stripe-2 {
  position: absolute;
  top: 28%;
  left: -4%;
  width: 50%;
  height: 13%;
  background: $dark-green;
  border-radius: $edge;
}

.dark-green-stripe-3 {
  position: absolute;
  top: 42%;
  left: -4%;
  width: 70%;
  height: 13%;
  background: $dark-green;
  border-radius: $edge;
}

.light-green-stripe-1 {
  position: absolute;
  top: 52%;
  right: -4%;
  width: 70%;
  height: 13%;
  background: $light-green;
  border-radius: $edge;
}

.light-green-stripe-2 {
  position: absolute;
  top: 72%;
  left: 20%;
  width: 30%;
  height: 13%;
  background: $light-green;
  border-radius: $edge;
}

.purple-planet {
  position: absolute;
  top: 25%;
  right: 10%;
  width: 30%;
  height: 20%;
  overflow: hidden;
  background: $purple;
  border-radius: $circle;
}

.dark-purple-stripe-1 {
  position: absolute;
  top: 15%;
  width: 50%;
  height: 10%;
  background: $dark-purple;
  border-radius: $edge;
}

.dark-purple-stripe-2 {
  position: absolute;
  top: 25%;
  width: 65%;
  height: 10%;
  background: $dark-purple;
  border-radius: $edge;
}

.dark-purple-stripe-3 {
  position: absolute;
  right: -4%;
  top: 45%;
  width: 65%;
  height: 15%;
  background: $dark-purple;
  border-radius: $edge;
}

.dark-purple-stripe-4 {
  position: absolute;
  left: -4%;
  top: 55%;
  width: 65%;
  height: 15%;
  background: $dark-purple;
  border-radius: $edge;
}

.dark-purple-stripe-5 {
  position: absolute;
  left: -4%;
  bottom: 5%;
  width: 100%;
  height: 15%;
  background: $dark-purple;
  border-radius: $edge;
}

.light-purple-stripe-1 {
  position: absolute;
  top: 12%;
  right: -4%;
  width: 60%;
  height: 13%;
  background: $light-purple;
  border-radius: $edge;
}

.light-purple-stripe-2 {
  position: absolute;
  top: 52%;
  right: -4%;
  width: 70%;
  height: 13%;
  background: $light-purple;
  border-radius: $edge;
}

.light-purple-stripe-3 {
  position: absolute;
  top: 72%;
  left: 20%;
  width: 30%;
  height: 13%;
  background: $light-purple;
  border-radius: $edge;
}

.orange-planet {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 52%;
  height: 35%;
  overflow: hidden;
  background: $orange;
  border-radius: $circle;
}

.dark-orange-stripe-1 {
  position: absolute;
  top: 15%;
  width: 50%;
  height: 10%;
  background: $dark-orange;
  border-radius: $edge;
}

.dark-orange-stripe-2 {
  position: absolute;
  top: 25%;
  width: 65%;
  height: 10%;
  background: $dark-orange;
  border-radius: $edge;
}

.dark-orange-stripe-3 {
  position: absolute;
  right: -4%;
  top: 45%;
  width: 65%;
  height: 15%;
  background: $dark-orange;
  border-radius: $edge;
}

.dark-orange-stripe-4 {
  position: absolute;
  left: -4%;
  top: 55%;
  width: 65%;
  height: 15%;
  background: $dark-orange;
  border-radius: $edge;
}

.dark-orange-stripe-5 {
  position: absolute;
  left: -4%;
  bottom: 5%;
  width: 100%;
  height: 15%;
  background: $dark-orange;
  border-radius: $edge;
}

.dark-orange-stripe-6 {
  position: absolute;
  left: -4%;
  top: 5%;
  width: 100%;
  height: 15%;
  background: $dark-orange;
  border-radius: $edge;
}

.light-orange-stripe-1 {
  position: absolute;
  top: 12%;
  right: -4%;
  width: 60%;
  height: 13%;
  background: $light-orange;
  border-radius: $edge;
}

.light-orange-stripe-2 {
  position: absolute;
  top: 52%;
  right: -4%;
  width: 70%;
  height: 13%;
  background: $light-orange;
  border-radius: $edge;
}

.light-orange-stripe-3 {
  position: absolute;
  top: 72%;
  left: 20%;
  width: 30%;
  height: 13%;
  background: $light-orange;
  border-radius: $edge;
}

.light-orange-stripe-4 {
  position: absolute;
  top: 22%;
  left: -5%;
  width: 35%;
  height: 13%;
  background: $light-orange;
  border-radius: $edge;
}

.light-orange-stripe-5 {
  position: absolute;
  top: 32%;
  left: -5%;
  width: 25%;
  height: 13%;
  background: $light-orange;
  border-radius: $edge;
}

.light-orange-stripe-6 {
  position: absolute;
  top: 32%;
  right: -5%;
  width: 25%;
  height: 13%;
  background: $light-orange;
  border-radius: $edge;
}

.star-1 {
  position: absolute;
  top: 5%;
  left: 35%;
  width: 3%;
  height: 2.1%;
  --size: 0.3;
  --small-size: 0.2;
  transform: scale(var(--size));
  animation: shine 4s infinite;
  background: $white;
  border-radius: $circle;
}

.star-2 {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 3%;
  height: 2.1%;
  --size: .6;
  --small-size: 0.4;
  transform: scale(var(--size));
  animation: shine 3s infinite;
  background: $white;
  border-radius: $circle;
}

.star-3 {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 3%;
  height: 2.1%;
   --size: .4;
  --small-size: 0.2;
  transform: scale(var(--size));
  animation: shine 5s infinite;
  background: $white;
  border-radius: $circle;
}

.star-4 {
  position: absolute;
  top: 10%;
  right: 30%;
  width: 3%;
  height: 2.1%;
   --size: .4;
  --small-size: 0.3;
  transform: scale(var(--size));
  animation: shine 2s infinite;
  background: $white;
  border-radius: $circle;
}

.star-5 {
  position: absolute;
  top: 15%;
  right: 15%;
  width: 3%;
  height: 2.1%;
   --size: .3;
  --small-size: 0.2;
  transform: scale(var(--size));
  animation: shine 1s infinite;
  background: $white;
  border-radius: $circle;
}

.star-6 {
  position: absolute;
  top: 50%;
  right: 15%;
  width: 3%;
  height: 2.1%;
   --size: .6;
  --small-size: 0.4;
  transform: scale(var(--size));
  animation: shine 3s infinite;
  background: $white;
  border-radius: $circle;
}

.star-7 {
  position: absolute;
  top: 50%;
  left: 15%;
  width: 3%;
  height: 2.1%;
   --size: .6;
  --small-size: 0.4;
  transform: scale(var(--size));
  animation: shine 4s infinite;
  background: $white;
  border-radius: $circle;
}

.star-8 {
  position: absolute;
  top: 40%;
  left: 25%;
  width: 3%;
  height: 2.1%;
   --size: .4;
  --small-size: 0.2;
  transform: scale(var(--size));
  animation: shine 5s infinite;
  background: $white;
  border-radius: $circle;
}

.star-9 {
  position: absolute;
  top: 30%;
  left: 15%;
  width: 3%;
  height: 2.1%;
   --size: .2;
  --small-size: 0.1;
  transform: scale(var(--size));
  animation: shine 1s infinite;
  background: $white;
  border-radius: $circle;
}

.star-10 {
  position: absolute;
  top: 40%;
  left: 45%;
  width: 3%;
  height: 2.1%;
   --size: .4;
  --small-size: 0.2;
  transform: scale(var(--size));
  animation: shine 4s infinite;
  background: $white;
  border-radius: $circle;
}

.star-11 {
  position: absolute;
  top: 60%;
  left: 65%;
  width: 3%;
  height: 2.1%;
   --size: .5;
  --small-size: 0.3;
  transform: scale(var(--size));
  animation: shine 2s infinite;
  background: $white;
  border-radius: $circle;
}

.star-12 {
  position: absolute;
  top: 70%;
  left: 80%;
  width: 3%;
  height: 2.1%;
   --size: .3;
  --small-size: 0.2;
  transform: scale(var(--size));
  animation: shine 1s infinite;
  background: $white;
  border-radius: $circle;
}

.star-13 {
  position: absolute;
  bottom: 10%;
  left: 80%;
  width: 3%;
  height: 2.1%;
   --size: .6;
  --small-size: 0.4;
  transform: scale(var(--size));
  animation: shine 4s infinite;
  background: $white;
  border-radius: $circle;
}

.star-14 {
  position: absolute;
  bottom: 12%;
  left: 60%;
  width: 3%;
  height: 2.1%;
   --size: .3;
  --small-size: 0.2;
  transform: scale(var(--size));
  animation: shine 3s infinite;
  background: $white;
  border-radius: $circle;
}

.star-15 {
  position: absolute;
  bottom: 20%;
  left: 70%;
  width: 3%;
  height: 2.1%;
   --size: .5;
  --small-size: 0.3;
  transform: scale(var(--size));
  animation: shine 2s infinite;
  background: $white;
  border-radius: $circle;
}

.star-16 {
  position: absolute;
  top: 30%;
  left: 40%;
  width: 3%;
  height: 2.1%;
   --size: .5;
  --small-size: 0.3;
  transform: scale(var(--size));
  animation: shine 4s infinite;
  background: $white;
  border-radius: $circle;
}

.star-17 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3%;
  height: 2.1%;
   --size: .2;
  --small-size: 0.1;
  transform: scale(var(--size));
  animation: shine 2s infinite;
  background: $white;
  border-radius: $circle;
}

@keyframes shine {
  0% {
    transform: scale(var( --size));
  }
  50% {
    transform: scale(var(--small-size));
  }
  
  100% {
    transform: scale(var( --size));
  }
}

@keyframes comet {
  0% {
     top: 0%;
     left: -20%;
     transform: scale(.2);
  }
  100% {
    top: 100%;
    left: 100%;
    transform: scale(.6);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console