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.

            
              <svg width="170px" height="261px" viewBox="0 0 170 261">
        <g id="robot">
            <rect id="Rectangle-path" fill="#F6CD61" fill-rule="nonzero" x="43" y="249" width="29.7078593" height="11.093155"></rect>
            <polygon id="Shape" fill="#3DA4AB" fill-rule="nonzero" points="94 212.093155 94 221.60292 94 235.862855 94 243.784518 94 248.5394 108.070431 248.5394 108.070431 243.784518 108.070431 235.862855 108.070431 221.60292 108.070431 212.093155 108.070431 201 94 201"></polygon>
            <rect id="Rectangle-path" fill="#F6CD61" fill-rule="nonzero" x="94" y="248" width="29.7078593" height="11.093155"></rect>
          <g id = 'arms'>
          <path d="M34.7945411,124 L34.7945411,138.655783 C30.9343023,139.336321 27.3364427,141.090142 24.4021377,143.721688 C21.6765099,146.277381 19.5574202,149.42552 18.2038944,152.929855 C16.3951047,157.369002 15.516284,162.302958 15.158246,166.968304 C14.7141944,173.264205 15.0044906,179.591215 16.0231171,185.818185 L0.394988307,185.818185 C-0.269939518,177.057703 -0.0699961863,169.546025 0.80417466,163.089941 C1.77134241,155.813887 3.55688286,149.895024 5.82135734,145.07888 C10.3503063,135.451303 16.7949914,130.225173 22.4538526,127.388266 C29.1775284,124 34.7945411,124 34.7945411,124 Z" id="Shape" fill="#3DA4AB" fill-rule="nonzero"></path>
            <path d="M133.950412,124 L133.950412,138.655783 C137.817228,139.332999 141.421932,141.087018 144.361415,143.721688 C147.081941,146.274304 149.197686,149.417364 150.550358,152.915718 C152.359148,157.354865 153.237969,162.288821 153.596007,166.954167 C154.040058,173.250068 153.749762,179.577077 152.731136,185.804048 L168.363914,185.804048 C169.028842,177.043565 168.828899,169.531888 167.954728,163.075804 C166.98756,155.799749 165.20202,149.880887 162.937545,145.064742 C158.408596,135.437165 151.963911,130.211036 146.30505,127.374129 C139.567425,124 133.950412,124 133.950412,124 Z" id="Shape" fill="#3DA4AB" fill-rule="nonzero"></path>
            <path d="M157.025057,211.885599 C157.025057,211.885599 141.313231,196.555933 153.858512,186 L169.440143,186 C169.440143,186 171.095487,211.885599 157.025057,211.885599 Z" id="Shape" fill="#F6CD61" fill-rule="nonzero"></path>
            <path d="M12.4793528,210.885599 C12.4793528,210.885599 28.1911788,195.555933 15.6458972,185 L0.0596169543,185 C0.0596169543,185 -1.591078,210.885599 12.4793528,210.885599 Z" id="Shape" fill="#F6CD61" fill-rule="nonzero"></path>
            <path d="M45.9271371,119.5462 L45.9271371,138.561018 C45.9271371,138.702392 45.9271371,138.848478 45.9271371,138.98514 C45.6864449,141.943534 43.1901739,144.18546 40.2633342,144.071859 C37.3364944,143.958257 35.0167272,141.529403 35.0000016,138.561018 L35.0000016,119.5462 C34.9983354,117.303429 36.3306432,115.280746 38.3750648,114.422246 C40.4194865,113.563746 42.7729198,114.038701 44.3368902,115.625425 L44.4670858,115.762087 C45.3158893,116.681246 45.8293796,117.866708 45.9224873,119.122078 C45.9178375,119.25874 45.9271371,119.404826 45.9271371,119.5462 Z" id="Shape" fill="#4A4E4D" fill-rule="nonzero"></path>
            <path d="M133.950395,120.546578 L133.950395,139.566108 C133.955854,141.813032 132.622081,143.84092 130.573569,144.700281 C128.525057,145.559643 126.167288,145.080376 124.604207,143.486883 L124.455412,143.326659 C123.517352,142.301725 122.997311,140.954645 123.00001,139.556683 L123.00001,120.546578 C123.00001,117.483287 125.450297,115 128.472878,115 C131.495459,115 133.945745,117.483287 133.945745,120.546578 L133.950395,120.546578 Z" id="Shape" fill="#4A4E4D" fill-rule="nonzero"></path>
  </g>
          <g id='body'>
           <rect id="Rectangle-path" fill="#3DA4AB" fill-rule="nonzero" x="74" y="103" width="18.7621243" height="11.093155"></rect>
            <rect id="Rectangle-path" fill="#3DA4AB" fill-rule="nonzero" x="45" y="110" width="78.1731929" height="63.3827252"></rect>
            <rect id="Rectangle-path" fill="#FE8A71" fill-rule="nonzero" x="57" y="119" width="53.1570272" height="41.1964151"></rect>
          </g>
            
            <rect id="Rectangle-path" fill="#3DA4AB" fill-rule="nonzero" x="45" y="185" width="81.3025386" height="7.92166253"></rect>
            <rect id="Rectangle-path" fill="#3DA4AB" fill-rule="nonzero" x="50" y="193" width="34.3949029" height="7.92166253"></rect>
            <rect id="Rectangle-path" fill="#3DA4AB" fill-rule="nonzero" x="86" y="193" width="34.3949029" height="7.92166253"></rect>
            <g id = 'head'>
            <rect id="Rectangle-path" fill="#3DA4AB" fill-rule="nonzero" x="30" y="52" width="107.881052" height="50.7061802" rx="12.97"></rect>
            <rect id="Rectangle" fill="#4A4E4D" x="39" y="60" width="91" height="35"></rect>
            <circle id="eye-1" stroke="#979797" fill="#D8D8D8" cx="60.5" cy="77.5" r="12.5"></circle>
            <circle id="eye-2" stroke="#979797" fill="#D8D8D8" cx="108.5" cy="77.5" r="12.5"></circle>
              <g id = 'antenna'>
            <path id="antenna-1" fill="none" stroke="#3DA4AB" d = "M 54 5 q 0 0 0 50" x="54" y="5" stroke-width="5.38452043"></path>
            <path id="antenna-2" fill="none" d="M 108 5 q 0 0 0 50" width="5.38452043" stroke-width="5.38452043" stroke="#3DA4AB" height="46.926779"></path>
            <ellipse id="antenna-1-ball" fill="#F6CD61" fill-rule="nonzero" cx="55.1005965" cy="6.182761" rx="6.10059655" ry="6.182761"></ellipse>
            <ellipse id="antenna-2-ball" fill="#F6CD61" fill-rule="nonzero" cx="109.100597" cy="6.182761" rx="6.10059655" ry="6.182761"></ellipse>
              </g>
          </g>
            
            <polygon id="Shape" fill="#3DA4AB" fill-rule="nonzero" points="58 201 58 212.093155 58 221.60292 58 235.862855 58 243.784518 58 248.5394 72.0750806 248.5394 72.0750806 243.784518 72.0750806 235.862855 72.0750806 221.60292 72.0750806 212.093155 72.0750806 201"></polygon>
            <polygon id="Shape" fill="#3DA4AB" fill-rule="nonzero" points="120.356804 179.338273 111.754591 179.338273 111.754591 185.676545 58.5929134 185.676545 58.5929134 179.338273 50 179.338273 50 173 120.356804 173"></polygon>
        </g>
  
  
  
