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.

            
              #wrapper
  svg#svg-a(viewbox='0 0 438.55 512', xmlns='http://www.w3.org/2000/svg')
    path.a.yoga(d='M257.2 162.45h.54A81.22 81.22 0 0 0 257.74 0h-.54a81.22 81.22 0 0 0 0 162.45ZM461.2 328.59 369.61 262l-29-70.73a34.15 34.15 0 0 0-32.37-21.18v0H203.73v0a34.15 34.15 0 0 0-32.37 21.18l-29 70.73L50.8 328.59A34.16 34.16 0 1 0 91 383.84l99-72-2.52 26.07L93.85 432.82A46.77 46.77 0 0 0 127.58 512h44.76a58.42 58.42 0 0 1-18.89-43.41c0-31.36 23.84-56.88 53.15-56.88h51c16.7 0 29.95 13.65 29.95 13.65H206.6c-22.27 0-40.4 19.39-40.4 43.23s18.12 43.22 40.4 43.22H285c.88-.06 1.77-.07 2.64-.17h94.74a46.78 46.78 0 0 0 33.73-79.18l-91.6-95h0L322 311.84l99 72a34.16 34.16 0 1 0 40.18-55.25Z', transform='translate(-36.73 0)')
    path.a2.beer(d='M312.41 512H169.49A67.56 67.56 0 0 1 102 444.52V174.78a7.76 7.76 0 0 1 7.76-7.76H370.86c4.28 0 9 3.48 9 7.76V444.54A67.55 67.55 0 0 1 312.41 512ZM117.53 182.54v262a52 52 0 0 0 52 52H312.41a52 52 0 0 0 52-52v-262ZM404.88 396.78H372.13a7.76 7.76 0 1 1 0-15.52h32.75A28.32 28.32 0 0 0 433.17 353V280.17a28.32 28.32 0 0 0-28.28-28.3H372.13a7.76 7.76 0 0 1 0-15.52h32.75a43.85 43.85 0 0 1 43.8 43.81V353A43.85 43.85 0 0 1 404.88 396.78ZM176.5 440.09a7.76 7.76 0 0 1-7.76-7.76V243.45a7.76 7.76 0 0 1 15.52 0V432.33A7.75 7.75 0 0 1 176.5 440.09ZM305.38 440.09a7.76 7.76 0 0 1-7.76-7.76V243.45a7.76 7.76 0 0 1 15.52 0V432.33A7.75 7.75 0 0 1 305.38 440.09ZM240.93 440.09a7.76 7.76 0 0 1-7.76-7.76V243.45a7.76 7.76 0 1 1 15.52 0V432.33A7.74 7.74 0 0 1 240.93 440.09ZM367.68 182.54H114.21a50.89 50.89 0 1 1 0-101.78h3.71A91.19 91.19 0 0 1 279.8 34.34a59.46 59.46 0 0 1 23.4-4.84 61.6 61.6 0 0 1 60.65 51.25h3.83a50.9 50.9 0 0 1 0 101.79ZM114.21 96.26a35.37 35.37 0 0 0 0 70.75H367.68a35.37 35.37 0 1 0 0-70.75H356.93a7.74 7.74 0 0 1-7.74-7.37A46.13 46.13 0 0 0 303.2 45a45.55 45.55 0 0 0-22.08 5.9A7.75 7.75 0 0 1 271 48.5 75.67 75.67 0 0 0 132.89 88.76a7.75 7.75 0 0 1-7.76 7.49Z', transform='translate(-63.32)')

            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Bungee+Shade')

//VARIABLES
$bg: #2980b9
$color: #eee
$mt: 100px
$fs: 50px
$fs2: 2em
$fs3: 1.5em
$res: 768px
$res2: 550px
  
body
  background: #4CB8C4
  background: -webkit-linear-gradient(to left, #4CB8C4 , #3CD3AD)
  background: linear-gradient(to left, #4CB8C4 , #3CD3AD)
 
* 
  font-family: 'Bungee Shade'

#wrapper
  width: 870px
  margin: 50px auto

#text
  color: $color
  font-size: $fs
  white-space: nowrap
  line-height: 60px
  margin: 0
  overflow: hidden
  width: 18em
  @media screen and (max-width: $res)
    font-size: $fs2
  @media screen and (max-width: $res2)
    font-size: $fs3  
  
.first  
  animation: type 1.5s steps(80, end)

.sec  
  animation: type2 3s steps(80, end)


@keyframes type
  from
    width: 0
    
@keyframes type2
  0%
    width: 0
  50%
    width: 0
  100%
    width: 100
  
.a, .a2
  fill: #fff
 
.beer
  visibility: hidden
  
svg    
  display: block
  margin: 0px auto
  width: 100px
  position: absolute
  top: 45%
  left: 0
  right: 0


            
          
!
            
              //Look at this: ☢
//but in the end it's all about this: ☮ 

var tl = new TimelineMax({repeat: -1});
var svgYoga = document.getElementsByClassName('yoga')[0];
var svgBeer = document.getElementsByClassName('beer')[0];


tl
  .to(svgYoga, 1, {morphSVG:svgBeer,
      ease:Power3.easeInOut,
      delay:1.2})
  .to(svgYoga, 1, {morphSVG:svgYoga,
      ease:Power3.easeInOut,
      delay:1.2});
tl.play();
            
          
!
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