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

              
                <div class="scenery">
  <div class="trees"></div>
  <div class="sky"></div>
</div>


<div id="sovogs">
  
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="160px" height="250px" viewBox="0 0 160 250" enable-background="new 0 0 160 250" xml:space="preserve" class="sovog">
<g>
	<g>
		<path class="antenna-left" d="M76.782,25.942c-0.08-0.815-2.192-20-22.867-21.928l0.137-1.501c21.916,2.044,24.19,23.07,24.21,23.283L76.782,25.942z"/>
	</g>
	<ellipse class="antenna-ball-left" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391"/>
</g>
<g>
	<g>
		<path class="antenna-right" d="M83.217,25.942c0.08-0.815,2.192-20,22.867-21.928l-0.137-1.501c-21.916,2.044-24.188,23.07-24.209,23.283L83.217,25.942z
			"/>
	</g>
	<ellipse class="antenna-ball-right" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391"/>
</g>
<rect class="neck" x="59.722" y="72.779" fill="#787878" width="40.557" height="27.564"/>
<path class="top-of-head" fill="#787878" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z"/>
<g>
	<g>
		<g>
			<rect class="leg-left" x="48.499" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-left" fill="#595959" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z"
			/>
		<g>
			<ellipse class="kneecap-left-outside" cx="54.885" cy="200.79" rx="9.294" ry="9.423"/>
			<g>
				<path class="kneepcap-left-inside" fill="#787878" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
					c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z"/>
			</g>
		</g>
	</g>
	<g>
		<g>
			<rect class="leg-right" x="98.729" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-right" fill="#595959" d="M105.115,234.096c9.523,0,17.244,7.119,17.244,15.903H87.871
			C87.871,241.215,95.593,234.096,105.115,234.096z"/>
		<g>
			<ellipse class="kneepcap-right-outisde" cx="105.113" cy="200.79" rx="9.295" ry="9.423"/>
			<g>
				<path class="kneecap-right-inside" fill="#787878" d="M99.395,203.823c1.652,3.202,5.551,4.44,8.713,2.768c3.164-1.677,4.381-5.628,2.729-8.832
					c-1.65-3.204-5.553-4.442-8.711-2.771C98.963,196.664,97.743,200.62,99.395,203.823z"/>
			</g>
		</g>
	</g>
</g>
<g>
	<g>
		<g>
			<path class="arm-left" fill="#787878" d="M38.291,95.944c-8.259,4.479-15.268,11.387-20.423,18.846C5.22,133.088,3.41,154.261,7.262,176.253
				l10.418-1.878c-3.338-19.01-2.353-37.016,8.665-53.158c4.23-6.199,9.988-12.042,16.923-15.812L38.291,95.944z"/>
			<path class="hand-left" fill="#595959" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.523,6.51,8.172
				c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
				c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z"/>
			<g>
				<ellipse class="elbox-left-outside" cx="13.581" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-left-inside" fill="#787878" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
						c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-left" d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z"/>
	</g>
	<g>
		<g>
			<path class="arm-right" fill="#787878" d="M121.709,95.944c8.258,4.479,15.268,11.387,20.421,18.846c12.647,18.299,14.458,39.472,10.606,61.464
				l-10.418-1.878c3.339-19.01,2.353-37.017-8.666-53.158c-4.229-6.199-9.987-12.042-16.924-15.812L121.709,95.944z"/>
			<path class="hand-right" fill="#595959" d="M150.395,166.5c6.984,1.975,11.067,9.316,9.119,16.398c-1.011,3.662-3.439,6.523-6.511,8.172
				c0.168-0.363,0.313-0.742,0.424-1.141c1.237-4.484-1.702-9.234-6.562-10.609c-4.861-1.377-9.803,1.145-11.035,5.631
				c-0.109,0.396-0.18,0.798-0.223,1.197c-1.784-3.021-2.398-6.748-1.393-10.407C136.166,168.661,143.412,164.523,150.395,166.5z"/>
			<g>
				<ellipse class="elbox-right-outside" cx="146.419" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-right-inside" fill="#787878" d="M150.7,135.199c-1.235,2.396-4.154,3.322-6.519,2.07c-2.365-1.252-3.279-4.211-2.043-6.605
						c1.235-2.398,4.152-3.324,6.52-2.072C151.023,129.844,151.936,132.803,150.7,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-right" d="M117.645,94.049l8.34-1.248c5.238,10.201,7.015,20.918,4.695,32.248l-8.339,1.248L117.645,94.049z"/>
	</g>
