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.

            
              <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
	 width="407.949px" height="408.949px" viewBox="0 0 407.949 408.949" preserveAspectRatio="xMidymid meet">
<g>
	<g>
		<path class="path" fill="#ffffff" stroke="#6E6F71" stroke-width="3" d="M191.976,1c7.999,0,15.998,0,23.997,0c1.021,0.333,2.022,0.884,3.062,0.969
			c50.123,4.059,93.688,23.238,128.67,59.25c51.192,52.702,69.66,116.021,54.16,187.863
			C379.281,353.765,275.77,425.689,164.154,403.404C82.288,387.059,21.001,324.604,4.763,242.807
			C3.389,235.886,2.249,228.918,1,221.973c0-11.665,0-23.331,0-34.996c0.931-5.138,1.919-10.267,2.784-15.416
			C18.506,83.886,85.729,17.618,174.092,3.703C180.047,2.766,186.014,1.899,191.976,1z M203.735,26.143
			c-54.297-1.84-126.282,28.836-161.391,102.053c-31.987,66.707-18.706,147.16,33.979,201.166
			c53.307,54.643,126.708,62.777,177.483,46.364c-0.348-1.39-0.646-2.821-1.071-4.215c-0.469-1.538-1.053-3.043-1.666-4.789
			c-49.181,12.625-95.6,7.02-138.218-20.625c-42.538-27.593-68.204-66.972-75.519-117.148
			c-7.335-50.314,5.688-95.677,38.914-134.294c33.298-38.702,76.319-57.826,127.489-59.055
			C203.735,32.337,203.735,29.412,203.735,26.143z M146.583,67.874c87.774-34.684,174.974,15.146,198.639,92.771
			c11.814,38.751,8.929,76.687-10.366,112.301c-27.886,51.47-72.398,77.076-130.464,79.747c0,3.247,0,6.188,0,9.109
			c43.034,2.341,109.774-22.257,142.45-89.691c30.55-63.048,14.246-140.68-39.736-187.308
			c-53.471-46.186-123.23-45.288-164.096-25.364C144.156,62.145,145.308,64.863,146.583,67.874z M120.885,299.524
			c8.823,2.168,13.73-0.575,18.485-7.924c35.638-55.075,71.869-109.768,107.906-164.584c3.869-5.885,7.691-11.801,11.854-18.191
			c-45.429,0-89.996,0-134.683,0c0,3.596,0,6.845,0,10.921c38.087,0,75.886,0,114.757,0
			C199.364,180.28,160.235,239.734,120.885,299.524z M168.831,289.076c39.908-60.576,79.133-120.113,118.982-180.601
			c-4.19,0-7.213-0.386-10.073,0.132c-1.991,0.361-4.477,1.49-5.521,3.078c-40.249,61.214-80.356,122.519-120.476,183.818
			c-0.829,1.265-1.567,2.588-2.464,4.078c45.364,0,89.934,0,134.308,0c0-3.644,0-6.888,0-10.506
			C245.447,289.076,207.687,289.076,168.831,289.076z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M1,221.973c1.249,6.945,2.389,13.913,3.763,20.834
			c16.239,81.797,77.525,144.252,159.392,160.598c111.615,22.285,215.127-49.64,237.711-154.322
			c15.5-71.841-2.968-135.161-54.16-187.863c-34.981-36.013-78.547-55.192-128.67-59.25c-1.04-0.084-2.042-0.635-3.062-0.969
			c63.992,0,127.984,0,191.977,0c0,135.983,0,271.966,0,407.949c-135.649,0-271.299,0-406.949,0C1,346.624,1,284.298,1,221.973z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M191.976,1c-5.962,0.899-11.929,1.766-17.884,2.703
			C85.729,17.618,18.506,83.886,3.784,171.561C2.919,176.71,1.931,181.838,1,186.977C1,125.066,1,63.156,1,1
			C64.658,1,128.317,1,191.976,1z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M203.735,26.143c0,3.27,0,6.194,0,9.457
			c-51.17,1.229-94.191,20.353-127.489,59.055c-33.226,38.617-46.249,83.979-38.914,134.294
			c7.315,50.177,32.981,89.556,75.519,117.148c42.619,27.645,89.037,33.25,138.218,20.625c0.613,1.746,1.197,3.251,1.666,4.789
			c0.425,1.394,0.724,2.825,1.071,4.215c-50.775,16.413-124.176,8.278-177.483-46.364c-52.685-54.006-65.966-134.459-33.979-201.166
			C77.454,54.979,149.438,24.302,203.735,26.143z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M146.583,67.874c-1.275-3.011-2.427-5.729-3.573-8.436
			c40.865-19.924,110.625-20.822,164.096,25.364c53.982,46.628,70.286,124.26,39.736,187.308
			c-32.676,67.435-99.416,92.032-142.45,89.691c0-2.921,0-5.862,0-9.109c58.065-2.671,102.578-28.277,130.464-79.747
			c19.295-35.614,22.181-73.55,10.366-112.301C321.557,83.02,234.357,33.19,146.583,67.874z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M120.885,299.524c39.35-59.79,78.479-119.244,118.319-179.778
			c-38.871,0-76.67,0-114.757,0c0-4.076,0-7.325,0-10.921c44.688,0,89.254,0,134.683,0c-4.162,6.39-7.984,12.306-11.854,18.191
			c-36.037,54.816-72.268,109.509-107.906,164.584C134.615,298.949,129.708,301.692,120.885,299.524z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M168.831,289.076c38.855,0,76.616,0,114.757,0
			c0,3.618,0,6.862,0,10.506c-44.374,0-88.944,0-134.308,0c0.897-1.49,1.636-2.813,2.464-4.078
			c40.119-61.299,80.227-122.604,120.476-183.818c1.044-1.588,3.529-2.717,5.521-3.078c2.86-0.518,5.883-0.132,10.073-0.132
			C247.964,168.963,208.739,228.5,168.831,289.076z"/>
	</g>
</g>
</svg>

            
          
!
            
              svg{
  display: block;
  width: 50%;
  height:50%;
  margin: 0 auto;
}
.path {
  stroke-dasharray: 2276;
  stroke-dashoffset: 2276;
  -webkit-animation: drawfade 4s linear forwards;
  animation: drawfade 4s linear forwards;
}
@-webkit-keyframes drawfade {
  50%,53% {
    stroke-dashoffset: 1000;
    fill: #ffffff;
    stroke: rgba(0,0,0,1);
  }
  100% {
    stroke-dashoffset: 0;
    fill: #6E6F71;
    stroke: rgba(0,0,0,0);
  }
}
keyframes drawfade {
  50%,53% {
    stroke-dashoffset: 1000;
    fill: #ffffff;
    stroke: rbga(0,0,0,1);
  }
  100% {
    stroke-dashoffset: 0;
    fill: #6E6F71;
    stroke: rgba(0,0,0,0);
  }
}

/*The following media queries allow the SVG to be visible, because the dashoffset is essentially making the SVG disappear
THE ANIMATIONS WILL NOT WORK IN THIS STATE YET.
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   .path {
     stroke-dasharray: 0;
     stroke-dashoffset: 0;
     fill: #6E6F71;
     stroke:rgba(0,0,0,0)
   }
}
@-moz-document url-prefix() { 
  .path {
     stroke-dasharray: 0;
     stroke-dashoffset: 0;
     fill: #6E6F71;
     stroke:rgba(0,0,0,0)
   }
}
            
          
!
999px
Loading ..................

Console