cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              .pen
  .pen-info
    .pen-title Octopus
    .pen-description Css Only 
  
  .pen-credits 
    a(href="https://dribbble.com/shots/1389228-Octopus" target="_blank") Original image by: David L. Wehmeyer
  
  .pen-content
    .frame
      .background
        .bubbles-group.group-1
          .bubble.bubble-12
          .bubble.bubble-11
          .bubble.bubble-10
          .bubble.bubble-9
          .bubble.bubble-8
          .bubble.bubble-7
          .bubble.bubble-6
          .bubble.bubble-4
          .bubble.bubble-5
          .bubble.bubble-3
          .bubble.bubble-2
          .bubble.bubble-1
        .bubbles-group.group-2
          .bubble.bubble-12
          .bubble.bubble-11
          .bubble.bubble-10
          .bubble.bubble-9
          .bubble.bubble-8
          .bubble.bubble-7
          .bubble.bubble-6
          .bubble.bubble-4
          .bubble.bubble-5
          .bubble.bubble-3
          .bubble.bubble-2
          .bubble.bubble-1

      .octopus
        .helmet.background
        .tentacle.tentacle-1
        .tentacle.tentacle-2
        .tentacle.tentacle-3
        .tentacle.tentacle-4

        .body
          .head

          .spot.spot-1
          .spot.spot-2
          .spot.spot-3
          .spot.spot-4
          .spot.spot-5
          .spot.spot-6

          .eye-border.left
            .eye.left
              .center
                .pupil
              .shadow-1
              .shadow-2
              .shadow-3

          .eye-border.right
            .eye.right
              .center
                .pupil
              .shadow-1
              .shadow-2
              .shadow-3
          .mouth

        .helmet.reflection.reflection-1
        .helmet.reflection.reflection-2
        .helmet.reflection.reflection-3
        .helmet.reflection.reflection-4
        .helmet.reflection.reflection-5

        .octopus-shadow

        .helmet.border
        
        
        
