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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="schlange" viewBox="0 0 663 509">

      <path id="body01" fill="#878a52" d="M236.098.195c10.683 42.422 44.856 115.812 28.45 152.86-29.415 65.04-12.14 102.03-8.738 172.696-3.944 94.33-71.28 160.89-120.892 84.02l-41.284 59.14c152.01 118.3 228.997-62.9 228.228-145.797-1.753-98.66-6.757-110.424 6.41-163.77 5.533-38.832-11.986-119.69-18.884-158.52"/>
      <path id="body02" fill="#878a52" d="M386.3.193c-4.268 51.927-34.828 76.632-18.914 124.122 22.988 68.605 29.538 61.19 48.228 89.113 20.07 29.983 23.536 61.786 21.41 109.128l71.01 1.5c-9.568-44.612 3.842-62.28-31.925-134.57-25.96-52.47-31.01-54.072-37.95-91.324-8.387-45.056 14.645-52.31 18.635-96.8h-2.1"/>
      <path id="body03" fill="#878a52" d="M548.542 0c-4.265 51.927.948 81.175 16.86 128.666 22.99 68.605-2.538 95.197-9.895 118.153-20.155 62.898 24.263 166.402 22.137 213.745l67.25-6.966c-9.568-44.62-17.425-140.944 1.032-223.1 12.138-55.74-3.22-81.515-7.497-119.165-2.55-44.49-22.434-64.74-18.444-109.23l-1.16-1.88"/>
 <g id="kopf01">
   <g id="mund">
    <path id="path4595-8" fill="#857222" fill-opacity=".994" d="M65.214 457.425c10.402 57.547 40.24 65.503 57.25 3.612"/>
    <path id="path4597-9" fill="#83994a" stroke="#3c3d3e" d="M58.054 451.13c3.244 7.98-1.043 12.756 4.25 19.373 4.693 11.47 3.504 12.39 6.092 18.81 7.268 16.145 22.634 25.863 40.732 11.12 12.036-9.806 11.555-25.07 18.425-44.16-20.62 7.13-45.92 7.15-69.5-5.16zm9.97 9.906c15.43 6.49 32.9 9.63 51.152 2.44-5.032 14.69-10.114 40.79-27.217 38.16-16.06-2.47-21.84-25.33-23.94-40.59z"/>
  </g>
  <path id="path4599-2" fill="#83994a" stroke="#3c3d3e" stroke-width="2" d="M141.086 436.63c23.198-9.223 59.536-32.083 51.342-49.25-4.282-8.97-22.636-12.96-35.282-15.47-13.316-12.794-18.318-51.26-49.718-13.25l-20.958 1.174c-18.655-36.04-34.078-11.7-43.32 8.78-34.502-5.22-48.227 6.25-39.66 28.54 10.315 17.27 25.573 30.18 42.53 37.59 8.114 38.58 106.138 30.97 95.066 1.88z"/>
  <path id="path4601-7" fill="#9b7222" fill-opacity=".412" d="M43.7 370.447c24.984-49.242 32.054-22.347 42.494-9.762l21.82-.576c26.17-37.75 36.277-5.45 48.525 12.06-16.26 16.71-27.11 14.75-39.91 11.19 0 8.11 6.07 12.59 9.47 18.662l-3.45 3.732c-15.11-5.92-31.99-6.796-51.69.286l-3.15-4.595c8.55-7.18 12.07-13.73 16.36-24.4z"/>
  <path id="path4603-9" fill="none" stroke="#3c3d3e" d="M81.887 379.347c-4.472 6.53-8.59 18.452-18.09 21.82"/>
  <path id="path3001" fill="#edf7d9" fill-opacity=".991" stroke="#000" d="M138.288 352.28c10.828 16.227 21.195 35.98-12.347 34.74-7.3-.27-16.53-6.97-18.08-10.62-4.79-11.218 18.27-41.043 30.44-24.12z"/>
   <path id="path4623-1" fill="none" stroke="#3c3d3e" stroke-width="3" d="M56.62 418.682c-51.414 51.85 129.192 59.913 74.652 2.583" stroke-linecap="round"/>
   <path id="path4625-3" fill="none" stroke="#3c3d3e" d="M19.294 385.665c1.44 22.197 20.433 27.42 34.742 36.176"/>
   <path id="path4627-8" fill="none" stroke="#3c3d3e" d="M175.987 389.637c-5.163 18.18-29.24 29.145-39.91 35.03"/>
   <path id="path4637-7" fill="none" stroke="#3c3d3e" d="M12.69 391.407c-.004-7.7 16.876-7.54 16.94-4.308" stroke-linecap="round"/>
   <path id="path4639-9" fill="none" stroke="#3c3d3e" d="M166.3 392.555c2.525-2.187 10.018-7.145 18.09 2.296" stroke-linecap="round"/>
   <path id="path4641-3" fill="none" stroke="#3c3d3e" stroke-width="2" d="M70.976 408.06c19.665-8.01 35.712-5.764 50.82-.863" stroke-linecap="round"/>
   <path id="path4643-1" fill="#616149" fill-opacity=".991" d="M86.768 418.97c0 3.805-2.53 6.89-5.65 6.89-3.12 0-5.65-3.085-5.65-6.89 0-3.806 2.53-6.89 5.65-6.89 3.12 0 5.65 3.084 5.65 6.89z"/>
   <path id="path4645-9" fill="#616149" fill-opacity=".991" d="M115.102 418.97c0 3.805-2.53 6.89-5.65 6.89-3.122 0-5.652-3.085-5.652-6.89 0-3.806 2.53-6.89 5.65-6.89 3.122 0 5.652 3.084 5.652 6.89z"/>
   <path id="path2998" fill="#edf7d9" fill-opacity=".992" stroke="#000" d="M72.986 349.775c14.56 15.363 23.532 31.06-9.762 37.61-5.637 1.11-14.9 3.9-17.227-3.45-4.247-13.408 14.823-51.088 26.99-34.165z"/>
   <path id="iris00Links" fill="#6ef56b" stroke="#000" stroke-width=".5" d="M73 349.45c14.56 15.362 23.532 31.06-9.762 37.61-5.637 1.11-14.9 3.9-17.227-3.45-4.25-13.41 14.82-51.09 26.99-34.165z" class="iris01"/>
   <path id="iris01Links" fill="#2e969e" fill-opacity=".991" stroke="#000" stroke-width=".5" d="M73 349.45c14.56 15.362 23.532 31.06-9.762 37.61-5.637 1.11-14.9 3.9-17.227-3.45-4.25-13.41 14.82-51.09 26.99-34.165z" class="iris"/>
   <path id="iris02Links" fill="#ed899e" fill-opacity=".991" stroke="#000" stroke-width=".5" d="M73 349.45c14.56 15.362 23.532 31.06-9.762 37.61-5.637 1.11-14.9 3.9-17.227-3.45-4.25-13.41 14.82-51.09 26.99-34.165z" class="iris"/>
   <path id="iris03Links" fill="#ed5cd9" fill-opacity=".991" stroke="#000" stroke-width=".5" d="M73 349.45c14.56 15.362 23.532 31.06-9.762 37.61-5.637 1.11-14.9 3.9-17.227-3.45-4.25-13.41 14.82-51.09 26.99-34.165z" class="iris"/>
   <path id="iris00Rechts" fill="#6ef56b" stroke="#000" stroke-width=".5" d="M138.63 352.217c10.828 16.226 21.195 35.978-12.347 34.74-7.29-.27-16.52-6.97-18.08-10.622-4.78-11.217 18.27-41.042 30.44-24.118z" class="iris01"/>
   <path id="iris01Rechts" fill="#2e969e" fill-opacity=".991" stroke="#000" stroke-width=".5" d="M138.63 352.217c10.828 16.226 21.195 35.978-12.347 34.74-7.29-.27-16.52-6.97-18.08-10.622-4.78-11.217 18.27-41.042 30.44-24.118z" class="iris"/>
   <path id="iris02Rechts" fill="#ed899e" fill-opacity=".991" stroke="#000" stroke-width=".5" d="M138.63 352.217c10.828 16.226 21.195 35.978-12.347 34.74-7.29-.27-16.52-6.97-18.08-10.622-4.78-11.217 18.27-41.042 30.44-24.118z" class="iris"/>
   <path id="iris03Rechts" fill="#ed5cd9" fill-opacity=".991" stroke="#000" stroke-width=".5" d="M138.63 352.217c10.828 16.226 21.195 35.978-12.347 34.74-7.29-.27-16.52-6.97-18.08-10.622-4.78-11.217 18.27-41.042 30.44-24.118z" class="iris"/>
   <path id="path3005" fill-opacity=".991" d="M130.112 364.24c1.32 2.01 1.065 4.57-.573 5.725-1.64 1.154-4.04.463-5.36-1.543-1.32-2.002-1.07-4.57.57-5.72 1.64-1.15 4.04-.46 5.36 1.55z" />
   <path id="path3003" fill-opacity=".991" d="M69.846 368.91c-.942 2.21-3.22 3.41-5.087 2.683-1.87-.72-2.62-3.1-1.68-5.31.94-2.21 3.22-3.41 5.08-2.68 1.86.73 2.61 3.11 1.67 5.32z"/>
      </g>
    </g>

  <path id="pathHead01" class="movingPath" fill="none" stroke="#000" d="M90.087 430.108c61.225.195 156.24-62.32 175.044-31.09 62.093 103.122 50.977-4.5 74.702-29.06 30.835-31.917 82.345-37.72 126.215-58.764"/>
  <path id="pathHead02" class="movingPath" fill="none" stroke="#000" d="M467.25 311.194c31.37 17.544 26.24 30.7 57.313 41.89 34.017 12.252-17.14 62.28 25.052 32.186 16.092-11.478 48.432 48.522 68.98 68.86"/>
  <path id="pathHead03" class="movingPath" fill="none" stroke="#000" d="M616.192 454.732c-37.763 30.895-145.54-35.214-203.596-4.805-44.4 23.257-89.637 43.923-104.5 1.802-12.652-35.855-247.64 14.265-214.406-20.42"/>
