cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <section class="sky"></section>
<div class="giraffe">
<svg width="305px" height="221px" viewBox="0 0 305 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
    <title>Desktop</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <ellipse id="path-1" cx="106.118243" cy="106" rx="106.118243" ry="106"></ellipse>
        <path id="path-3" d="M9.27511638,0 L46.3755819,0 L46.3755819,115.537275 L0,115.537275 L9.27511638,0 Z"></path>
        <path id="path-5" d="M7.20085179,3.85553068 C25.921723,-6.23481794 158.768169,0 158.768169,0 L158.768169,67.5784062 L0,67.5784062 C0,67.5784062 -11.5200194,13.9458793 7.20085179,3.85553068 Z"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Desktop" sketch:type="MSArtboardGroup">
            <g id="Group-Copy" sketch:type="MSLayerGroup">
                <mask id="mask-2" sketch:name="Mask" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <use id="Mask" fill="#66CB6C" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
                <path d="M-9.2548803,34.5975488 C-9.2548803,34.5975488 -19.0093963,25.8964795 22.8908665,25.8964796 C64.7911293,25.8964796 71.9286067,60.8851443 100.399121,43.9054528 C128.869634,26.9257613 214.548711,4.2515066 253.07979,77.0452124 C291.610869,149.838918 110.246585,176.603078 110.246585,176.603078 L-23.0896755,132.860019 L-9.2548803,34.5975488 Z" id="Path-29" fill="#51B575" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                <path d="M-9.2548803,83.2448918 C-9.2548803,83.2448918 21.8807833,113.966412 63.7810461,113.966412 C105.681309,113.966412 137.805939,97.9679671 166.276453,80.9882756 C194.746967,64.0085842 214.548711,52.8988496 253.07979,125.692555 C291.610869,198.486261 110.246585,225.250421 110.246585,225.250421 L-23.0896755,181.507362 L-9.2548803,83.2448918 Z" id="Path-29-Copy" fill="#37A55A" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                <path d="M-20.1743056,131.196219 C-20.1743056,131.196219 26.4561694,111.025131 93.4900617,173.189555 C160.523954,235.35398 258.452083,131.489091 258.452083,131.489091 L231.072308,222.60607 L-29.302149,217.597208 L-20.1743056,131.196219 Z" id="Path-28" fill="#2A8B65" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                <path d="M88.3864032,20.7095116 C90.4323847,17.3033419 94.5243478,17.3033419 96.5703294,20.7095116 C98.6163109,24.1156812 96.5703294,34.3341902 96.5703294,34.3341902 L88.3864032,34.3341902 C88.3864032,34.3341902 86.3404216,24.1156812 88.3864032,20.7095116 Z" id="Rectangle-4" fill="#7B421D" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                <path d="M154.403408,21.7994859 C156.44939,18.3933162 160.541353,18.3933162 162.587334,21.7994859 C164.633316,25.2056555 162.587334,35.4241645 162.587334,35.4241645 L154.403408,35.4241645 C154.403408,35.4241645 152.357426,25.2056555 154.403408,21.7994859 Z" id="Rectangle-4-Copy" fill="#7B421D" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                
                <g id="Group" mask="url(#mask-2)" fill="#7B421D" sketch:type="MSShapeGroup">
                    <g transform="translate(166.406500, 105.727506)">
                        <path d="M12.5486869,6.81233933 C12.5486869,9.94601542 0,13.0796915 0,13.0796915 L0,0.544987147 C0,0.544987147 12.5486869,3.67866324 12.5486869,6.81233933 L12.5486869,6.81233933 Z" id="Triangle-1"></path>
                        <path d="M12.5486869,17.7120823 C12.5486869,20.8457584 0,23.9794344 0,23.9794344 L0,11.4447301 C0,11.4447301 12.5486869,14.5784062 12.5486869,17.7120823 L12.5486869,17.7120823 Z" id="Triangle-1-Copy"></path>
                        <path d="M12.5486869,28.6118252 C12.5486869,31.7455013 0,34.8791774 0,34.8791774 L0,22.344473 C0,22.344473 12.5486869,25.4781491 12.5486869,28.6118252 L12.5486869,28.6118252 Z" id="Triangle-1-Copy-3"></path>
                        <path d="M12.5486869,39.5115681 C12.5486869,42.6452442 0,45.7789203 0,45.7789203 L0,33.2442159 C0,33.2442159 12.5486869,36.377892 12.5486869,39.5115681 L12.5486869,39.5115681 Z" id="Triangle-1-Copy-2"></path>
                        <path d="M12.5486869,50.4113111 C12.5486869,53.5449871 0,56.6786632 0,56.6786632 L0,44.1439589 C0,44.1439589 12.5486869,47.277635 12.5486869,50.4113111 L12.5486869,50.4113111 Z" id="Triangle-1-Copy-5"></path>
                        <path d="M12.5486869,61.311054 C12.5486869,64.4447301 0,67.5784062 0,67.5784062 L0,55.0437018 C0,55.0437018 12.5486869,58.1773779 12.5486869,61.311054 L12.5486869,61.311054 Z" id="Triangle-1-Copy-4"></path>
                        <path d="M12.5486869,72.2107969 C12.5486869,75.344473 0,78.4781491 0,78.4781491 L0,65.9434447 C0,65.9434447 12.5486869,69.0771208 12.5486869,72.2107969 L12.5486869,72.2107969 Z" id="Triangle-1-Copy-7"></path>
                        <path d="M12.5486869,83.1105398 C12.5486869,86.2442159 0,89.377892 0,89.377892 L0,76.8431877 C0,76.8431877 12.5486869,79.9768638 12.5486869,83.1105398 L12.5486869,83.1105398 Z" id="Triangle-1-Copy-6"></path>
                        <path d="M12.5486869,94.0102828 C12.5486869,97.1439589 0,100.277635 0,100.277635 L0,87.7429306 C0,87.7429306 12.5486869,90.8766067 12.5486869,94.0102828 L12.5486869,94.0102828 Z" id="Triangle-1-Copy-8"></path>
                    </g>
                </g>
                <g id="Oval-1-+-Oval-2-+-Oval-3-Mask" mask="url(#mask-2)">
                    <g transform="translate(124.941274, 103.002571)">
                        <mask id="mask-4" sketch:name="Mask" fill="white">
                            <use xlink:href="#path-3"></use>
                        </mask>
                        <use id="Mask" stroke="none" fill="#FFE58A" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-3"></use>
                        <ellipse id="Oval-1" stroke="none" fill="#C9884C" fill-rule="evenodd" sketch:type="MSShapeGroup" mask="url(#mask-4)" cx="37.9188581" cy="23.0797731" rx="13.9126746" ry="13.5295222"></ellipse>
                        <ellipse id="Oval-2" stroke="none" fill="#C9884C" fill-rule="evenodd" sketch:type="MSShapeGroup" mask="url(#mask-4)" cx="7.09273606" cy="63.1377702" rx="18.0046377" ry="17.5087934"></ellipse>
                        <ellipse id="Oval-3" stroke="none" fill="#C9884C" fill-rule="evenodd" sketch:type="MSShapeGroup" mask="url(#mask-4)" cx="30.8261221" cy="87.2786823" rx="6.81993852" ry="6.63211871"></ellipse>
                    </g>
                </g>
                <g id="Rectangle-8" transform="translate(12.548687, 35.969152)">
                    <mask id="mask-6" sketch:name="Mask" fill="white">
                        <use xlink:href="#path-5"></use>
                    </mask>
                    <use id="Mask" fill="#FFE68A" sketch:type="MSShapeGroup" xlink:href="#path-5"></use>
                    <path d="M-27.8253491,-2.72493573 L34.9180852,-2.72493573 L51.0779179,73.0282776 L-27.8253491,73.0282776 L-27.8253491,-2.72493573 Z" fill="#C9884C" sketch:type="MSShapeGroup" mask="url(#mask-6)"></path>
                </g>
                <rect id="Rectangle-9" fill="#7B421D" sketch:type="MSShapeGroup" x="27.2797541" y="73.5732648" width="7.63833114" height="3.26992288"></rect>
                <rect id="Rectangle-9-Copy" fill="#7B421D" sketch:type="MSShapeGroup" x="27.2797541" y="80.1131105" width="7.63833114" height="3.26992288"></rect>
                
                <ellipse id="Oval-13" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="269.251173" cy="53.1362468" rx="30.8261221" ry="30.7917738"></ellipse>
                <path d="M243.288771,51.002545 L232.734948,59.6236942 L244.070436,61.7553415 L243.288771,51.002545 Z" id="Path-1" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
                <path d="M88.20945,55.8143752 C88.20945,55.8143752 95.53509,66.5999983 100.233503,55.3347471" id="Path-25" stroke="#2A2A2A" stroke-width="6" sketch:type="MSShapeGroup"></path>
                <path d="M141.199687,56.6160523 C141.199687,56.6160523 133.469317,66.0848199 129.175634,55.3347471" id="Path-25-Copy" stroke="#2A2A2A" stroke-width="6" sketch:type="MSShapeGroup"></path>
                <path d="M87.5842707,32.9242628 C87.5842707,32.9242628 93.5007285,26.1584132 99.270738,31.2059518" id="Path-26" stroke="#000000" stroke-width="7" sketch:type="MSShapeGroup"></path>
                <path d="M128.550454,32.9242628 C128.550454,32.9242628 134.466912,26.1584132 140.236922,31.2059518" id="Path-26-Copy" stroke="#000000" stroke-width="7" sketch:type="MSShapeGroup" transform="translate(134.393688, 31.129772) scale(-1, 1) translate(-134.393688, -31.129772) "></path>
                <g id="Group" transform="translate(267.900914, 53.156998) rotate(11.000000) translate(-267.900914, -53.156998) translate(250.400914, 38.156998)" sketch:type="MSShapeGroup" fill="#2A2A2A">
                    <ellipse id="Oval-27" cx="7.12204061" cy="23.5790881" rx="6.65700483" ry="5.63285024"></ellipse>
                    <rect id="Rectangle-21" x="10.2415459" y="0.512077295" width="3.58454106" height="23.5555556"></rect>
                    <ellipse id="Oval-27-Copy" cx="27.6051324" cy="23.5790881" rx="6.65700483" ry="5.63285024"></ellipse>
                    <rect id="Rectangle-21-Copy" x="30.7246377" y="0.512077295" width="3.58454106" height="23.5555556"></rect>
                    <path d="M20.4830918,13.826087 L20.4830918,-9.7294686 L24.0676329,-9.7294686 L24.0676329,13.826087 L20.4830918,13.826087 L20.4830918,13.826087 Z" id="Rectangle-21-Copy-2" transform="translate(22.275362, 2.048309) rotate(-90.000000) translate(-22.275362, -2.048309) "></path>
                    <path d="M21.5072464,18.9468599 L21.5072464,-4.60869565 L23.5555556,-4.60869565 L23.5555556,18.9468599 L21.5072464,18.9468599 L21.5072464,18.9468599 Z" id="Rectangle-21-Copy-3" transform="translate(22.531401, 7.169082) rotate(-90.000000) translate(-22.531401, -7.169082) "></path>
                </g>
            </g>
        </g>
    </g>
