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

              
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1307 1372">

 <defs>
   <style>
       #parent{transform:translate(-128px, -400px);}
      .obj1,.obj2,.obj3{stroke:#fff; stroke-width:0.6px;}
      .fill{fill:#808080;}
      .fill1{fill:#07d6ef;}


      .obj1{
        animation: a1 6s linear infinite;
        transform-box: fill-box;
        transform-origin:bottom center;
      }

      @keyframes a1{
        0%{
          transform:rotate(-2deg);
        }
        20%{
          transform:rotate(2deg);
        }
        100%{
           transform: rotate(-2deg);
        }
      }

      .obj3{
         animation: a2 10s linear infinite;
         transform-box: fill-box;
         transform-origin:bottom center;     
      }

      @keyframes a2{
        20%{
          transform:rotate(-3deg);
        }
        45%{
          transform:rotate(4deg);
        }
        100%{
           transform: rotate(-2deg);
        }
      }

      .obj2{
        animation: a3 12s linear infinite;
        transform-box: fill-box;
        transform-origin:bottom center;
      }

      @keyframes a3{
        0%{
          transform:rotate(-7deg);
        }
        25%,50%,70%,90%{
          transform:rotate(5deg);
        }
        100%{
           transform: rotate(-7deg);
        }
      }

   </style>
 </defs>

  <g id="parent">

   <g class="obj1"><!--red-->
     <path  class="fill1" d="m255.07 663.53c45.179 46.554 48.62 98.219 31.239 104.73-17.381 6.5125-70.896-26.378-94.181-81.147-23.039-54.191-42.066-100.5-31.239-104.73 14.949-5.8396 52.251 37.941 94.181 81.147z" />
     <path class="fill" d="m197.56 643.72 82.192 114.2"  />
     <path d="m236.69 657.42c28.766 31.744 39.499 66.201 44.322 101.55" fill="none"/>
     <path d="m220.14 697.57c16.635 42.624 37.48 48.017 61.916 60.787" fill="none"/>
   </g>

   <g class="obj2"><!--white-->
     <path class="fill1" d="" >
       
     <animate 
       attributeName="d"

        values="m345.87 604.64c25.169 98.333-17.032 170.43-49.107 165.39-32.075-5.0378-82.292-91.635-67.047-183.64 15.084-91.032 42.622-200.77 56.178-185.6 20.734 23.206 36.617 112.58 59.976 203.84z;
                m 345.87395,604.64228 c 25.16933,98.33286 -17.03162,170.43159 -49.10652,165.39381 -32.0749,-5.03779 -101.85725,-97.12071 -67.047,-183.63724 23.03354,-57.247 44.69853,-191.94214 56.17759,-185.59686 27.23514,15.05477 36.61671,112.5793 59.97593,203.84029 z;
        m 345.87395,604.64228 c 51.81514,87.28137 -17.03162,170.43159 -49.10652,165.39381 -32.0749,-5.03779 -101.85725,-97.12071 -67.047,-183.63724 23.03354,-57.247 44.69892,-191.94285 56.17759,-185.59686 27.23305,15.05581 12.85223,124.46154 59.97593,203.84029 z;
        m 345.87395,604.64228 c 51.81514,87.28137 -17.03162,170.4316 -49.10652,165.39381 -32.0749,-5.03779 -84.45757,-49.89301 -67.047,-183.63724 7.9657,-61.19077 44.69892,-191.94285 56.17759,-185.59686 27.23305,15.05581 12.85223,124.46154 59.97593,203.84029 z;
        m345.87 604.64c25.169 98.333-17.032 170.43-49.107 165.39-32.075-5.0378-82.292-91.635-67.047-183.64 15.084-91.032 42.622-200.77 56.178-185.6 20.734 23.206 36.617 112.58 59.976 203.84z"
         dur="4s"
         repeatCount="indefinite"
      />

     </path>


     <path class="fill" d="m277.67 532.45 18.733 218.51" />
     <path d="m323.87 581.87c14.097 65.432-1.375 120.21-26.539 171.49" fill="none"/>
     <path d="m262.21 622.67c-14.097 70.422 12.265 94.192 37.257 130.72" fill="none"/>
   </g>

   <g class="obj3"><!--yellow-->
     <path class="fill1" d="m398.97 698.85c-38.908 60.164-93.975 77.2-105.45 60.375-11.476-16.825 10.515-82.331 63.892-121.3 52.814-38.562 98.116-70.81 105.45-60.375 10.128 14.409-27.782 65.467-63.892 121.3z" />
     <path class="fill" d="m405.78 632.47-102.74 117.1"  />
     <path d="m400.9 677.69c-27.05 38.851-61.628 59.2-98.674 73.485" fill="none"/>
     <path d="m353.21 670.47c-41.919 28.748-42.452 52.343-50.06 81.673" fill="none"/>
  </g>

  </g>

</svg>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console