</svg>
</div>


<div id="button">Start</div>
<audio id="moin" > // "moin" in Hamburgs means "hello"
    <source src="https://redmax.hamburg/sound/thanks.mp3">
</audio>
<audio id="trust" > 
    <source src="https://redmax.hamburg/sound/kinky.mp3">
</audio>
              
            
!

CSS

              
                body{
  margin:0;
  font-family:sans-serif;
}
#wrapper{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #1fa91c;
  text-align:center;
}
#schlange{
  position:absolute;
  top: 20%;
  left:50%;
  width: 90%;
  max-width: 700px;
  overflow: visible; 
}
.movingPath{visibility: hidden;}
h1 {
    position: absolute;
    bottom: 0;
    font-size: calc(12px + 2.5vw);
    width: inherit;
    font-weight: 200;
    z-index: 2
}
#body02, #body03 {
    visibility: hidden;
}
#button{
  position: absolute;
  margin: 25px;
  font-size: 20px;
  cursor:pointer;
}
              
            
!

JS

              
                
// Audio + mouth animation ==================================

TweenMax.set("#kopf01",{y:10});
TweenMax.set("#schlange",{xPercent:-50, yPercent:-50})

TweenMax.to("#mund",0,{y:-34})

var trustSong = new TimelineMax({repeat:11,onStart:playTrust})
  .to("#mund",0.4, {autoAlpha:1,y:0,  repeat:1, yoyo: true, ease: Power0.easeNone})