</g>
<path class="head" fill="#595959" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
	C118.309,65.694,118.625,47.035,112.809,28.372z"/>
<g>
	<g>
		<path class="eyeball-left-outside" fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
			s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z"/>
		<path class="eyeball-left-inside" d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
			c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z"/>
	</g>
	<g>
		<path class="eyeball-right-outisde" fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
			s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z"/>
		<path class="eyeball-right-inside"  d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
			c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z"/>
	</g>
</g>
<path class="mouth" fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499H58.487c-1.033,0-1.871-1.118-1.871-2.499
	c0-1.378,0.838-2.496,1.871-2.496h43.025C102.547,67.282,103.383,68.4,103.383,69.778z"/>
<g>
	<path class="body" fill="#595959" d="M120.098,92.09H80H39.903c-7.105,26.162-6.721,52.325,0,78.488H80h40.098
		C126.82,144.416,127.203,118.252,120.098,92.09z"/>
</g>
</svg>
  
  <div class="button" id="make-sovog">Make me some friends!</div>
</div>


              
            
!

CSS

              
                @import "lesshat";

body, html {
  height: 100%;
}

svg {
  position: absolute;
  top: 20px;
  left: 16px;
  width: 120px;
}

.button {
  position: absolute;
  top: 11px;
  left: 20px;
  font-size: 18px;
  background: rgba(255,255,255,0.86);
  padding: 0.3em 0.6em;
  cursor: pointer;
  .border-radius(3px);
  &:hover {
    background: #fff;
  }
  &:after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 24%;
    border: 6px solid transparent;
    border-top-color: rgba(255,255,255,0.86);
  }
}

@c_background: #fafafa;

body {
  font-size: 1.7px;
  background: @c_background;
}

.scenery {
  position: relative;
  z-index: 0;
  .trees {
    position: absolute;
    height: 100px;
    width: 100vw;
    background-image: url(http://wattenberger.com/img/forest2.png);
    -webkit-background-size: initial;
    background-size: initial;
    background-position: 0 0;
    background-repeat: repeat-x;
    z-index: 1;
    opacity: 1;
  }
  .sky {
    position: absolute;
    top: -20px;
    left: 0;
    height: 100px;
    width: 100vw;
    background: #CAE0D6;
    z-index: 0;
  }
}

#sovogs {
  height: 400px;
  width: 80vw;
  margin-top: 2vh;
  margin-left: 240px;
}

.wrapper {
  position: relative;
  height: 131em;
  width: 73em;
  float: left;
  z-index: 100;
}

// Colors
@white: #fff;
@light_grey: #787878;
@dark_grey: #5E5E5E;
@black: #000;

// Sizes
@s_overall: 1em;

@h_antennae: 8em;
@w_antennae: 10em;
@d_antennae: 18em;
@d_antennae_ball: 3em;

@h_head: 24em;
@w_head: 28em;
@s_eye: 8.5em;
@h_eyeball: 3.4em;
@w_eyeball: 3.9em;
@h_mouth: 2.2em;
@w_mouth: 20em;

@h_body: 34em;
@w_body: 34em;

@h_arm: 31em;
@w_arm: 14em;
@t_arm: 5em;
@d_hand: 11.6em;
@d_hand_inner: 7.6em;
@t_elbow: 2em;
@h_shoulder: 14em;
@w_shoulder: 3em;

@h_leg: 30em;
@w_leg: 5em;
@t_knee: 2em;
@h_foot: 7em;
@w_foot: 15em;

//Animations

.keyframes(~'blink, 0% { height: 0; animation-timing-function:ease-in;  } 49% { height: 0; animation-timing-function:ease-out;  } 50% { height: 100%; animation-timing-function:ease-in; } 53% { height: 100%; animation-timing-function:ease-out; } 58% { height: 100%; animation-timing-function:ease-in; } 100% { height: 0; }');

.keyframes(~'blinking, 0% { height: 0; animation-timing-function:ease-in;  } 49% { height: 0; animation-timing-function:ease-out;  } 50% { height: 0; animation-timing-function:ease-in; } 53% { height: 100%; animation-timing-function:ease-out; } 58% { height: 0; animation-timing-function:ease-in; } 100% { height: 0; }');