</svg>
<button onclick="wiggleAntenna()">Wiggle</button>
<button onclick="moveUpAndDown()">Move</button>
<button onclick="blink()">Blink</button>
<button onclick="wake()">Wake</button>
<button onclick="sleep()">Sleep</button>


            
          
!
            
              body{
  display: flex;
  justify-content: center;
  margin-top: 50px;
  background: black;
}

button {
  height: 50px;
  margin: 5px;
}


            
          
!
            
              console.clear()
const moveUpAndDown = () => {
  const body = document.querySelector('#body')
  const head = document.querySelector('#head')
  const arms = document.querySelector('#arms') 
  TweenMax.to([body, head, arms], 0.3, {y: 20, yoyo: true, repeat: 1});   
}

const wiggleAntenna = () => {
  console.log(':: ==>', inProgress)
   inProgress = true;
   const wiggle = new TimelineMax()
   const wiggle2 = new TimelineMax()
 
   const antenna_one = document.querySelector('#antenna-1')
   const antenna_one_ball = document.querySelector('#antenna-1-ball')
   const antenna_two = document.querySelector('#antenna-2')
   const antenna_two_ball = document.querySelector('#antenna-2-ball')
    wiggle.to(antenna_one, 0.1, {attr: {d: "M 54 5 q 10 10 0 50"}, repeat: 1, yoyo: true}) 
    .to(antenna_one, 0.1, {attr: {d: "M 54 5 q -10 10 0 50"}, repeat: 1, yoyo: true})
    TweenMax.to(antenna_one_ball, 0.1, {repeat: 1, yoyo: true, x:1, y:0});  
    wiggle2.to(antenna_two, 0.1, {attr: {d: "M 108 5 q 10 10 0 50"}, repeat: 1, yoyo: true})
    .to(antenna_two, 0.1, {attr: {d: "M 108 5 q -10 10 0 50"}, repeat: 1, yoyo: true})
    TweenMax.to(antenna_two_ball, 0.1, {repeat: 1, yoyo: true, x:1, y:0 }); 
} 

const blink = () => {
  const eye = document.querySelector('#eye-1')
  const eye2 = document.querySelector('#eye-2')
  
  TweenMax.to([eye, eye2], 0.2, { scaleY: 0, yoyo: true, repeat: 1, transformOrigin: 'center'})
} 

const sleep = () => {
  const eye = document.querySelector('#eye-1')
  const eye2 = document.querySelector('#eye-2')
  
  TweenMax.to([eye, eye2], 0.2, { scaleY: 0.01, yoyo: false, repeat: 0, transformOrigin: 'center'})
}

const wake = () => {
  const eye = document.querySelector('#eye-1')
  const eye2 = document.querySelector('#eye-2')
  
  TweenMax.to([eye, eye2], 0.2, { scaleY: 1, yoyo: false, repeat: 0, transformOrigin: 'center'})
}

 

            
          
!
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