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 includes JSX processing.

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

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <div class="octopus"></div>
              
            
!

CSS

              
                .octopus {
  height: 1000px;
  width: 900px;
  
  color: #ed6c30;
 
  background: 
    /* mouth */
    radial-gradient(
      ellipse closest-side,
      #2F2F2F 98.5%,
      transparent 100%
    ) 333px 471px / 72px 77px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 301.5px 441px / 135.5px 135.5px,
    
    /* mouth shadow */
    radial-gradient(
      ellipse closest-side,
      currentColor 98.5%,
      transparent 100%
    ) 286.5px 394px / 176px 124px,
    
    radial-gradient(
      ellipse closest-side,
      #855C52 98.5%,
      transparent 100%
    ) 305.5px 420px / 175px 158px,
    
    /* eyes */
    radial-gradient(
      ellipse closest-side,
      #2F2F2F 98.5%,
      transparent 100%
    ) 284.5px 320px / 70px 84px,
    
    radial-gradient(
      ellipse closest-side,
      #2F2F2F 98.5%,
      transparent 100%
    ) 446.5px 343px / 70px 84px,
    
    /* head */
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 205px 70px / 490px 550px,
    
    /* big arms hands */
    /* right hand */
    /* suction cups */
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 742px 150px / 13px 20px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 740px 111px / 15px 25px,
    
    radial-gradient(
      ellipse at left,
      currentColor 50%,
      white 50%
    ) 762px 76px / 20px 40px,
    
    radial-gradient(
      ellipse closest-side,
      white 99.5%,
      transparent 100%
    ) 758px 73px / 105px 128px,
    
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 702px 80px / 100px 125px,
    
    /* left hand */
    /* suction cups */  
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 145px 150px / 13px 20px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 145px 111px / 15px 25px,
    
    radial-gradient(
      ellipse at right,
      currentColor 50%,
      white 50%
    ) 118px 76px / 20px 40px,
    
    radial-gradient(
      ellipse closest-side,
      white 99.5%,
      transparent 100%
    ) 38px 73px / 105px 128px,
    
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 98px 80px / 100px 125px,
    
    /* big arms */
    /* left arm */
    /* suction cups */
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 160px 565px / 17px 23px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 120px 515px / 18px 30px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 90px 460px / 20px 33px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 70px 395px / 20px 33px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 65px 330px / 18px 30px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 80px 270px / 16px 28px,
    
    /* right arm */
    /* suction cups */
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 725px 565px / 17px 23px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 765px 515px / 18px 30px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 795px 460px / 20px 33px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 815px 395px / 20px 33px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 820px 330px / 18px 30px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 805px 270px / 16px 28px,
    
    /* both arms */
    /* spacer */
    linear-gradient(
      to bottom,
      white,
      white
    ) 177.5px 50px / 545px 150px,
    
    radial-gradient(
      ellipse closest-side,
      white 99.5%,
      transparent 100%
    ) 137.5px 50px / 625px 550px,
    
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 45px 50px / 810px 645px,
    
    /* left upper arm */ 
    /* suction cups */
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 118px 670px / 15px 20px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 140px 695px / 12px 17px,
    
    /* hand */
    radial-gradient(
      ellipse at bottom,
      currentColor 50%,
      white 50%
    ) 97px 642px / 50px 25px,
    
    /* spacer */
    radial-gradient(
      ellipse closest-side,
      white 99.5%,
      transparent 100%
    ) 60px 545px / 230px 125px,
    
    /* arm */
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 100.5px 558px / 225px 180px,
    
    /* right upper arm */
    /* suction cups */
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 680px 740px / 12px 17px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 705px 725px / 17px 20px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 730px 705px / 20px 26px,
    
    /* hand */
    radial-gradient(
      ellipse at bottom,
      currentColor 50%,
      white 50%
    ) 730px 670px / 50px 22px,
    
    /* spacer */
    radial-gradient(
      ellipse closest-side,
      white 99.5%,
      transparent 100%
    ) 580px 520px / 225px 180px,
    
    /* arm */
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 550px 590px / 225px 180px,
    
    /* left lower arm */ 
    /* suction cups */
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 220px 840px / 20px 8px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 190px 810px / 30px 25px,
    
    /* hand */
    radial-gradient(
      ellipse at bottom,
      currentColor 49.5%,
      transparent 50%
    ) 153px 772px / 60px 20px,
    
    /* bottom */
    radial-gradient(
      ellipse at top,
      currentColor 49.5%,
      transparent 50%
    ) 118px 792px / 300px 100px,
    
    /* upper right side */
    radial-gradient(
      ellipse at top left,
      currentColor 50%,
      transparent 50%
    ) 325px 505px / 200px 470px,
     
    /* spacer */
    radial-gradient(
      ellipse closest-side,
      white 99.5%,
      transparent 100%
    ) 97.5px 610px / 225px 180px,  
    
    /* curve */
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 177.5px 640px / 225px 200px,
    
    /* right lower arm */
    /* suction cups */
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 590px 850px / 20px 8px,
    
    radial-gradient(
      ellipse closest-side,
      #FCD4B5 98.5%,
      transparent 100%
    ) 620px 825px / 28px 22px,
    
    /* hand */
    radial-gradient(
      ellipse at bottom,
      currentColor 49.5%,
      transparent 50%
    ) 633px 790px / 60px 20px,
    
    /* bottom */
   radial-gradient(
      ellipse at top,
      currentColor 49.5%,
      transparent 50%
    ) 472px 810px / 250px 80px,
    
    /* spacer */
    radial-gradient(
      ellipse closest-side,
      white 99.5%,
      transparent 100%
    ) 547.5px 630px / 225px 180px,
    
    /* curve */
    radial-gradient(
      ellipse closest-side,
      currentColor 99.5%,
      transparent 100%
    ) 477.5px 670px / 225px 180px,
    
    /* upper left side */
    radial-gradient(
      ellipse at top right,
      currentColor 50%,
      transparent 50%
    ) 324px 515px / 250px 480px;
  
  background-repeat: no-repeat;
  transform: scale(1);
}

/* Notes */
    /* 338.5 84*/
   
    /* 4 ellipses */
/*     radial-gradient(
      ellipse at top right,
      #FCD4B5 49.5%,
      transparent 50%
    ) 72.5px 281.5px / 7.5px 9px,
    
    radial-gradient(
      ellipse at bottom right,
      #FCD4B5 49.5%,
      transparent 50%
    ) 70px 254px / 16.5px 30px,
    
    radial-gradient(
      ellipse at top left,
      #FCD4B5 49.5%,
      transparent 50%
    ) 78px 270px / 18px 25.5px,
    
    radial-gradient(
      ellipse at bottom left,
      #FCD4B5 49.5%,
      transparent 50%
    ) 84.5px 259px / 7.5px 12px, */
              
            
!

JS

              
                
              
            
!
999px

Console