.keyframes(~'jumping, 0% { margin-bottom: 0; animation-timing-function:ease-in;  } 49% { margin-bottom: 0; animation-timing-function:ease-out;  } 50% { margin-bottom: 4em; animation-timing-function:ease-in; } 51% { margin-bottom: 4em; animation-timing-function:ease-out; } 52% { margin-bottom: 0; animation-timing-function:ease-in; } 100% { margin-bottom: 0; }');

.keyframes(~'jumpingknees, 0% { -webkit-transform: scale(1, 0.9);-moz-transform: scale(1, 0.9);-o-transform: scale(1, 0.9);-ms-transform: scale(1, 0.9);transform: scale(1, 0.9); animation-timing-function:ease-in;  } 49% { -webkit-transform: scale(1, 0.9);-moz-transform: scale(1, 0.9);-o-transform: scale(1, 0.9);-ms-transform: scale(1, 0.9);transform: scale(1, 0.9); animation-timing-function:ease-out;  } 50% { -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1); animation-timing-function:ease-in; } 51% { -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1, 0.9);transform: scale(1); animation-timing-function:ease-out; } 52% { -webkit-transform: scale(1, 0.9);-moz-transform: scale(1, 0.9);-o-transform: scale(1, 0.9);-ms-transform: scale(1, 0.9);transform: scale(1, 0.9); animation-timing-function:ease-in; } 100% { -webkit-transform: scale(1, 0.9);-moz-transform: scale(1, 0.9);-o-transform: scale(1, 0.9);-ms-transform: scale(1, 0.9);transform: scale(1, 0.9); }');


