Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <div class="dribble">
  <p>Original illustration by <a target="_blank" href="https://dribbble.com/miguelgarest">
  Miguel E. on Dribbble
</a></p>

</div>
<svg viewBox="0 0 1283 817" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
  <g transform="translate(3.68 10.45)">
    <g id="food">
      <path fill="#3ed0e1" stroke="#3ed0e1" stroke-width=".99" d="M-.928 2.738h1281.46v796.195H-.928z" transform="matrix(1 0 0 1.02387 -2.253 -12.754)"/>
            <path class="shadow" d="M482.737 527.86l-18.708 5.804-38.394.298-68.826-10.431-9.393-10.033 33.574-13.167 115.354-9.025 213.592-19.395 33.275 28.31 40.55 10.318-37.741.929-20.103 3.188 12.466 5.269-14.079 5.735 5.649 9.832-145.059 6.703-102.157-14.335z" fill="#00aeb6"/>
      <g class="chop chop-1">
        <path d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z" fill="#31312d" transform="scale(1 -1) rotate(-83.811 39.828 18.613)"/>
        <path d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z" fill="#2f302d" transform="scale(1 -1) rotate(-83.811 39.828 18.613)"/>
      </g>
      <g id="chop-sticks" transform="scale(1.06072) rotate(-13.014 718.903 229.216)" fill="#00aeb6">
        <g id="chop-2">
          <path d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z" transform="translate(-51.627 -6.642)"/>
          <path d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z" transform="translate(-51.627 -6.642)"/>
        </g>
        <g id="chop-1">
          <path d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z" transform="scale(1 -1) rotate(-83.811 -43.766 32.485)"/>
          <path d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z" transform="scale(1 -1) rotate(-83.811 -43.766 32.485)"/>
        </g>
      </g>
      <g id="hanging">
        <path d="M574.019 279.35s-16.498-88.525 19.247-135.463c35.718-46.902 11.603 69.127 10.381 68.306l-8.188-1.454s6.321-52.034 5.727-57.934c-.595-5.901-8.425 10.64-11.305 16.515-11.701 23.874-15.587 72.883-7.073 112.405l-8.789-2.375z" fill="#ffce5b" stroke="#ddad4f" transform="translate(2.212 127.906)"/>
        <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#ffce5b" stroke="#ddad4f" stroke-width=".73" transform="matrix(1.07234 0 0 .97554 -41.226 130.59)"/>
        <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#ffce5b" stroke="#ddad4f" stroke-width=".74" transform="matrix(1.10682 0 0 .92303 -83.228 211.995)"/>
        <g>
          <path d="M574.019 279.35s-12.419-86.409 16.937-137.585c6.022-10.5 12.009-10.752 14.856-10.332 15.582 2.302-.571 79.937-2.165 80.76l-8.188-1.454s5.968-54.504 5.374-60.404c-.595-5.9-8.236 10.98-9.847 17.321-9.921 39.051-16.461 76.511-8.178 114.069l-8.789-2.375z" fill="#ffd982" stroke="#ddad4f" transform="translate(9.952 131.538)"/>
          <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#ffd982" stroke="#ddad4f" stroke-width=".73" transform="matrix(1.07234 0 0 .97554 -33.486 134.223)"/>
          <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#ffd982" stroke="#ddad4f" stroke-width=".74" transform="matrix(1.10682 0 0 .92303 -75.488 215.627)"/>
        </g>
      </g>
      <g id="hanging-shadow">
        <path d="M574.019 279.35s-16.498-88.525 19.247-135.463c35.718-46.902 11.603 69.127 10.381 68.306l-8.188-1.454s6.321-52.034 5.727-57.934c-.595-5.901-8.425 10.64-11.305 16.515-11.701 23.874-15.587 72.883-7.073 112.405l-8.789-2.375z" fill="#00aeb6" transform="matrix(1.38092 -.21756 .09118 .57876 -299.098 490.945)"/>
        <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#00aeb6" transform="matrix(1.48082 -.2333 .08895 .5646 -358.838 501.949)"/>
        <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#00aeb6" transform="matrix(1.52843 -.2408 .08417 .53422 -409.417 558.2)"/>
        <g>
          <path d="M574.019 279.35s-12.419-86.409 16.937-137.585c6.022-10.5 12.009-10.752 14.856-10.332 15.582 2.302-.571 79.937-2.165 80.76l-8.188-1.454s5.968-54.504 5.374-60.404c-.595-5.9-8.236 10.98-9.847 17.321-9.921 39.051-16.461 76.511-8.178 114.069l-8.789-2.375z" fill="#00aeb6" transform="matrix(1.38092 -.21756 .09118 .57876 -288.079 491.363)"/>
          <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#00aeb6" transform="matrix(1.48082 -.2333 .08895 .5646 -347.819 502.367)"/>
          <ellipse cx="599.609" cy="213.051" rx="4.148" ry="5.21" fill="#00aeb6" transform="matrix(1.52843 -.2408 .08417 .53422 -398.398 558.619)"/>
        </g>
      </g>
      <g id="box">
        <path d="M784.532 314.659l-134.635-17.475-165.918-9.626 126.742 21.355c57.938 2.9 115.877 6.098 173.811 5.746z" fill="#f47b6c"/>
        <g id="noodles">
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width=".93" transform="matrix(1 0 0 1.13569 -14.572 -73.053)"/>
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.06" transform="matrix(.8789 0 0 .99815 63.763 -24.067)"/>
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width="1.17" transform="matrix(.78966 0 0 .91906 122.146 6.444)"/>
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.33" transform="matrix(.69403 0 0 .80776 184.003 46.085)"/>
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width="1.15" transform="matrix(.88863 0 0 .84435 57.67 41.963)"/>
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.31" transform="matrix(.78101 0 0 .74209 127.28 78.382)"/>
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width="1.44" transform="matrix(.70172 0 0 .6833 179.16 101.066)"/>
          <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.64" transform="matrix(.61674 0 0 .60054 234.13 130.538)"/>
          <g>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width=".93" transform="matrix(1 0 0 1.13569 50.263 -62.474)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.06" transform="matrix(.8789 0 0 .99815 128.598 -13.488)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width="1.17" transform="matrix(.78966 0 0 .91906 186.98 17.023)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.33" transform="matrix(.69403 0 0 .80776 248.838 56.665)"/>
          </g>
          <g>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width="1.33" transform="matrix(.69236 0 0 .8032 251.34 64.252)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.52" transform="matrix(.60851 0 0 .70593 305.576 98.896)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width="1.67" transform="matrix(.54673 0 0 .65 345.998 120.475)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.89" transform="matrix(.48052 0 0 .57128 388.826 148.511)"/>
          </g>
          <g>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width=".93" transform="matrix(1 0 0 1.13569 -90.331 -61.554)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.06" transform="matrix(.8789 0 0 .99815 -11.997 -12.57)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffd881" stroke="#dbaa4b" stroke-width="1.17" transform="matrix(.78966 0 0 .91906 46.386 17.942)"/>
            <ellipse cx="648.182" cy="345.739" rx="50.891" ry="50.553" fill="#ffce5b" stroke="#dbaa4b" stroke-width="1.33" transform="matrix(.69403 0 0 .80776 108.244 57.584)"/>
          </g>
        </g>
        <path id="flap-3" d="M783.489 314.678l50.694 68.956-2.628 22.233-54.769-8.053-45.214-2.09 51.917-81.046z" fill="#ffdfe2"/>
        <g id="face">
          <path d="M601.053 509.916l7.552-201.116 164.978 6.148C763.66 381.884 754.741 449 738.827 514.867l-137.774-4.951z" fill="#fff"/>
          <path id="flap-1_shadow" d="M609.683 309.768l8.861 102.509 41.196 54.51 89.226 3.362 16.36-73.567 9.606-81.783-165.249-5.031z" fill="#ffe0e3"/>
          <g id="mouth">
            <path d="M660.539 436.639c3.832-5.166 37.575-2.812 39.607.492 4.617 7.504-5.691 30.664-19.983 33.008-20.68 3.607-24.657-26.716-19.624-33.5z" fill="#332d2a"/>
            <ellipse cx="678.315" cy="463.283" rx="9.38" ry="8.002" fill="#ff3d5c" transform="matrix(1.20785 0 0 .96872 -142.303 13.953)"/>
          </g>
          <ellipse class="eye" cx="646.992" cy="435.055" rx="4.874" ry="6.862" fill="#202c33" transform="matrix(1.16433 .12577 -.1074 .99422 8.725 -76.014)"/>
          <ellipse class="eye" cx="646.992" cy="435.055" rx="4.874" ry="6.862" fill="#202c33" transform="matrix(1.16433 .12577 -.1074 .99422 -60.432 -78.853)"/>
        </g>
        <g id="flap-2_shadow">
          <path class="fill-shadow" d="M497.198 497.167l-13.475-209.193 129.391 20.64-115.916 188.553z" fill="#ffa0ae"/>
          <path d="M602.527 510.352l-104.555-15.817 112.33-186.261-7.775 202.078z" fill="#ffe2e4"/>
        </g>
        <path id="flap-2" d="M420.196 382.821l70.023 9.776 48.621-20.794 72.673-62.941-126.95-21.333-62.382 67.632-1.985 27.66z" fill="#fff"/>
        <path id="flap-1" d="M641.233 363.814l51.101 30.042 87.706 4.361 28.343-28.349-24.894-55.19-172.727-6.079 30.471 55.215z" fill="#fff"/>
      </g>
      <g class="chop chop-2">
        <path d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z" fill="#31312d" transform="translate(31.395 -71.095)"/>
        <path d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z" fill="#2f302d" transform="translate(31.395 -71.095)"/>
      </g>
    </g>
  </g>
