Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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