cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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.

            
              .container
  .beaker
    .clip
    .greengoo
      .bubble#one
      .bubble#two
      .bubble#three
      .bubble#four
      .bubble#five
      .bubble#six
      .bubble#seven
      .bubble#one
      svg(height="1500px" xmlns='http://www.w3.org/2000/svg', version='1.1')
        defs
          filter#goo
            fegaussianblur(in='SourceGraphic', stddeviation='10', result='blur')
            fecolormatrix(in='blur', mode='matrix', values='1 0 0 0 0  0 1 0 0 0  0 0 9 0 0  0 0 0 18 -7', result='goo')
            feblend(in='SourceGraphic', in2='goo')
    .lip
    .wrapper
      .ball
        .smallball.move1
        .smallball.move2
        .smallball.move3
        .smallball.move4
        .smallball.move5
        .smallball.move6
        .smallball.move7
        .smallball.move8
        .greenball.move9
        .greenball.move10
        .greenball.move11
        .greenball.move12
        .greenball.move13
        .greenball.move14
        .greenball.move15
        .greenball.move16
        .blueball.move17
        .blueball.move18
        //- .blueball.move19
        //- .blueball.move20
        //- .blueball.move21
        //- .blueball.move22
        //- .blueball.move23
        .yellowball.move24
        .yellowball.move25
        .yellowball.move26
        .yellowball.move27
        .yellowball.move29
        .yellowball.move30
        .yellowball.move31
          svg(xmlns='http://www.w3.org/2000/svg', version='1.1')
            defs
              filter#goo
                fegaussianblur(in='SourceGraphic', stddeviation='5', result='blur')
                fecolormatrix(in='blur', mode='matrix', values='1 0 0 0 0  0 1 0 0 0  0 0 9 0 0  0 0 0 18 -7', result='goo')
                feblend(in='SourceGraphic', in2='goo')    
      

            
          
!
            
              $green: yellow
$ballglow: rgba(255,69,0,.1)
$background: #000000
$ballglow: rgba(255,69,0,.4)
$red: rgba(237, 69, 0, .1)
$redglow: rgba(237, 67, 55, .1)
$green: rgba(242, 165, 0, .4)
$greenglow: rgba(242, 165, 0, .4)
$blue: rgba(237, 69, 0, 0)
$blueglow: rgba(125, 249, 255, 0)
$yellow: rgba(247, 215, 8, .7)
$yellowglow: rgba(247, 215, 8, .8)

@mixin bubbles
  position: absolute
  height: 12px
  width: 12px
  border-radius: 100%
  background: white
  z-index: 200
  box-shadow: 0px 0px 17px 12px pink

body
  margin: 0
  padding: 0
  background: #555555
  overflow: hidden
  
.container
  position: absolute
  height: 100vh
  width: 100vw
  display: flex
  justify-content: center
  align-items: center
  
.beaker
  position: absolute
  height: 300px
  width: 300px
  background: #ddd
  border-bottom-left-radius: 10%
  border-bottom-right-radius: 10%
  border-top-left-radius: 3%
  border-top-right-radius: 3%
  z-index: 101
  &:before
    content: ''
    position: absolute
    background: #ccc
    height: 300px
    width: 275px
    border-bottom-left-radius: 10%
    border-bottom-right-radius: 10%
    border-top-left-radius: 3%
    border-top-right-radius: 3%
 
.lip
  position: absolute
  width: 330px
  height: 40px
  background: #ddd
  right: -15px
  border-radius: 25%
  top: -20px
  &:after
    content: ''
    position: absolute
    background: #ccc
    width: 290px
    height: 40px
    border-radius: 25%
    border-top-right-radius: 10%
    border-bottom-right-radius: 0%
  
.greengoo
  position: absolute
  width: 95%
  left: 7px
  height: 175px
  opacity: .6
  background: pink
  // box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, .6)
  border-radius: 10%
  bottom: 12px
  animation: change 15s ease infinite
  filter: url('#goo')
  // @keyframes change
  //   25%
  //     background: yellow
  //   50%
  //     background: red
  //   75%
  //     background: purple


#one
  +bubbles
  transform: translate(70px, 152px)
  background: white
  animation: float 1.3s ease-in infinite
  box-shadow: 0 0 10px 4px pink
  opacity: 0
  @keyframes float
    95%
      transform: translate(80px, -40px)
      opacity: 1
    100%
      transform: translate(80px, -40px)

#two
  +bubbles
  transform: translate(40px, 142px)
  animation: float2 1.5s ease-in infinite
  animation-delay: .8s
  background: white
  box-shadow: 0 0 10px 8px pink
  opacity: 0
  @keyframes float2
    95%
      transform: translate(45px, -25px)
      opacity: 1
    100%
      transform: translate(45px, -25px)
    
#three
  +bubbles
  background: white
  transform: translate(250px, 132px)
  box-shadow: 0 0 10px 10px pink
  animation: float3 1.1s ease-in infinite
  animation-delay: .2s
  opacity: 0
  @keyframes float3
    95%
      transform: translate(236px, -27px)
      opacity: 1
    100%
      transform: translate(236px, -27px)

#four
  +bubbles
  background: white
  transform: translate(155px, 100px)
  box-shadow: 0 0 6px 10px pink
  opacity: 0
  animation: float4 1.2s ease-in infinite
  @keyframes float4
    95%
      transform: translate(180px, -30px)
      opacity: 1
    100%
      transform: translate(180px, -30px)
    
#five
  +bubbles
  background: white
  transform: translate(90px, 150px)
  opacity: 0
  animation: float5 1.3s ease-in infinite
  animation-delay: .7s
  @keyframes float5
    95%
      transform: translate(55px, -45px)
      opacity: 1
    100%
      transform: translate(55px, -41px)
    
