cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <svg version="1.1" x="0px" y="0px" width="448px" height="500px" viewBox="0 0 448 500">
<path class="wing right"opacity="0.4" fill="#737A58" d="M243.58,216.823c0,0,132.164-157.88,142.095-183.511
	c9.933-25.631,104.85,50.994,34.854,98.367C350.535,179.054,264.334,219.559,243.58,216.823z"/>
<path class="wing left"opacity="0.4" fill="#737A58" d="M208.092,235.668c0,0-136.666-154-147.333-179.334s-103.333,54-32,99.334
	C100.092,201,187.426,239.001,208.092,235.668z"/>
<g class="bug-body">
	<path fill="#8EAA3D" d="M204.521,193.741c0,0-101.253,180.717,9.944,212.317c111.198,31.601,114.813-106.652,76.844-160.967
		c-37.97-54.313-60.57-47.4-58.763-66.164C234.355,160.165,204.521,193.741,204.521,193.741z"/>
	<ellipse fill="#452A11" cx="215.5" cy="107.5" rx="118.5" ry="103.5"/>
	<line fill="none" stroke="#000000" stroke-width="9" stroke-miterlimit="10" x1="255" y1="94" x2="225" y2="112"/>
	
		<ellipse transform="matrix(0.8955 -0.445 0.445 0.8955 -61.8641 99.3067)" fill="#8EAA3D" cx="180.573" cy="181.413" rx="4.588" ry="2"/>
	<line fill="none" stroke="#000000" stroke-width="9" stroke-miterlimit="10" x1="89.582" y1="89.668" x2="141.122" y2="94.286"/>
	<path fill="#BCD86A" d="M196.718,44.181c46.248-5.989,99.155,13.634,111.603,52.076c12.446,38.442,9.064,88.541-48.513,97.382
		c-57.578,8.839-120.048,6.629-137.802-34.61C97.115,101.213,150.468,50.17,196.718,44.181z"/>
	<path fill="#FFFFFF" d="M175.188,146.71c0,0,60.43,2.488,67.321,1.073c6.893-1.415,0.818,38.603-30.634,39.543
		C178.039,188.335,173.125,157.995,175.188,146.71z"/>
	<path fill="#8EAA3D" d="M294.253,73.695c0,0,8.542,32.166,2.71,65.768c-8.471,48.824-42.49,52.405-98.145,58.036
		c0,0,120.962,10.139,115.77-61.761C314.588,135.738,318.598,102.976,294.253,73.695z"/>
	
		<ellipse transform="matrix(0.9999 0.0111 -0.0111 0.9999 1.4949 -2.156)" fill="#8EAA3D" cx="195.52" cy="133.968" rx="4.588" ry="1.999"/>
	
		<ellipse transform="matrix(0.9999 0.0111 -0.0111 0.9999 1.4964 -2.4217)" fill="#8EAA3D" cx="219.523" cy="133.968" rx="4.588" ry="1.999"/>
	<path fill="none" stroke="#424A31" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M174.989,366.275
		c0,0-23.083,43.311-11.989,62.725c4,7,31.869,21.337,55.945,43.869L201,491"/>
	<path fill="none" stroke="#424A31" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M271.674,224.335
		c0,0,35.326,6.665,26.326-71.335"/>
	<path fill="none" stroke="#424A31" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M189.431,225.859
		c0,0-40.373-14.544-51.253,51.196"/>
	<path fill="none" stroke="#424A31" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M299.848,346.303
		c0,0,46.885-21.562,60.223-14.999c18.41,9.06,31.016,75.915,31.016,75.915l21.712,3.262"/>
	<path fill="#BCD86A" d="M220.795,232.254c0,0,4.52-5.925,19.889-4.938c15.369,0.988,60.57,38.514,47.914,104.678
		s-89.5,79.989-102.157,28.639C173.784,309.281,185.537,252.992,220.795,232.254z"/>
	<g>
		<path fill="#452A11" d="M139.018,32.746c19.111,0,40.402,8.432,61.066,22.107c2.626,1.17,6.031,2.25,9.643,2.25
			c1.828,0,3.709-0.277,5.567-0.959c1.963-1.332,3.933-2.617,5.906-3.854c0.1-0.1,0.201-0.188,0.3-0.291
			c0.765-0.799,1.32-1.164,1.707-1.164c0.093,0,0.177,0.021,0.251,0.062c18.679-11.328,37.635-18.152,54.829-18.152
			c19.663,0,37.021,8.927,49.018,30.254c26.847,47.728-9.579,91.004-57.181,91.004c-0.271,0-0.547-0.001-0.819-0.004
			c-42.51-0.443-56-38-56-38c-0.766-0.275-1.519-0.564-2.258-0.866c-0.028,0.118-0.047,0.2-0.047,0.2h-4.333l-0.063-0.344
			c-0.851,0.353-1.718,0.691-2.604,1.01c0,0-13.49,37.557-56,38c-0.275,0.003-0.545,0.004-0.819,0.004
			C99.583,154.004,63.155,110.725,90,63C101.996,41.672,119.354,32.745,139.018,32.746 M139.018,24.746L139.018,24.746
			c-23.995-0.001-43.356,11.871-55.99,34.332c-6.646,11.814-10.059,23.876-10.145,35.85c-0.08,11.147,2.852,22.126,8.479,31.747
			c12.745,21.792,37.966,35.329,65.819,35.329c0.303,0,0.6-0.001,0.903-0.004c24.819-0.26,40.751-11.971,49.745-21.751
			c5.145-5.593,8.647-11.206,10.823-15.303c2.176,4.097,5.679,9.71,10.823,15.303c8.994,9.78,24.926,21.491,49.746,21.751
			c0.3,0.003,0.603,0.004,0.902,0.004c27.855,0,53.077-13.536,65.821-35.327c5.627-9.621,8.559-20.6,8.479-31.748
			c-0.087-11.974-3.5-24.035-10.146-35.851c-12.634-22.46-31.995-34.332-55.99-34.332c-17.338,0-37.196,6.37-57.523,18.439
			c-2.161,0.629-3.72,1.964-4.58,2.811c-1.468,0.929-2.943,1.891-4.406,2.871c-0.64,0.158-1.317,0.236-2.051,0.236
			c-1.737,0-3.741-0.454-5.829-1.318C180.939,32.711,158.519,24.746,139.018,24.746L139.018,24.746z"/>
	</g>
	<path fill="#452A11" d="M120.318,90.854C120.318,90.854,137,41,312,81c0,0,26-6-19-32s-58-29-81-29s-76,20-94,44
		S89.637,135.709,120.318,90.854z"/>
	<g>
		<path fill="#F15A29" d="M90,63c25.056-44.544,73.5-35,117.5-3c33.169,24.123,21.5,47-3.5,56c0,0-13.49,37.557-56,38
			C100,154.5,63,111,90,63z"/>
	</g>
	<g>
		<path fill="#F15A29" d="M327.305,63c-25.056-44.544-73.5-35-117.5-3c-33.169,24.123-21.5,47,3.5,56c0,0,13.49,37.557,56,38
			C317.305,154.5,354.305,111,327.305,63z"/>
	</g>
	<circle fill="#E4D41D" cx="147.851" cy="95.803" r="53"/>
	<circle fill="#E4D41D" cx="271.13" cy="97.068" r="53"/>
	<circle fill="#BCD86A" cx="153.018" cy="98.113" r="42.333"/>
	<g>
		<g>
			<circle fill="#FFFFFF" cx="153.018" cy="98.114" r="37.121"/>
			<circle fill="#1BA2C1" stroke="#156488" stroke-width="5" stroke-miterlimit="10" cx="153.017" cy="98.113" r="23.814"/>
			<circle stroke="#156488" stroke-width="5" stroke-miterlimit="10" cx="153.017" cy="98.113" r="11.047"/>
		</g>
		<circle fill="#FFFFFF" cx="164.03" cy="84.496" r="8.71"/>
		<circle fill="#FFFFFF" cx="157.736" cy="91.454" r="3.833"/>
	</g>
	<circle fill="#BCD86A" cx="270.931" cy="98.833" r="42.333"/>
	<g>
		<g>
			<circle fill="#FFFFFF" cx="270.93" cy="98.833" r="37.121"/>
			<circle fill="#1BA2C1" stroke="#156488" stroke-width="5" stroke-miterlimit="10" cx="270.93" cy="98.834" r="23.814"/>
			<circle stroke="#156488" stroke-width="5" stroke-miterlimit="10" cx="270.93" cy="98.834" r="11.047"/>
		</g>
		<circle fill="#FFFFFF" cx="281.943" cy="85.216" r="8.71"/>
		<circle fill="#FFFFFF" cx="275.649" cy="92.174" r="3.833"/>
	</g>
	<path opacity="0.4" fill="#FFFFFF" d="M188.605,61.311l-89.967,57.573c0,0-10.069-37.012,8.88-58.298
		C126.47,39.305,162.198,32.609,188.605,61.311z"/>
	<path opacity="0.4" fill="#FFFFFF" d="M311.912,61.863l-89.968,57.569c0,0-10.069-37.011,8.88-58.297
		C249.775,39.854,285.504,33.159,311.912,61.863z"/>
	<path fill="#F15A29" d="M195,52c0,0,15.5,11.5,26.5,0c4.249-4.443,2.089,4.448-0.07,15.574c-3.688,18.994-10.43,47.759-10.43,47.76
		h-4.333L195,52z"/>
