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. 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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: -9999px;">
          <symbol id="sheep-eating" viewBox="0 0 124 77">
      <g id="body" transform="translate(35.866937, 0.000000)">
        <path d="M14.1306677,64.9860738 C14.1306677,64.9860738 13.7928243,78.0285711 17.9057006,76.3054166 C17.9057006,76.3054166 21.5632227,78.1919737 21.4897785,64.7186877 L14.1306677,64.9860738 Z" id="Legs-1" fill="#EAE8E8"></path>
        <path d="M64.6749793,65.1494764 C64.6749793,65.1494764 64.3371359,78.1919737 68.4500122,76.4688192 C68.4500122,76.4688192 72.1075343,78.3553763 72.0340901,64.8820903 L64.6749793,65.1494764 Z" id="Legs-2" fill="#EAE8E8"></path>
        <path d="M9.82683651,10.7661247 C9.82683651,10.7661247 14.2334897,2.67026924 22.0626434,7.39408946 C22.0626434,7.39408946 31.1844154,-6.80708077 44.0959091,5.90861141 C44.0959091,5.90861141 55.77354,1.0956625 62.2219424,7.27525122 C62.2219424,7.27525122 78.2327822,0.531180835 78.2327822,18.1786602 C78.2327822,18.1786602 85.2393606,19.5304452 84.3433412,28.1907823 C84.3433412,28.1907823 91.0561428,32.9146025 84.4167854,38.5891287 C84.4167854,38.5891287 88.8968828,49.6113759 76.3379213,53.4439093 C76.3379213,53.4439093 76.8960974,56.711961 74.6633931,57.3804261 C74.6633931,57.3804261 74.4430604,74.1366186 60.3123927,63.6788531 C57.1794846,65.4349835 53.2638412,64.7832024 50.8527773,62.1042463 C50.8527773,62.1042463 41.29034,72.6808501 26.7190069,61.9854081 C26.7190069,61.9854081 13.822202,77.0630104 11.0460105,57.7072313 C11.0460105,57.7072313 -5.74333793,56.3554463 2.92307992,40.2825737 C2.92307992,40.2825737 -2.18863773,27.3440598 8.79861744,19.4858809 C8.79861744,19.4858809 3.12872373,15.207704 2.0123716,12.7418105 L9.82683651,10.7661247 Z" id="Body-2" fill="#333333"></path>
      </g>
      <g id="sheep-eating-head" transform="translate(0.000000, 10.398346)">
        <path d="M24.3508836,8.83500318 L16.316086,8.58247191 C16.316086,8.58247191 15.4053777,11.7019758 21.3102929,12.9200678 C21.3102929,12.9200678 -0.928616633,25.5466313 5.43165274,41.3966822 C5.43165274,41.3966822 9.01573063,46.7444032 25.4672357,44.0705427 C25.5599668,41.3561114 26.2366733,38.6947461 27.4502296,36.2717829 C27.4502296,36.2717829 21.3396706,23.5709455 31.930327,15.0443015 L24.3508836,8.83500318 Z" id="Head-2" fill="#EAE8E8"></path>
        <g id="Mouth" transform="translate(5.020365, 39.242739)" fill="#545151">
          <path d="M0.822575254,2.55502226 L0.822575254,2.40647445 C1.59128808,2.30842859 2.32350345,2.01734058 2.95245761,1.55975196 C3.22717542,1.30745073 3.30489428,0.902374737 3.14341258,0.564481662 L3.37843408,0.564481662 C3.56063724,0.951361674 3.46439125,1.4136947 3.14341258,1.69344499 C2.45613008,2.17807058 1.65667227,2.47485772 0.822575254,2.55502226 L0.822575254,2.55502226 Z" id="Shape"></path>
        </g>
        <ellipse id="Eyes" fill="#545151" transform="translate(19.423194, 20.867575) rotate(-4.570000) translate(-19.423194, -20.867575) " cx="19.4231944" cy="20.8675749" rx="2.0123716" ry="1.30722069"></ellipse>
        <path d="M23.3373533,8.86471274 L30.9167968,15.0294467 C30.9167968,15.0294467 21.0312049,21.4170023 26.4073217,36.2717829 C24.606945,38.4423053 23.8775831,41.3216826 24.4243278,44.1002523 L35.5144049,45.5857303 C35.5144049,45.5857303 32.0625266,38.15834 37.2036219,33.419665 C37.2036219,33.419665 30.2117323,21.8032266 42.0068738,12.3555862 C42.0068738,12.3555862 38.6284398,5.70064448 35.0590507,5.78977316 C35.0590507,5.78977316 29.668245,1.60072504 23.9542848,8.4339241 L23.3373533,8.86471274 Z" id="Shape" fill="#333333"></path>
        <path d="M31.8862604,4.52711681 C31.8862604,4.52711681 42.741316,-1.9644223 54.5511465,0.976824253 C54.5511465,0.976824253 65.0683586,3.45757261 62.0130791,8.32994064 C62.0130791,8.32994064 69.0049688,15.5642188 60.5441947,23.1847212 C60.5441947,23.1847212 68.1089493,23.9571698 64.7011375,34.5931927 C64.7011375,34.5931927 69.0343465,43.3278037 61.3227034,44.8727009 L55.4471659,45.8828259 C55.4471659,45.8828259 49.5716284,52.9388467 37.8205533,46.6701293 L32.958546,44.0556879 C32.958546,44.0556879 26.8773647,39.3021582 32.0772154,35.1428196 C32.0772154,35.1428196 25.4819245,26.6161755 33.6782994,16.1287004 C33.6782994,16.1287004 27.2592746,9.69658045 28.5372041,4.80935764 C28.5372041,4.80935764 30.9608633,3.90321603 31.7687497,4.40827857 L31.8862604,4.52711681 Z" id="Shape" fill="#333333"></path>
        <path d="M5.91638458,41.5006657 C4.32208029,40.5844208 2.41059821,40.4215212 0.687156187,41.0550223 C2.37684783,40.6225161 4.16254804,40.7957539 5.74011846,41.54523 L6.18078377,41.8126161 L5.91638458,41.5006657 Z" id="Shape" fill="#35B738"></path>
        <path d="M5.93107343,41.4709561 C4.4814701,40.336914 2.61313019,39.9025586 0.819355781,40.2825737 C2.55260421,40.0942495 4.29680469,40.5194764 5.7548073,41.4858109 L6.16609493,41.8126161 L5.93107343,41.4709561 Z" id="Shape" fill="#35B738"></path>
        <path d="M5.84294037,41.277844 C4.49801963,40.0138763 2.67205118,39.411017 0.848733469,39.6289633 C2.59012847,39.600727 4.2874319,40.1833845 5.6519854,41.277844 L6.03389533,41.6343587 L5.84294037,41.277844 Z" id="Shape" fill="#35B738"></path>
        <path d="M5.84294037,41.54523 C4.14501075,40.8433452 2.22805878,40.9302295 0.599023124,41.7829065 C2.21715634,41.1332373 4.0078161,41.0702499 5.66667424,41.6046491 L6.13671724,41.8126161 L5.84294037,41.54523 Z" id="Shape" fill="#35B738"></path>
        <path d="M5.91638458,41.88689 C4.62043417,43.1853329 2.82870661,43.8471896 1.01031075,43.6991732 C2.74849579,43.6441944 4.41437598,42.9829106 5.72542961,41.8274709 L6.07796187,41.4561013 L5.91638458,41.88689 Z" id="Shape" fill="#35B738"></path>
        <path d="M5.94576227,41.9017448 C4.85726781,43.3933411 3.17677305,44.3272401 1.34815416,44.456767 C3.06116105,44.154406 4.61804507,43.2622054 5.7548073,41.9314543 L6.06327302,41.5006657 L5.94576227,41.9017448 Z" id="Shape" fill="#35B738"></path>
        <path d="M5.84294037,42.1394212 C4.88130036,43.7405456 3.26759996,44.8284989 1.43628722,45.1103774 C3.12614138,44.6407653 4.60129911,43.5901862 5.60791886,42.1394212 L5.87231805,41.6937778 L5.84294037,42.1394212 Z" id="Shape" fill="#35B738"></path>
        <path d="M5.84294037,41.8571804 C4.39811607,43.0016519 2.52931583,43.4469759 0.731222718,43.0752724 C2.46305576,43.2513574 4.20176406,42.8157065 5.6519854,41.8423256 L6.04858418,41.5155205 L5.84294037,41.8571804 Z" id="Shape" fill="#35B738"></path>
      </g>
    </symbol>
</svg>

<div class="container">
  <div class="row">
    <svg viewBox="0 0 124 77" width="200px" height="500px">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sheep-eating"></use>
    </svg>
  </div>
</div>
              
            
!

CSS

              
                html, body {
    height: 100%;
}

body {
  margin: 0;
  background: #76dd87;
}

.container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row {
    width: auto;
}

svg, use {
  display: block;
}
              
            
!

JS

              
                var sheepHead = document.getElementById('sheep-eating-head');

TweenMax.to(
  sheepHead,
  3.8,
  {
    y: '20px',
    rotation: -40,
    transformOrigin: 'center center',
    yoyo: true,
    ease: Power1.easeInOut,
    repeat: -1
  }
)
              
            
!
999px

Console