.sovog {
  position: absolute;
  bottom: @h_leg;
  display: block;
  font-size: 1em;
  margin-top: 0;
  padding-left: 20em;
  &:hover {
    .eye .eyeball {
      margin-left: -@w_eyeball / 2 !important;
    }
  }
  .top {
    .antennae {
      position: absolute;
      top: -@h_antennae;
      left: 50%;
      margin-left: -@d_antennae;
      height: @d_antennae;
      width: @d_antennae;
      border: @d_antennae/20 solid transparent;
      border-top-color: @black;
      z-index: 0;
      .border-radius(@d_antennae);
      .rotate(45deg);
      &.right {
        margin-left: 0;
        .rotate(-45deg);
      }
      .ball {
        content: "";
        position: absolute;
        margin-top: @d_antennae_ball / 2;
        height: @d_antennae_ball;
        width: @d_antennae_ball;
        background: @light_grey;
        top: 0;
        left: 0;
        .border-radius(@d_antennae_ball);
      }
      &.right .ball {
        left: auto;
        right: 0;
      }
    }
    .base {
      position: absolute;
      background: @light_grey;
      top: -1.6em;
      left: 50%;
      height: 1.6em;
      width: 13em;
      margin-left: -13em / 2;
      z-index: 1;
      &:before {
        content: "";
        position: absolute;
        top: -70%;
        width: 100%;
        height: 3em;
        left: 0;
        background: @light_grey;
        .border-radius(100% 100% 0 0);
      }
    }
  }
  .head {
    position: relative;
    margin-top: @h_antennae + 3;
    margin-bottom: -@h_head / 26;
    margin-left: -@w_head / 2;
    height: @h_head;
    width: @w_head;
    .transition(all 0.2s ease-out);
    &:hover {
      .rotate(2deg);
    }
    .face {
      position: absolute;
      left: 0;
      top: 0;
      background: @dark_grey;
      height: @h_head;
      width: @w_head;
      z-index: 1;
      .left-side {
        position: absolute;
        top: 0;
        height: @h_head;
        width: @w_head / 5;
        right: -9%;
        background: @dark_grey;
        .border-radius(0 50% 50% 0);
      }
      .right-side {
        position: absolute;
        top: 0;
        height: @h_head;
        width: @w_head / 5;
        left: -9%;
        background: @dark_grey;
        z-index: 0;
        .border-radius(50% 0 0 50%);
      }
    }
    .eye {
      position: absolute;
      height: @s_eye;
      width: @s_eye;
      background: @white;
      top: @s_eye * .5;
      left: @s_eye * .24;
      z-index: 1;
      overflow: hidden;
      .border-radius(@s_eye);
      &:hover .eyelid {
       // .animation(blink .6s 1);
      }
      &.right {
        left: auto;
        right: @s_eye * .24;
      }
      .eyeball {
        position: absolute;
        height: @h_eyeball;
        width: @w_eyeball;
        background: @black;
        left: 50%;
        top: 50%;
        margin-left: -@w_eyeball / 2;
        margin-top: -@h_eyeball / 2;
        .border-radius(@w_eyeball);
        .transition(margin-left 0.2s ease-out);
      }
      .eyelid {
        position: absolute;
        top: 0;
        left: 0;
        width: @s_eye;
        height: 0;
        background: @light_grey;
        z-index: 2;
        -webkit-backface-visibility: hidden;
        .transition(height 0.2s ease-out);
        .animation(blinking 5.6s infinite);
      }
    }
    .mouth {
      position: absolute;
      background: @white;
      height: @h_mouth;
      width: @w_mouth;
      bottom: 5em;
      left: 50%;
      margin-left: -@w_mouth / 2;
      z-index: 2;
      .border-radius(@h_mouth / 2);
      .transition(height 0.2s ease-out);
      &:hover {
        height: @h_mouth * 1.3;
      }
    }
  }
  .neck {
    background: @light_grey;
    height: 5em;
    width: 17em;
    margin-left: -17em / 2;
  }
  .body {
    position: relative;
    height: @h_body;
    width: @w_body;
    margin-top: -2em;
    margin-left: -@w_body / 2;
    .torso {
      position: absolute;
      top: 0;
      left: 0;
      background: @dark_grey;
      height: @h_body;
      width: @w_body;
      z-index: 3;
      .left-side {
        content: "";
        position: absolute;
        top: 0;
        width: @w_body / 5;
        height: @h_body;
        right: -9%;
        background: @dark_grey;
        .border-radius(0 50% 50% 0);
      }
      .right-side {
        content: "";
        position: absolute;
        top: 0;
        width: @w_body / 5;
        height: @h_body;
        left: -9%;
        background: @dark_grey;
        .border-radius(50% 0 0 50%);
      }
    }
    .arm {
      position: absolute;
      height: @h_arm;
      width: @w_arm - @t_arm;
      top: @h_arm / 14;
      left: -@w_arm * 1.1;
      border-top-left-radius: @w_arm * 2 @w_arm * 3;
      border-bottom-left-radius: @w_arm @w_arm * 1.6;
      border: @t_arm solid transparent;
      border-left-color: @light_grey;
      &:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -@h_arm / 6;
        height: @h_arm / 5;
        width: 120%;
        background: @c_background;
        z-index: 2;
      }
      .hand {
        position: absolute;
        bottom: -@d_hand / 2.5;
        left: -@w_arm / 2;
        height: @d_hand;
        width: @d_hand;
        background: @dark_grey;
        z-index: 4;
        .border-radius(@d_hand);
        &:after {
          content: "";
          position: absolute;
          top: @d_hand / 2.15;
          left: @d_hand / 3;
          height: @d_hand_inner;
          width: @d_hand_inner;
          background: @c_background;
          .border-radius(@d_hand_inner);
        }
      }
      .elbow {
        position: absolute;
        top: @h_arm / 4.6;
        left: -@w_arm / 3;
        height: @t_arm * 0.85;
        width: @t_arm * 0.85;
        border: @t_elbow solid @black;
        .border-radius(@t_arm);
      }
      &.right {
        left: auto;
        right: -@w_arm * 1.1;
        border: @t_arm solid transparent;
        border-right-color: @light_grey;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: @w_arm * 2 @w_arm * 3;
        border-bottom-right-radius: @w_arm @w_arm * 1.6;
        .hand {
          left: auto;
          right: -@w_arm / 2;
          &:after {
            left: auto;
            right: @d_hand / 3;
          }
        }
        .elbow {
          left: auto;
          right: -@w_arm / 3;
        }
      }
    }
    .shoulder {
      position: absolute;
      background: @black;
      top: @h_shoulder / 27;
      left: -@w_shoulder * 1.4;
      height: @h_shoulder;
      width: @w_shoulder;
      z-index: 1;
      .rotate(8deg);
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        height: 100%;
        width: @w_shoulder;
        background: @black;
        .border-radius(100% 0 0 100%);
      }
      &.right {
        left: auto;
        right: -@w_shoulder * 1.4;
        .rotate(-8deg);
        &:before {
          left: auto;
          right: -50%;
          .border-radius(0 100% 100% 0);
        }
      }
    }
    .leg {
      position: absolute;
      top: @h_body;
      left: @w_leg * 0.8;
      height: @h_leg;
      width: @w_leg;
      background: @light_grey;
      &.right {
        left: auto;
        right: @w_leg * 0.8;
      }
      .knee {
        position: absolute;
        top: @h_leg / 4;
        left: -@t_knee * 0.9;
        height: @w_leg * 0.95;
        width: @w_leg * 0.95;
        border: @t_knee solid @black;
        .border-radius(@w_leg);
      }
      .foot {
        position: absolute;
        bottom: -@h_foot * 0.5;
        height: @h_foot;
        width: @w_foot;
        background: @dark_grey;
        margin-left: -(@w_foot / 2) + (@w_leg / 2);
        .border-radius(@w_foot @w_foot 0 0);
      }
    }
  }
  &.jumping {
    .animation(jumping 3.6s infinite);
    .leg {
      height: @h_leg * 1.3;
      margin-top: -@h_leg / 5;
      .animation(jumpingknees 3.6s infinite);
    }
    .knee {
      margin-top: @h_leg / 6;
    }
  }
  &.tiny {
    font-size: 0.8em;
  }
  &.little {
    font-size: 0.9em;
  }
  &.big {
    font-size: 1.1em;
  }
  &.giant {
    font-size: 1.2em;
  }
  &.meaty {
    @w_body: 38em;
    .body {
      width: @w_body;
      margin-left: -@w_body / 2;
      .torso {
        width: @w_body;
      }
    }
  }
  &.skinny {
    @w_body: 29em;
    .body {
      width: @w_body;
      margin-left: -@w_body / 2;
      .torso {
        width: @w_body;
      }
    }
  }
  &.short {
    @h_leg: 24em;
    bottom: @h_leg;
    .leg {
      height: @h_leg;
      .knee {
        top: @h_leg / 6;
      }
    }
    &.jumping {
      .leg {
        height: @h_leg * 1.3;
        margin-top: -@h_leg / 5;
      }
      .knee {
        margin-top: @h_leg / 6;
      }
    }
  }
  &.happy {
    .mouth {
      .border-radius(0 0 @h_mouth @h_mouth);
    }
  }
  &.sad {
    .mouth {
      .border-radius(@h_mouth @h_mouth 0 0);
    }
  }
  &.angry {
    .eyelid-two {
      content: "";
      position: absolute;
      top: 0;
      left: -2em;
      width: @s_eye * 1.4;
      height: 0;
      z-index: 3;
      height: 3em;
      .rotate(8deg);
    }
    .eye.right .eyelid-two {
      .rotate(-8deg);
    }
  }
  &.dopey {
    .eyelid-two {
      content: "";
      position: absolute;
      top: 0;
      left: -2em;
      width: @s_eye * 1.4;
      height: 0;
      z-index: 3;
      height: 3em;
      .rotate(-8deg);
    }
    .eye.right .eyelid-two {
      .rotate(8deg);
    }
  }
  &.closed {
    .mouth {
      height: 1em;
    }
  }
  &.wide-open-mouth {
    .mouth {
      height: 4em;
    }
  }
  &.x-slow {
    &, .leg, .knee {
      .animation-duration(9s);
    }
    .head .eye .eyelid {
      .animation-duration(14s);
    }
  }
  &.slow {
    &, .leg, .knee {
      .animation-duration(6s);
    }
    .head .eye .eyelid {
      .animation-duration(8s);
    }
  }
  &.fast {
    &, .leg, .knee {
      .animation-duration(4s);
    }
    .head .eye .eyelid {
      .animation-duration(3s);
    }
  }
  &.x-fast {
    &, .leg, .knee {
      .animation-duration(2s);
    }
    .head .eye .eyelid {
      .animation-duration(2s);
    }
  }
}