// Codepen overlay
link(href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css')

a.navigation.left(href='https://codepen.io/thesuitcase/pen/eJxwNZ' target='_blank')
  img.arrow(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/overlay.arrow-left.svg')
a.navigation.right(href='https://codepen.io/thesuitcase/pen/LGzyQB' target='_blank')
  img.arrow(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/overlay.arrow-right.svg')

a.twitter(href='https://twitter.com/TheSuitcaseIO' target='_blank')
  img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/overlay.twitter.svg')

a.icon(href='http://thesuitcase.io' target='_blank')
  img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/overlay.thesuitcase.svg')


            
          
!
            
              $background    : white;
$yellow        : lighten(#7DB9FF, 20%);
$illustrations : darken($yellow, 10%);
$helmet-background: #FCD4B7;
$hemlet-border: #FFF5DD;
$head  : linear-gradient(to bottom right, #FFAB59, #FF9B67);
$head-shadow-1: #FA8253;
$head-shadow-2: #FC9260;
$head-spot : #F68A63;

$eye-center: #AECD66;
$eye-pupil: #323739;
$mouth : #7C3737;

body{
  background: $background;
}

.frame{
  width: 350px;
  height: 350px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10% auto;
  
  & > .background{
    position: absolute;
    width: 350px;
    height: 350px;
    background: $yellow;
    border-radius: 50%;
    overflow: hidden;
    transform: translate3d(0,0,0);
    
    & .bubbles-group{
      position: absolute;
      animation: bubbles-group 5s linear infinite both;
      width: inherit;
      height: inherit;
      
      &.group-2{
        margin-top: 350px;
      }
    }
    
    // Bubbles.
    & .bubble{
      border: 3px solid $illustrations;
      background: $yellow;
      position: absolute;
      border-radius: 50%;
      
      &.bubble-1{
        width: 40px;
        height: 40px;
        margin-top: 20px;
        margin-left: 50px;
      }
      &.bubble-2{
        width: 30px;
        height: 30px;
        margin-top: 55px;
        margin-left: 50px;
      }
      &.bubble-3{
        width: 8px;
        height: 8px;
        margin-top: 35px;
        margin-left: 105px;
      }
      &.bubble-4{
        width: 20px;
        height: 20px;
        margin-top: 35px;
        margin-left: 255px;
      }
      &.bubble-5{
        width: 8px;
        height: 8px;
        margin-top: 45px;
        margin-left: 275px;
      }
      &.bubble-6{
        width: 30px;
        height: 30px;
        margin-top: 125px;
        margin-left: 275px;
      }
      &.bubble-7{
        width: 10px;
        height: 10px;
        margin-top: 175px;
        margin-left: 315px;
      }
      &.bubble-8{
        width: 30px;
        height: 30px;
        margin-top: 175px;
        margin-left: 235px;
      }
      &.bubble-9{
        width: 30px;
        height: 30px;
        margin-top: 255px;
        margin-left: 25px;
      }
      &.bubble-10{
        width: 30px;
        height: 30px;
        margin-top: 285px;
        margin-left: 205px;
      }
      &.bubble-11{
        width: 20px;
        height: 20px;
        margin-top: 235px;
        margin-left: 25px;
      }
      &.bubble-12{
        width: 20px;
        height: 20px;
        margin-top: 135px;
        margin-left: 50px;
      }
      
      
    }
  }
  // End of .background
  
  & .octopus{
    z-index: 2;
    animation: float 2s infinite both;
    
    & .helmet{
      position: absolute;
      width: 187px;
      height: 171px;
      margin: 60px 78px;
      border-radius: 55% 55% 45% 45%;
      
      &.background{
        background: $helmet-background;
        z-index: 2;
      }
      &.border{
        width: 184px;
        height: 166px;
        border: 3px solid $hemlet-border;
        z-index: 3;
      }
      
      &.reflection{
        z-index: 3;
      }
      
      &.reflection-1{
        width: 80px;
        height: 50px;
        background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,0));
        border-radius: 50%;
        transform: rotate(-30deg);
        margin-top: 80px;
        margin-left: 95px;
        z-index: 2;
      }
      &.reflection-2{
        width: 8px;
        height: 5px;
        background: white;
        border-radius: 50%;
        transform: rotate(-30deg);
        margin-top: 88px;
        margin-left: 120px;
      }
      &.reflection-3{
        width: 15px;
        height: 10px;
        background: rgba(255,255,255,.6);
        border-radius: 50%;
        transform: rotate(30deg);
        margin-top: 88px;
        margin-left: 220px;
      }
      &.reflection-4{
        width: 20px;
        height: 8px;
        background: rgba(255,255,255,.2);
        border-radius: 50%;
        transform: rotate(-50deg);
        margin-top: 125px;
        margin-left: 98px;
      }
      &.reflection-5{
        overflow: hidden;        
        &:before{
          content: '';
          position: absolute;
          width: 227px;
          height: 201px;
          margin-left: -30px;
          margin-top: -20px;
          border-radius: 55% 55% 45% 45%;
          background: radial-gradient(rgba(0,0,0,0) 60%, rgba(172, 131, 100, .1) 60%);
        }
      }
    }
  }
  
  & .body{
    position: absolute;
    margin-left: 90px;
    margin-top: 90px;
    z-index: 2;
    
    & .head{
      position: absolute;
      width: 166px;
      height: 129px;
      background: $head-shadow-1;
      border-radius: 55% 55% 45% 45%;
      overflow: hidden;
      
      &:before{
        content: '';
        position: absolute;
        background: $head-shadow-2;
        width: 166px;
        height: 129px;
        border-radius: 0% 60% 60% 0%;
        margin-left: 0px;
        margin-top: 0px;
      }
      &:after{
        content: '';
        position: absolute;
        background: $head;
        width: 166px;
        height: 129px;
        border-radius: 50%;
        margin-left: -10px;
        margin-top: -5px;
      }
    }

    // eyes
    .eye-border{
      position: absolute;
      width: 35px;
      height: 30px;
      margin-top: 70px;
      margin-left: 30px;
      background: $head-shadow-1;
      border-radius: 15px;

       &.right{
        margin-left: 100px;
       }

      .eye{
        position: absolute;
        width: 26px;
        height: 26px;
        background: white;
        border-radius: 50%;
        margin: 2px;

        &.right{
          margin-left: 7px;
        }

        & .center{
          position: absolute;
          width: 18px;
          height: 18px;
          background: $eye-center;
          border-radius: 50%;
          margin: 4px;

          & .pupil{
            position: absolute;
            width: 8px;
            height: 14px;
            background: $eye-pupil;
            border-radius: 50%;
            margin: 2px 5px;
            transform-origin: center center;
            animation: pupil 3s both ease-in-out infinite;
          }
        }
      }

      // Shadows.
      .shadow-1{
        position: absolute;
        width: 6px;
        height: 6px;
        background: white;
        border-radius: 50%;
        margin-left: 13px;
        margin-top: 7px;
      }

      .shadow-2{
        position: absolute;
        width: 2px;
        height: 2px;
        background: white;
        border-radius: 50%;
        margin-left: 8px;
        margin-top: 11px;
      }
      .shadow-3{
        position: absolute;
        width: 12px;
        height: 8px;
        background: white;
        opacity: .5;
        transform: rotate(-45deg);
        border-radius: 50%;
        margin-left: 6px;
        margin-top: 6px;
      }
    }

    .mouth{
      position: absolute;
      width: 26px;
      height: 6px;
      background: $mouth;
      border-radius: 50%;
      margin-left: 70px;
      margin-top: 100px;
      transform-origin: center center;
      animation: mouth 4s 2s ease-in-out infinite;
    }
    
    .spot{
      position: absolute;
      background: $head-spot;
      
      &.spot-1{
        width: 42px;
        height: 20px;
        border-radius: 50%;
        transform: rotate(-20deg);
        margin-left: 30px;
        margin-top: 15px;
      }
      &.spot-2{
        width: 15px;
        height: 8px;
        border-radius: 50%;
        margin-left: 75px;
        margin-top: 10px;
      }
      &.spot-3{
        width: 15px;
        height: 8px;
        border-radius: 50%;
        transform: rotate(90deg);
        margin-left: 5px;
        margin-top: 70px;
      }
      &.spot-4{
        width: 10px;
        height: 5px;
        border-radius: 50%;
        transform: rotate(10deg);
        margin-left: 100px;
        margin-top: 55px;
      }
      &.spot-5{
        width: 8px;
        height: 4px;
        border-radius: 50%;
        transform: rotate(10deg);
        margin-left: 90px;
        margin-top: 50px;
      }
      &.spot-6{
        width: 12px;
        height: 8px;
        border-radius: 50%;
        transform: rotate(45deg);
        margin-left: 135px;
        margin-top: 30px;
      }
    }
  }
  & .tentacle{
    position: absolute;
    mask-repeat: no-repeat;
    background: linear-gradient(to bottom right, #FFAB59, #FF9B67, #F38959);
    z-index: 2;
    animation: wiggle 2s 1s both infinite ease-in-out; 
    transform-origin: top;
    
    &:before{
      content: '';
      position: absolute;
      background: rgba(0,0,0,.05);
    }
    
    &.tentacle-1{
      width: 30px;
      height: 60px;
      mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-1.svg);
      margin-top: 210px;
      margin-left: 120px;
      
      &:before{
        width: 30px;
        height: 60px;
        mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-1.svg);
        margin-left: 13px;
      }
    }
    &.tentacle-2{
      width: 50px;
      height: 80px;
      mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-2.svg);
      margin-top: 210px;
      margin-left: 140px;
      transform: rotate(5deg);
      
      &:before{
        width: 50px;
        height: 80px;
        transform: rotate(-5deg);
        mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-2.svg);
        margin-left: 15px;
      }
    }
    &.tentacle-3{
      width: 50px;
      height: 80px;
      mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-3.svg);
      margin-top: 210px;
      margin-left: 155px;
      transform: rotate(10deg);
      
      &:before{
        width: 50px;
        height: 80px;
        transform: rotate(-20deg);
        mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-3.svg);
        margin-left: 25px;
      }
    }
    &.tentacle-4{
      width: 80px;
      height: 80px;
      mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-4.svg);
      margin-top: 210px;
      margin-left: 175px;
      transform: rotate(5deg);
      
      &:before{
        width: 80px;
        height: 80px;
        transform: rotate(-25deg);
        mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57971/tentacle-4.svg);
        margin-left: 35px;
      }
    }
    
  }
}

.octopus-shadow{
  position: absolute;
  width: 187px;
  height: 171px;
  margin: 60px 78px;
  border-radius: 55% 55% 45% 45%;
  background: rgba(0,0,255,.05);
  margin-top: 90px;
  margin-left: 90px;
  z-index: 1;
}

@keyframes float{
  0%{
    transform: translateY(0px);
  }
  50%{
    transform: translateY(10px);
  }
  100%{
    transform: translateY(0px);
  }
}

@keyframes bubbles-group{
  0%{
    transform: translateY(0px);
  }
  100%{
    transform: translateY(-350px);
  }
}

@keyframes wiggle{
  0%, 100%{
    transform: rotate(-5deg)
  }
  50%{
    transform: rotate(5deg)
  }
}

@keyframes pupil{
  0%, 25%{
    transform: rotateX(0deg)
  }
  12.5%{
    transform: rotateX(70deg)
  }
}

@keyframes mouth{
  0%, 20%{
    transform: scaleY(1);
  }
  10%{
    transform: scaleY(0.2);
  }
}


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console