</svg>

  </div>
            
          
!
            
              body {
	background-color: #16181D;
	background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.container {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
svg {
  max-width: 800px;
  width: 100%;
  background: #3ed0e1;
}
.dribble {
  font-size: 25px;
  font-family: Inconsolata, monospace;
  p {
    color: #F1F1F1;
    
    a{
      color: #ffa0ae ;
    }
  }
}

            
          
!
            
              const flap3 =
    "M647.874 341.275l54.357 34.965 77.45 13.492 28.702-19.864-24.894-55.19-158.516-29.814 22.901 56.411z",
  flap2 =
    "M664.101 323.951l37.022 30.208 79.968 30.509 27.292-14.8-21.814-36.603-142.232-71.27 19.764 61.956z",
  flap4 =
    "M420.196 382.821l63.685-12.709 46.568-21.001 78.141-91.307-124.027 29.725-62.382 67.632-1.985 27.66z",
  bounce = Bounce.easeOut,
    back = Back.easeOut.config( 1.4);
  
TweenMax.set("#chop-sticks, .chop, #hanging-shadow, #shadow", {
  visibility: "hidden"
});
TweenMax.set("#box", {
  transformOrigin: "-50% 100%"
});
TweenMax.set(".eye", {
  transformOrigin: "50% 50%"
});
TweenMax.set("#flap-1", {
  transformOrigin: "-15% 50%"
});
TweenMax.set("#flap-2", {
  transformOrigin: "30% 0%"
});
TweenMax.set(".chop-1", {
  transformOrigin: "30% 0%"
});
TweenMax.to("#flap-1", 0.2, {
  morphSVG: flap2,
  rotation: -30,
  y: 50,
  yoyo: true,
  repeat: -1,
});
TweenMax.to("#flap-1_shadow", 0.2, {
  rotation: 5,
  y: -10,
  scaleY: 0.6,
  yoyo: true,
  repeat: -1
});
TweenMax.to("#flap-2", 0.2, {
  morphSVG: flap4,
  x: 10,
  rotation: 15,
  yoyo: true,
  repeat: -1
});
TweenMax.to(".fill-shadow", 0.2, {
  fill: '#ffe2e4',
  yoyo: true,
  repeat: -1
});
TweenMax.to("#flap-3", 0.19, { x: -10, rotation: -10, yoyo: true, repeat: -1 });
TweenMax.to("#noodles", 0.401, {
  y: -10,
  rotation: -1,
  yoyo: true,
  repeat: -1
});
TweenMax.to(".eye", 0.3, {
  scaleY: 0.3,
  yoyo: true,
  repeat: -1,
  repeatDelay: 0.4
});
TweenMax.to(".chop-1, #chop-1", 0.2, { 
    rotation: -5,
    yoyo: true,
    repeat: -1
  })

const shakeBox = item => {
  let tl = new TimelineMax({ repeat: -1, yoyo: true });
  tl.add("s");
  tl.timeScale(1);
  tl
    .to("#box", 0.15, {
      transformOrigin: "center center",
      force3D: true,
      rotationZ: 5,
      rotation: -20,
      x: 20,
      y: -20,
      z: 20,
      ease: Power0.easeNone
    })
    .to("#box", 0.2, {
      transformOrigin: "center center",
      rotationZ: -20,
      rotation: 50,
      x: -20,
      y: 20,
      z: -20,
      force3D: true,
      ease: Power0.easeNone
    });
  return tl;
};
const shakeShadow = item => {
  let tl = new TimelineMax({ repeat: -1, yoyo: true });
  tl.add("s");
  tl.timeScale(1);
  tl
    .to(".shadow", 0.15, {
      transformOrigin: "center center",
      force3D: true,
      rotationZ: -5,
      rotation: 20,
      x: -20,
      y: 20,
      scaleX: 1.2,
      ease: Power0.easeNone
    })
    .to(".shadow", 0.2, {
      transformOrigin: "center center",
      rotationZ: 5,
      rotation: -20,
      x: 20,
      y: -20,
      z: 20,
      scaleX: 0.8,
      force3D: true,
      ease: Power0.easeNone
    });
  return tl;
};
const chopSticks = item => {
  let tl = new TimelineMax({ repeat: -1});
  tl.add("s");
  tl.timeScale(1);
  tl.to(".chop", 0.8, { 
    autoAlpha: 1, 
    x: 260, 
    y: 50
  },"s")
  .to("#chop-sticks", 0.8, { 
    autoAlpha: 1, 
    x: 200, 
    y: 250
  },"s")
  .to("#hanging-shadow", 0.3, { 
    autoAlpha: 1
  },"s+=0.8")
   .to("#hanging-shadow, #chop-sticks, #hanging, .chop", 0.3, { 
      y: -500,
    },"s+=0.8")
  return tl;
};
const master = new TimelineMax({delay: .5});
master.timeScale(1.5)
master.add('s')
master
  .add((shakeBox),'s')
  .add((shakeShadow),'s')
  .add((chopSticks))


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console