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 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.

            
              <body>
  <div class="wrapper">
    <div class="box">
      <h1>~ Hex You ~</h1>
      <h2>with some witches brew, dood</h2>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   class=""
   version="1.1"
   width="350"
   height="350"
   onload="init(evt)">

  <script type="text/ecmascript"><![CDATA[
  	var svgNS = "http://www.w3.org/2000/svg";

	function init(evt)
	{
		if ( window.svgDocument == null )
		{
			svgDocument = evt.target.ownerDocument;
		}
		addRotateTransform('pie', 16, 1);
		addRotateTransform('blue', 16, -1);
		addRotateTransform('moons', 16, 1);
		addRotateTransform('gear-4', 4, 1);
	}

	function addRotateTransform(target_id, speed, direction)
	{
		var element_to_rotate = svgDocument.getElementById(target_id);
		var my_transform = svgDocument.createElementNS(svgNS, "animateTransform");

		var bb = element_to_rotate.getBBox();
		var cx = bb.x + bb.width/2;
		var cy = bb.y + bb.height/2;

		my_transform.setAttributeNS(null, "attributeName", "transform");
		my_transform.setAttributeNS(null, "attributeType", "XML");
		my_transform.setAttributeNS(null, "type", "rotate");
		my_transform.setAttributeNS(null, "dur", speed + "s");
		my_transform.setAttributeNS(null, "repeatCount", "indefinite");
		my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
		my_transform.setAttributeNS(null, "to", 360*direction+" "+cx+" "+cy);

		element_to_rotate.appendChild(my_transform);
		my_transform.beginElement();
	}
  ]]></script>
  <g transform="translate(-275, -70)">  
    <path id="blue" class="st1" d="M451.1,246.4c-18.6-9.1-41.7-8.8-60,0.9c-2.3,1.2-4.7,3.5-3.6,5.8c0.5,1.1,1.8,1.7,3,2.2
	c17.1,6.6,37,5.5,53.3-2.8c-14.3,11.8-22.5,30.5-21.8,49c0.1,1.9,0.9,4.3,2.7,4.3c0.7,0,1.4-0.5,1.9-0.9
	c12.3-9.3,21.1-23.2,24.2-38.3c1.1-5.3,1.5-11.1-0.8-16c-1.4,1.3-3.1,2.2-4.9,2.5c0.9-1.3,1.8-2.6,3.2-3.1s3.4,0.1,3.6,1.6
	c3,21.5,17.4,41.1,36.9,50.4c-22.9,15.5-55.6,14.6-77.5-2.2c-21.9-16.8-31.4-48.2-22.3-74.3s36-44.8,63.7-44.2
	c27.6,0.6,53.7,20.6,61.5,47.1c7.7,26.2-2.9,56.5-24.4,73.4c-0.3-22.8-16.7-42.8-36.1-54.7c18.4-13,29-36.2,26.9-58.6
	c-5.9,2.5-10.8,7.2-14.8,12.2c-8.2,10.6-13.1,23.5-14.6,36.8c-4.1-17.5-15.4-33.2-30.7-42.7c-1.8-1.2-4.7-2.1-5.9-0.3
	c-0.8,1.1-0.5,2.5-0.1,3.8c2.6,9.8,5.7,19.6,11.3,28c5.6,8.4,14,15.4,23.9,17.4c-0.1-1.8-0.2-3.5-0.3-5.3
	C450.9,240.8,451.5,243.7,451.1,246.4 M460.5,243.7c-1.8,0.4-3.4,1.7-4.3,3.3c4.1,4.6,10.4,6.6,16.5,7.4c12.9,1.8,26.3-0.5,37.8-6.5
	c1.4-0.8,2.9-1.6,3.9-2.9c1-1.3,1.4-3.2,0.5-4.6c-11.5-5.2-24.5-7.1-36.9-5.2c-6.5,0.9-13.1,3.1-17.6,7.8c1.3,0.3,1.9,1.9,1.3,3
	C461,245.6,460.5,244.7,460.5,243.7 M450,293.6c-2.6,2.9-5.5,5.5-8.8,7.7c-1.6,1.1-1.4,3.9,0.2,5c1.6,1.1,3.9,0.8,5.5-0.4
	c1.6-1.2,2.5-3,3.2-4.9c0.7-1.8,1.1-3.7,1.4-5.6c0-0.5,0.1-1.1-0.2-1.6C451.1,293.4,450.4,293.2,450,293.6 M393.9,235.5
	c1.5,1.1,3.6,0.1,5.2-0.7c3.4-1.6,7.1-2.4,10.8-2.4c-0.3-1.5-1.9-2.3-3.3-2.8c-3.8-1.4-8.3-2.1-11.6,0.2
	C393.1,231,392,234.1,393.9,235.5 M462.8,302.2c1,1.2,2.3,2.3,3.7,2.7c1.5,0.4,3.3,0,4.2-1.2c0.9-1.2,0.7-3.3-0.7-4.1
	c-4-2.1-7.6-5.1-10.4-8.7C459.1,294.9,460.3,299.1,462.8,302.2 M411.1,218.3c-0.6-1.7-0.6-3.5-0.9-5.2c-0.3-1.8-0.9-3.6-2.4-4.5
	c-1.5-1-3.9-0.6-4.5,1.1c-0.9,2.7,0.2,5.9,2,8.1s4.4,3.7,6.9,5.2C412.7,221.4,411.7,219.9,411.1,218.3 M493.1,203.6
	c-1.3-0.3-2.5,0.5-3.2,1.6c-0.7,1.1-0.9,2.3-1.2,3.6c-0.6,3.4-1.3,6.8-1.8,10.2c4.4-2.5,8.7-6.4,8.6-11.4
	C495.5,205.8,494.7,203.9,493.1,203.6 M458.6,188.2c-3.6,1.5-4.8,6-5.3,9.9c-0.1,1.2-0.2,2.6,0.4,3.6c2.5-2.4,5-4.9,7.5-7.3
	c1.3-1.3,2.7-2.9,2.2-4.6C462.8,188.1,460.4,187.6,458.6,188.2 M497.3,286.6c1.2-0.3,2.1-1.4,2.4-2.7c0.8-2.9-1-5.9-3.1-8.1
	c-1.8-1.8-3.8-3.3-6-4.6c-0.9,1.2,0.6,2.7,1.4,3.9c1.3,2,0.9,4.5,1.1,6.9S495,287.1,497.3,286.6 M395.6,271c1.7,1.4,4,1.8,6.2,1.6
	c2.2-0.3,4.2-1.1,6.2-2c0.7-0.3,1.5-0.8,1.4-1.5c-2.5-0.9-5-1.8-7.6-2.7c-1.4-0.5-3-1.1-4.5-0.9c-1.5,0.2-3.1,1.3-3.1,2.8
	C394.1,269.3,394.7,270.3,395.6,271 M432.9,192.4c0.6,3.2,4.7,4,6.9,6.3c1.6,1.6,2.5,4.1,4.7,4.5c-0.1-3-0.9-6-2.2-8.7
	c-0.9-2-2.3-3.9-4.4-4.6S433.1,190.2,432.9,192.4 M495.7,226.8c1.7,0,3.2,0.9,4.7,1.6c1.5,0.7,3.1,1.5,4.8,1.3
	c1.7-0.1,3.3-1.5,3.2-3.2c-0.1-0.9-0.6-1.7-1.3-2.3c-1.9-1.7-4.7-2-7.2-1.5c-2.5,0.5-4.8,1.6-7.2,2.5c-0.1,0.6,0.5,1.3,1.1,1.4
	C494.3,226.9,495,226.8,495.7,226.8 M413.6,289.4c0.7-0.8,0.9-1.8,1-2.9c0.5-3.1,0.9-6.1,1.4-9.1c0-0.2,0-0.5,0-0.7
	c-0.3-0.6-1.1-0.3-1.7,0c-1.8,1.2-3.3,2.7-4.5,4.5c-1.3,1.8-2.3,4.2-1.6,6.3C409,289.8,412.1,291,413.6,289.4 M505.9,258.9
	c-3.2,1.3-6.4,2.5-9.6,3.7c-0.4,0.1-0.7,0.3-1,0.5c-0.2,0.2-0.4,0.4-0.6,0.7c2.9,1.2,6,1.8,9.1,1.7c2.1,0,4.4-0.5,5.6-2.2
	c1.2-1.7,0.4-4.7-1.7-4.8C507.1,258.5,506.5,258.7,505.9,258.9"/>
  </g>

  <g transform="translate(-275, -70)">  
    <path
       id="moons"
       class="st2" d="M535.1,331.7c0.5,1.5,0.8,3,1.1,4.5C534.9,335.1,534.5,333.2,535.1,331.7L535.1,331.7z
	 M318.9,303.1c1.4-0.2,2.8,0.4,3.8,1.4C321.3,304.9,319.7,304.3,318.9,303.1L318.9,303.1z M322.2,197.9c-1,0.1-2,0.2-3.1,0.4
	c1.4-1.6,3.6-2.2,5.6-1.6C324.3,197.5,323.3,198,322.2,197.9L322.2,197.9z M542,344.9c2.3,1.5,4.6,3.1,7,4.6
	C546,349.6,543.2,347.6,542,344.9z M332.6,251.2c-7.4-0.1-14.9-0.2-22.3-0.3c-0.3,0-0.5,0-0.8-0.1c-0.3-0.1-0.5-0.4-0.5-0.7
	c8.6,0.1,17.1,0.1,25.7,0.2C334.4,251,333.4,251.2,332.6,251.2z M536.7,337.1c2.2,2.4,4,5.1,5.5,8
	C539.5,343.2,537.5,340.3,536.7,337.1z M590.2,242.9c1-0.1,2.4,0,2.7,1c-8.3,0.5-16.6,1-24.8,1.5c0.1-0.6,0.9-0.9,1.5-0.9
	C576.5,244,583.3,243.5,590.2,242.9z M325.5,196.5c5.3-2.4,11.6,0.3,16.3,3.7c0.6,0.4,1.2,0.9,1.4,1.6c-0.8,0.5-1.8-0.1-2.6-0.8
	C336.5,197.6,330.9,195.9,325.5,196.5z M583.8,298.4c-7.4,2.7-15.7,0-22.9-3.4c-0.8-0.4-1.6-1.3-1-1.8
	C567.1,297.3,575.6,299.2,583.8,298.4z M495.7,373.6c-1.8-2.8-3.1-5.9-4-9.2c-0.2-0.9,0-2.3,0.9-2.1c0.4,6.4,4.3,12.5,9.9,15.5
	C499.9,378.5,497.3,376,495.7,373.6z M344,295.1c-3.5,5-9,8.6-15.1,9.9c-1.8,0.4-4,0.4-5.2-1c6.8,0.6,13.8-2.5,18-7.9
	C342.3,295.3,343.4,294.4,344,295.1z M403,380.5c3-1.8,5.8-4.1,7.8-6.9c2-2.9,3.1-6.5,2.4-9.9c-0.1-0.7,0-1.7,0.7-1.5
	c1.3,6.4-1.5,13.5-6.9,17.4C405.9,380.3,404.4,381,403,380.5z M405.7,139.4c2.6-3.7,3.6-8.5,2.7-12.9c-0.9-4.3-4.3-8.6-8.7-8.3
	c3.1-1.6,6.8,0.9,8.4,4c2.3,4.4,2.3,9.8,0.5,14.4C408.1,137.8,407.1,139.3,405.7,139.4z M574.7,191.8c2.3-0.5,5.1-0.5,6.4,1.4
	c-4-0.9-8.2,0-11.8,1.9c-3.6,1.9-6.5,4.9-8.8,8.2c-0.5-0.2-0.3-1.1,0-1.6C563.7,196.9,568.9,193.3,574.7,191.8z M501.1,116.4
	c-7,2.3-11.5,10.4-9.8,17.5c0.2,1,0.6,2.1,1.2,2.9c0.4,0.6,0.8,1.7,0.1,1.9c-2.3-2.8-3.2-6.7-2.7-10.3c0.5-3.6,2.4-6.9,4.9-9.5
	C496.5,117.2,498.9,115.7,501.1,116.4z M533.3,162.3c-0.5,0.5-1.1-0.5-1-1.2c0.9-8.5,7.7-16,16-17.6c0.4,0.6-0.5,1.2-1.2,1.4
	C539.4,147,533.5,154.4,533.3,162.3z M369.2,164.6c-0.6-0.6-0.5-1.6-0.5-2.5c0.1-4.2-2.6-8.3-6.3-10.4c-3.7-2.1-8.2-2.4-12.4-1.6
	c-0.3-0.5,0.5-1.1,1.1-1.2c3.9-0.9,8.1-0.3,11.6,1.6C367.6,153.2,370.9,159.3,369.2,164.6z M357.7,350.4c-2,0.4-4.1,0.6-6.1,0
	c-0.6-0.2-1.4-0.7-1-1.3c4.6,1.2,9.7,0.4,13.6-2.3s6.5-7.1,7-11.8c1,3.7-0.5,7.8-3.2,10.5C365.1,348.2,361.4,349.7,357.7,350.4z"/>
       
  </g>
  
  <g transform="translate(-275, -70)">
    <path id="pie" class="st0" d="M330.1,331.9c-0.7,0.3-1.6,0.8-1.7,1.6c-0.1,0.5,0.2,1.1,0.5,1.5c9.5,14.5,22.2,27,36.9,36.3
	c0.8,0.5,1.8,1,2.6,0.6c0.7-0.3,1-1,1.4-1.7c9.5-22.4,18.8-44.9,27.9-67.4C375.2,312.5,352.7,322.2,330.1,331.9z M352.6,353.7
	c-2.7-1.5-5-3.9-6.3-6.7c-0.5-1.2-0.9-2.5-1.2-3.8c-1.1-6.6,2.8-13.7,9-16.3c6.2-2.6,14-0.3,17.9,5.1s3.4,13.5-1,18.5
	C366.4,355.6,358.4,356.9,352.6,353.7z M535.8,367.5c0.3,0.6,0.6,1.3,1.2,1.6c1,0.6,2.3-0.2,3.3-1c14-11.3,26.3-24.7,36.3-39.6
	c-23.1-9.5-46.4-18.7-69.9-27.3C516,323.5,525.7,345.6,535.8,367.5z M541.4,323c6-1.4,12.7,1.4,15.9,6.5c3.3,5.2,2.8,12.4-1,17.2
	c-0.6,0.7-1.2,1.4-1.9,1.9c-2.9,2.5-6.8,3.8-10.6,3.6c-1.8-0.1-3.6-0.6-5.3-1.4c-5.6-2.6-9.1-8.9-8.5-14.9
	C530.7,329.8,535.5,324.4,541.4,323z M368.8,129.3c-0.5-1-1.2-2.3-2.3-2.4c-0.8-0.1-1.5,0.4-2.2,0.9c-14.8,10.2-27.5,23.3-37.2,38.3
	c23.3,9.2,46.9,17.9,70.7,25.8C388.1,171.1,378.5,150.2,368.8,129.3z M365.7,170.3c-4.2,2.3-9.5,2.3-13.8,0.1
	c-4.3-2.2-7.3-6.7-7.7-11.4c-0.2-2.4,0.2-4.9,1.1-7.1c1.1-2.5,2.8-4.6,5-6.2c2.1-1.5,4.5-2.5,7-2.8c5.3-0.7,10.8,1.8,13.8,6.2
	c3,4.4,3.3,10.4,0.9,15.1C370.5,166.7,368.3,168.9,365.7,170.3z M571.5,161.3c-10.4-14.1-23.4-26.3-38-36c-0.6-0.4-1.4-0.8-2-0.5
	c-0.5,0.2-0.7,0.8-0.9,1.3c-8.7,22-17.4,44.1-26.1,66.1C526.8,181.9,549.1,171.6,571.5,161.3z M542,139.1
	c6.5,0.7,12.1,6.2,12.9,12.6c0.3,2.2,0,4.5-0.7,6.6c-0.8,2.2-2,4.2-3.7,5.8c-4.7,4.5-12.5,5.3-18,1.8c-5.4-3.6-8-11-5.9-17.1
	C528.9,142.6,535.6,138.4,542,139.1z M424.4,394c4.5,0.9,9,1.7,13.6,2.2c14.5,1.6,29.3,1.1,43.6-1.7c-8.9-23.6-18.5-47-28.8-70.1
	C443,347.5,433.5,370.7,424.4,394z M456.3,362.4c1.2,0.2,2.4,0.6,3.6,1.2c1.4,0.7,2.7,1.8,3.8,2.9c3.6,3.9,5.1,9.8,3.7,14.9
	c-1.4,5.2-5.9,9.4-11.1,10.5c-6,1.3-12.6-1.8-15.8-7.1c-2.9-5-2.6-11.6,0.7-16.3C444.6,363.9,450.7,361.4,456.3,362.4z M308.4,275.2
	c22.1-9.3,44.2-18.7,66.4-28c-22.7-8.6-45.5-17.2-68.2-25.8c-2.4-0.9-4.1,2.3-4.6,4.8c-3,16.5-2.6,33.6,1.2,49.9
	C304.9,276.6,306.8,275.9,308.4,275.2z M308.5,240.7c3.1-5.2,9.8-8,15.7-6.7c5.9,1.3,10.8,6.4,12,12.4c0.3,1.7,0.4,3.4,0,5
	c-0.4,2-1.4,3.9-2.6,5.5c-4.6,5.9-14,7.7-20.3,3.6C307,256.5,304.7,247.1,308.5,240.7z M595.8,215.6c-22.9,9.9-45.8,19.8-68.7,29.7
	c23.4,9.8,46.9,18.9,70.7,27.5c0.9-6.3,1.7-12.6,2-19C600.5,240.9,599.1,228,595.8,215.6z M593.6,249.9c-2.3,5.4-7.8,9.2-13.7,9.4
	c-1.4,0-2.7-0.1-4-0.5c-1.5-0.5-2.9-1.5-4.1-2.5c-3.9-3.2-6.9-7.8-6.8-12.8c0.1-2.7,1.2-5.4,2.8-7.5c2.6-3.4,6.5-5.7,10.8-6.1
	c4.2-0.4,8.6,1,11.7,3.9C594.5,237.8,595.8,244.5,593.6,249.9z M482.9,317.9c-0.3,25.5,0.1,51,1.4,76.5
	c17.8-4.2,34.8-11.8,49.9-22.2c0.5-0.4,1.2-0.9,1.3-1.6c0-0.7-0.5-1.3-0.9-1.8C517.5,351.6,500.3,334.7,482.9,317.9z M516.4,372.4
	c-0.5,1.1-1.2,2.1-2,3c-1.3,1.4-2.9,2.3-4.5,3.2c-0.9,0.5-1.8,1-2.8,1.4c-1.1,0.4-2.3,0.6-3.6,0.6c-5.9,0.1-11.7-3.9-13.7-9.4
	s-0.4-12.2,4.1-16.1c5-4.3,13.1-4.5,18.3-0.5C517.4,358.6,519.3,366.4,516.4,372.4z M380.4,277c-24.6,0.5-49.1,1-73.7,1.6
	c-0.9,0-1.8,0.1-2.3,0.7c-0.4,0.6-0.4,1.5-0.2,2.3c3.5,16.9,10.6,33.1,20.8,47.2c0.5,0.6,1,1.3,1.8,1.4c0.8,0.1,1.6-0.6,2.2-1.2
	C346.1,311.7,363.3,294.4,380.4,277z M323.5,310.9c-6.2-3.5-9.1-11.8-6.5-18.4c2.6-6.6,10.5-10.6,17.4-8.9c2.8,0.7,5.4,2.3,7.4,4.4
	c3.3,3.6,4.6,9,3.3,13.7c-0.5,1.9-1.3,3.6-2.5,5.2C338.4,312.5,329.7,314.3,323.5,310.9z M370.9,373.6c0,0.9,0.9,1.6,1.8,2.2
	c14.9,9.5,31.9,15.8,49.3,18.5c1-25.2,1.5-50.5,1.6-75.8c-17.1,17.6-34.3,35.3-51.5,53C371.5,372,370.9,372.7,370.9,373.6z
	 M389.7,361.3c3.2-6.1,11-9.2,17.5-7.1c6.5,2.1,10.9,9.2,10,16c-0.9,6.8-7.2,12.4-14,12.6c-1.7,0-3.2-1.1-4.9-1.1
	c-1.7,0-3.3-0.9-4.6-1.9C388.2,375.5,386.5,367.3,389.7,361.3z M370.2,127c17.7,16.4,35.4,32.7,53.1,49.1c-0.8-24-1.9-48.1-3.4-72
	c-17.7,3.1-34.7,9.9-49.5,19.9c-0.5,0.3-1.1,0.8-1.2,1.4C369.2,126,369.7,126.5,370.2,127z M389.7,120.6c1.3-1.4,3-2.6,4.7-3.5
	c1.9-1,4-1.9,6.2-2.2c6-0.8,12.2,3.3,14.1,9c1.9,5.7-0.2,12.5-4.9,16.2c-1.6,1.3-3.5,2.3-5.5,2.6c-1,0.2-2.1,0.2-3.2,0.1
	c-5.2-0.4-10.2-3.2-12.7-7.8C385.8,130.6,386.2,124.4,389.7,120.6z M522.8,216c0.1,0.5,0.8,0.6,1.3,0.6c23.1-1,46.1-2,69.2-3
	c0.6,0,1.3-0.1,1.5-0.7c0.1-0.3,0-0.7-0.1-1c-5.2-17.1-12.5-33.5-21.7-48.8c-16.6,17.4-33.2,34.8-49.8,52.2
	C522.9,215.4,522.7,215.7,522.8,216z M560.6,183c5.6-3.8,14-2.9,18.7,2c4.7,5,5.2,13.3,1.2,18.8c-2.7,3.6-7.2,5.9-11.6,5.4
	c-1.8-0.2-3.6-0.8-5.3-1.4c-1.8-0.7-3.5-1.4-5-2.6c-1.3-1.1-2.4-2.6-3.1-4.2C552.6,194.9,554.9,186.8,560.6,183z M523.4,275
	c1.7,2.3,3.8,4.4,5.9,6.3c16.2,15.2,32.4,30.5,48.6,45.7c9.5-16,16-33.8,19.1-52.1C572.5,274.9,548,274.9,523.4,275z M577.6,280.7
	c5.3,2.2,9.1,8.1,8.4,13.8c-0.1,1-0.4,1.9-0.6,2.9c-0.4,1.6-0.9,3.1-1.6,4.5c-0.8,1.3-1.8,2.5-2.9,3.5c-5.3,4.4-13.8,4.2-18.9-0.4
	c-5.1-4.6-6.2-13-2.5-18.7C563.3,280.5,571.3,278.1,577.6,280.7z M328.1,169.3c-0.4-0.4-1-0.9-1.7-0.8c-0.5,0.1-0.9,0.6-1.2,1
	c-10.1,15.1-17.3,32.2-21.2,50c25.5-0.3,51-0.9,76.5-1.8C363,201.6,345.5,185.5,328.1,169.3z M343.8,205.7
	c-3.1,6.2-11.2,9.4-17.7,7.2c-6.6-2.3-10.9-9.7-9.6-16.5c1.3-6.8,8.1-12.2,15-11.8c6.9,0.4,13.1,6.3,13.8,13.2
	c0.1,1.4,0.1,2.7-0.2,4.1C344.8,203.2,344.4,204.5,343.8,205.7z M491,165.6c12.8-14.2,25.6-28.4,38.4-42.7
	c-15.4-9.2-32.4-16-49.9-20.1c0.4,24.8,0.8,49.6,1.1,74.4C484,173.3,487.5,169.4,491,165.6z M487.9,117.8c3.6-3.8,9.4-5.4,14.4-4
	c5,1.4,9.1,5.9,10.2,11c0.9,4.1-0.3,8.7-2.9,12c-3.7,4.6-10.4,6.5-16,4.5c-5.5-1.9-9.6-7.6-9.7-13.5
	C483.9,124.2,485.4,120.5,487.9,117.8z M451.6,170.4c7.9-22.6,16.4-45,25.6-67.1c-17.6-3.6-35.8-3.6-53.3,0c-0.5,0-0.9,0.2-1.2,0.5
	c-0.4,0.5-0.1,1.3,0.1,1.9C432.4,127.3,442,148.8,451.6,170.4z M440.4,106.6c5.3-4.5,13.8-4.4,19,0.1c5.2,4.5,6.5,13,2.8,18.8
	c-0.9,1.4-2,2.7-3.3,3.7c-1.1,0.9-2.3,1.6-3.6,2.2c-6.4,2.6-14.5-0.1-18-6S435.2,111,440.4,106.6z"/>
    
  </g>

</svg>
    </div>
    </div>
</body>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Redressed);


@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
body {
  background: linear-gradient(270deg, #d3d4bc, #bcc7d4, #d1bcd4, #d4bcbc, #bcd4c2);
background-size: 1000% 1000%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
  /* background-color: #ffd0a9; */
  font-family:Redressed,arial, sans;
  text-align: center;
}
h1{
  font-size: 6em;
  line-height: .5em;
  color: #644;
}
h2{ 
    font-size: 3em;
    line-height: .7em;
    color: #545;
}
.box {
  display:block;
  width:90%;
  margin:auto;
  }
svg {
  display:block;
  margin:auto;
}
.wrapper {
  width:100%;
  height:100%;
  overflow:hidden;
}
.st0{fill:#8C236C;}

.st1{fill:#095D92;}

.st2{fill:#2E3192;}

.spinner {
-webkit-animation: cssAnimation 5s 20 linear;
-moz-animation: cssAnimation 5s 20 linear;
-o-animation: cssAnimation 5s 20 linear;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes cssAnimation {  
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}
            
          
!
999px
Loading ..................

Console