function playTrust(sound){trust.play();};

var bigHead = new TimelineMax({})
  .to("#kopf01", 1,{scale:1.5,transformOrigin:"center"})
  .to("#kopf01", 2,{scale:1,transformOrigin:"center"})

var moinText = new TimelineMax({repeat:1,onStart:playMoin})
  .to("#mund",0.5, {autoAlpha:1,y:0,  repeat:1, yoyo: true, ease: Power0.easeNone},0.5)
function playMoin(sound){moin.play();};

// animation ==================================
TweenMax.set(".iris", { scale: 0, transformOrigin:"50% 50%"});
TweenMax.set(".iris01", { scale: 0.8, transformOrigin:"50% 50%"});

var iris = new TimelineMax({repeat: -1})
	.to("#iris01Links,#iris01Rechts",1, {scale: 0.8, transformOrigin:"50% 50%", ease: Power0.easeNone})
	.to("#iris02Links, #iris02Rechts",1, {scale: 0.8, transformOrigin:"50% 50%", ease: Power0.easeNone},"-=0.2")
	.to("#iris03Links, #iris03Rechts",1, {scale: 0.8, transformOrigin:"50% 50%", ease: Power0.easeNone},"-=0.2");

var schlange = new TimelineMax({ repeat: -1, repeatDelay:0.2, yoyo: true})
	.to("#body01",4, {morphSVG:"#body02", ease:Linear.easeNone},0)
	.to("#body01",4, {morphSVG:"#body03", ease:Linear.easeNone})
  .to("#body01",4, {morphSVG:"#body01", ease:Linear.easeNone})

var head01 = MorphSVGPlugin.pathDataToBezier("#pathHead01", {offsetX:0, offsetY:0, relative:true});
var head02 = MorphSVGPlugin.pathDataToBezier("#pathHead02", {offsetX:0, offsetY:0, relative:true});
var head03 = MorphSVGPlugin.pathDataToBezier("#pathHead03", {offsetX:0, offsetY:0, relative:true});

var HEAD = new TimelineMax({repeat: -1, repeatDelay:0.2, yoyo: true})
  .to("#kopf01", 4, {bezier: {values:head01, type:"cubic"}, ease:Linear.easeNone})
  .to("#kopf01", 4, {bezier: {values:head02, type:"cubic"}, ease:Linear.easeNone})
  .to("#kopf01", 4, {bezier: {values:head03, type:"cubic"}, ease:Linear.easeNone})

var wackeln = new TimelineMax({repeat:-1, yoyo:true})
.to("#kopf01",1,{rotation:20, transformOrigin:"center"})
.to("#kopf01",1,{rotation:-20, transformOrigin:"center"})

var INTRO = new TimelineMax({paused:true})
.add(iris,0)
.add(wackeln,0)
.add(moinText,1)
.add(bigHead,1)
.add(schlange,1.5)
.add(HEAD,1.5)
.add(trustSong,7)

.call(pause,0, this, 23)

function pause() {
  var again = new TimelineMax()
  .to(INTRO, 2, {timeScale:0}) // smooth stop
  .to("#button", 2, {text:"again ...", ease:Linear.easeNone}) // TextPlugin.min.js
}
  
$("#button").click(function(){
    INTRO.timeScale(1).restart();
    $("#button").text("");
});








              
            
!
999px

Console