</svg>
  
<svg width="305px" height="221px" viewBox="0 0 305 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> 
  <path d="M84.252776,13.3462166 C81.6611993,6.94352089 78.6997628,10.5596508 78.6997628,10.5596508 L82.2766625,38.1491003 L89.0660694,36.1704335 C89.0660694,36.1704335 86.8443526,19.7489122 84.252776,13.3462166 L84.252776,13.3462166 Z" id="ear-r" fill="#FFE58A" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
  <path d="M168.447949,13.25925 C171.039526,6.9153922 173.877242,10.6142627 173.877242,10.6142627 L170.088128,38.1491003 L163.510935,35.9896938 C163.510935,35.9896938 165.856372,19.6031078 168.447949,13.25925 L168.447949,13.25925 Z" id="ear-l" fill="#FFE58A" sketch:type="MSShapeGroup"></path>
  </svg>
            
          
!
            
              html{
  height:100%;
}

body {
  background:#5DC1FF;
  overflow:hidden;
}

.cloud {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,1);
  border-radius: 50%;
	position: absolute;
	-webkit-animation: float 20s linear infinite;
}

.cloud:after {
  content: '';
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,1);
  border-radius: 50%;
	position: absolute;
  left: 20px;
  top: 10px;
}

.cloud:before {
  content: '';
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,1);
  border-radius: 50%;
	position: absolute;
  left: -10px;
  top: 10px;
}

@-webkit-keyframes float {
  10%,30%,50%,70% {
    transform: translateY(20px);
  }
  20%,40%,60%,80% {
    transform: translateY(0);
  }
  100% {
    margin-left:200%;
  }
}

svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#ear-l {
	-webkit-animation: shake 4s linear infinite;
}

#ear-r {
	-webkit-animation: shake 4s linear infinite;
}

@-webkit-keyframes shake {
  90%,100% {
    transform: skewY(0)
  }
  95% {
    transform: skewY(4deg)
  }
}
            
          
!
            
              function randRange(minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

var $sky = $('.sky');

function createCloud() {
  var $cloud = $('<div class="cloud" />')
    .css('left', -100)
    .css('top', randRange(0, 200))
    .appendTo($sky);
  setTimeout(function() {
    $cloud.remove();
  }, 20000);
}

setInterval(createCloud, 800);
            
          
!
999px
Loading ..................

Console