#six
  +bubbles
  transform: translate(180px, 153px)
  opacity: 0
  animation: float6 1.2s ease-in infinite
  animation-delay: .3s
  @keyframes float6
    95%
      opacity: 1
      transform: translate(175px, -24px)
    100%
      transform: translate(175px, -24px)
 
     
@mixin littleballs
  position: absolute
  height: 24px
  width: 24px
  border-radius: 100%
  top: 24px
  left: 24px
  z-index: 0

.smallball
  +littleballs
  background: $red
  box-shadow: 0 0 14px 10px $redglow
  z-index: 0

.move1
  animation: move .4s ease infinite forwards
  animation-delay: .2s
  @keyframes move
    100%
      transform: translate(35px, -40px)

.move2
  animation: move2 .7s ease infinite forwards
  @keyframes move2
    100%
      transform: translate(35px, -40px)
    
.move3
  animation: move3 .6s ease infinite forwards
  animation-delay: .5s
  @keyframes move3
    100%
      transform: translate(35px, -40px)
    
.move4
  animation: move4 .7s ease infinite forwards
  @keyframes move4
    100%
      transform: translate(35px, -40px)

.move5
  animation: move5 .6s ease infinite forwards
  animation-delay: .4s
  @keyframes move5
    100%
      transform: translate(35px, -40px)
    
    
.move6
  animation: move6 .7s ease infinite forwards
  @keyframes move6
    100%
      transform: translate(-40px, 10px)
      
    
.move7
  animation: move7 .8s ease infinite forwards
  @keyframes move7
    100%
      transform: translate(40px, -20px)
    
.move8
  animation: move8 .8s ease infinite forwards
  @keyframes move8
    100%
      transform: translate(0, 30px)

.greenball
  +littleballs
  background: $green
  box-shadow: 0 0 20px 10px $greenglow
  
.move9
  height: 5px
  width: 5px
  animation: move9 .8s ease infinite forwards
  @keyframes move9
    100%
      transform: translate(-67px, -44px)
    
.move10
  animation: move10 .6s ease infinite forwards
  animation-delay: .4s
  @keyframes move10
    100%
      transform: translate(43px, 2px)

.move11
  height: 4px
  width: 4px
  animation: move11 .8s ease infinite forwards
  animation-delay: .6s
  @keyframes move11
    100%
      transform: translate(43px, -30px)
    
.move12
  height: 5px
  width: 5px
  animation: move12 .7s ease infinite forwards
  animation-delay: .2s
  @keyframes move12
    100%
      transform: translate(-10px, -45px)
  
.move13
  height: 26px
  width: 26px
  animation: move13 2s ease infinite forwards
  animation-delay: .1s
  @keyframes move13
    100%
      transform: translate(-67px, -44px)

.move14
  animation: move14 .8s ease infinite forwards
  @keyframes move14
    100%
      transform: translate(-67px, -44px)
    
.move15
  animation: move15 .8s ease infinite forwards
  animation-delay: .5s
  @keyframes move15
    100%
      transform: translate(-67px, -44px)
    
.move16
  animation: move16 1s ease infinite forwards
  animation-delay: .5s
  @keyframes move16
    100%
      transform: translate(-67px, -44px)
    
.blueball
  +littleballs
  background: $yellow
  box-shadow: 0 0 14px 6px $yellowglow

.move17
  animation: move16 1s ease infinite forwards
  animation-delay: .1s
  @keyframes move16
    100%
      transform: translate(-67px, -44px)
    
.move18
  animation: move18 1s ease infinite forwards
  animation-delay: .7s
  @keyframes move18
    100%
      transform: translate(-47px, -49px)
    
.move19
  animation: move19 1s ease infinite forwards
  @keyframes move19
    100%
      transform: translate(-57px, -44px)
    
    
.move20
  animation: move20 1s ease infinite forwards
  animation-delay: 0
  @keyframes move20
    100%
      transform: translate(7px, -40px)
    
.move21
  animation: move21 1s ease infinite forwards
  animation-delay: 0
  @keyframes move21
    100%
      transform: translate(-67px, -44px)
  
.move22
  animation: move22 1s ease infinite forwards
  animation-delay: 0
  @keyframes move22
    100%
      transform: translate(-47px, -44px)

.move23
  animation: move23 1s ease infinite forwards
  animation-delay: 0
  @keyframes move23
    100%
      transform: translate(-27px, -44px)
    
.yellowball
  +littleballs
  background: $yellow
  box-shadow: 0 0 14px 6px $yellowglow
.move24
  animation: move24 1s ease infinite forwards
  animation-delay: .4s
  @keyframes move24
    100%
      transform: translate(67px, -44px)
  
    
.move25
  animation: move25 1s ease infinite forwards
  animation-delay: .1s
  // background: purple
  @keyframes move25
    100%
      transform: translate(67px, -44px)
    
.move26
  animation: move26 .8s ease infinite forwards
  animation-delay: .2s
  @keyframes move26
    100%
      transform: translate(11px, -42px)
    
.move27
  animation: move27 .8s ease infinite forwards
  animation-delay: .3s
  @keyframes move27
    100%
      transform: translate(4px, -42px)
    
.ball
  filter: url(#goo)
  position: absolute
  z-index: 100
  width: 70px
  height: 70px
  background: rgba(255,127,0, .1)
  border-radius: 100%
  box-shadow: 0 0 20px 10px $ballglow
  top: 340px
  left: 100px
  
.smallball
  position: absolute
  height: 6px
  width: 6px
  border-radius: 100%
  top: 24px
  left: 24px
  background: $red
  box-shadow: 0 0 14px 10px $redglow
  
            
          
!
999px
Loading ..................

Console