.wrapper:nth-child(odd) .sovog .head:hover {
  .rotate(-2deg);
}
              
            
!

JS

              
                var makeSovog = function() {
    var color_string = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
    var createColor = function(range) {
        var color = "#";
        for (var i = 0; i < 6; i++) {
            if (range) {
                switch (range) {
                    case "light":
                        color += color_string[(Math.floor(Math.random()*6)) + 10];
                        break;
                    case "light":
                        color += color_string[(Math.floor(Math.random()*6)) + 5];
                        break;
                    case "dark":
                        color += color_string[Math.floor(Math.random()*6)];
                        break;
                    default:
                        color += color_string[Math.floor(Math.random()*16)];
                        break;
                }
            }
            else {
                color += color_string[Math.floor(Math.random()*16)];
            }
        }
        return color;
    };
    var randomColor = function() {
        var colors = ["FFD230","FFBF52","EDCC82","DCD8B2","DCCDBC","88B2AE","5F8B9C","4C6185","404165","D1B305","A49286","E0D1B4","BDD9D6","BDA0A0","B8D0DE","9FC2D6","86B4CF","73A2BD","6792AB"];
        return "#"+ colors[Math.floor(Math.random() * colors.length)];
    }
    var attrs = ["meaty","spikes","skinny","short","tall","shifty-eyes","jumping"],
        rare_attrs = ["flex","sitting","shifty","bouncy","blink","sad","dopey","happy","angry","shifting","closed-mouth","little","big"],
        super_rare_attrs = ["giant","tiny","wide-open-mouth"],
        which_attrs = [];
    for (var i = 0, len = attrs.length; i < len; i++) {
        if (Math.floor(Math.random ()* 2)) {
            which_attrs.push(attrs[i]);
        }
    }
    for (var i = 0, len = rare_attrs.length; i < len; i++) {
        if (Math.floor(Math.random ()* 1.5)) {
            which_attrs.push(rare_attrs[i]);
        }
    }
    for (var i = 0, len = rare_attrs.length; i < len; i++) {
        if (Math.floor(Math.random ()* 1.1)) {
            which_attrs.push(super_rare_attrs[i]);
        }
    }
    var container = $("#sovogs"),
        looking_options = [(Math.random() * 1.6) + "em", (-(Math.random() * 6) + "em")],
        looking = looking_options[Math.floor(Math.random() * 2)],
        // body_color = createColor(),
        // eye_color = createColor(),
        speeds = ["x-slow","slow","normal","fast","x-fast"],
        speed = speeds[Math.floor(Math.random() * speeds.length)],
        light_color = randomColor(),
        dark_color = randomColor(),
        eye_color = randomColor(),
        border_color = "#eaeaea";

    var element = "";
    element += '<div class="wrapper"><div class="sovog';
    if (which_attrs) {
        for (var i = 0, len = which_attrs.length; i < len; i++) {
            element += (' ' + which_attrs[i]);
        }
    }
    element += " " + speed
    element += '"><div class="head"><div class="top"><div class="base" style="background: '+ light_color +';"></div><div class="antennae left"><div class="ball" style="background: '+ dark_color +';"></div></div><div class="antennae right"><div class="ball" style="background: '+ dark_color +';"></div></div></div><div class="face" style="background: '+ dark_color +';"><div class="left-side" style="background: '+ dark_color +';"></div><div class="right-side" style="background: '+ dark_color +';"></div></div><div class="eye left"><div class="eyelid" style="background: '+ light_color +';"></div><div class="eyelid-two" style="background: '+ light_color +';"></div><div class="eyeball" style="margin-left: '+ looking +'; background: '+ eye_color +';"></div></div><div class="eye right"><div class="eyelid" style="background: '+ light_color +';"></div><div class="eyelid-two" style="background: '+ light_color +';"></div><div class="eyeball" style="margin-left: '+ looking +'; background: '+ eye_color +';"></div></div><div class="mouth"></div></div><div class="neck" style="background: '+ light_color +';"></div><div class="body"><div class="torso" style="background: '+ dark_color +';"><div class="left-side" style="background: '+ dark_color +';"></div><div class="right-side" style="background: '+ dark_color +';"></div></div><div class="shoulder left"></div><div class="shoulder right"></div><div class="arm left" style="border-left-color: '+ light_color +';"><div class="elbow"></div><div class="hand" style="background: '+ dark_color +';"></div></div><div class="arm right" style="border-right-color: '+ light_color +';"><div class="elbow"></div><div class="hand" style="background: '+ dark_color +';"></div></div><div class="leg left" style="background: '+ light_color +';"><div class="knee"></div><div class="foot" style="background: '+ dark_color +';"></div></div><div class="leg right" style="background: '+ light_color +';"><div class="knee"></div><div class="foot" style="background: '+ dark_color +';"></div></div></div></div></div>';
    container.append(element);
}

$("#make-sovog").click(function(){
    makeSovog();
})

    makeSovog();
    makeSovog();
    makeSovog();

              
            
!
999px

Console