</g>
</svg>

            
          
!
            
              @import "compass/css3";

// MIXINS
@mixin keyframes($name) {
	@-o-keyframes #{$name} { @content };
	@-moz-keyframes #{$name} { @content };
	@-webkit-keyframes #{$name} { @content }; 
	@keyframes #{$name} { @content };
}

@mixin animation($animation) {
	-o-animation: $animation;
	-moz-animation: $animation;
	-webkit-animation: $animation;
	animation: $animation;
}

//CSS
body {
  background: lightblue;
}

svg {
  height: 50%;
  max-width: 350px;
  padding: 3% 10% 0;
  width: 50%;
  margin: 0 auto;
  display: block;
}

.wing.right {
  @include animation(wing-right 0.2s infinite);
  @include transform-origin(0%, 100%);
}

.wing.left {
  @include animation(wing-left 0.2s infinite);
  @include transform-origin(100%, 100%);
}

.bug-body {
  @include animation(bug-body 1s infinite);
}

//ANIMATIONS
@include keyframes(wing-right) {
  0% {
    @include transform(translateX(0));
  }
  50% {
    @include transform(translateX(10px) rotate(15deg));
  }
  100% {
    @include transform(translateX(0px));
  }
}

@include keyframes(wing-left) {
  0% {
    @include transform(translateX(0));
  }
  50% {
    @include transform(translateX(10px) rotate(-15deg));
  }
  100% {
    @include transform(translateX(0px));
  }
}

@include keyframes(bug-body) {
  0% {
    @include transform(translateY(0));
  }
  50% {
    @include transform(translateY(-10px));
  }
  100% {
    @include transform(translateY(0px));
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console