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.

            
              <div>
  <svg width="300" height="300" viewbox="0 0 200 200">
  <g id="star-stroke" transform="translate(10 10)">
    <polygon
      stroke="orangered" stroke-width="2"
      fill="none"
      stroke-dasharray="5% 500%"
    points="87.9999978 137.940241 76.5136936 175.247148 75.074515 136.238569 54.3238608 169.3014 63.029877 131.249516 34.428992 157.815092 52.6869168 123.313083 18.1849071 141.571007 44.7504839 112.970122 6.69860358 121.676148 39.7614329 100.92549 0.752853633 99.4863158 38.0597591 87.9999956 0.752852903 76.5136897 39.761432 75.0745129 6.69860144 54.3238572 44.7504823 63.0298803 18.1849037 34.4289973 52.6869146 52.6869195 34.4289876 18.1849112 63.0298846 44.7504798 54.3238847 6.69859007 75.0745176 39.7614308 76.5137192 0.752849023 88.0000006 38.0597591 99.4863245 0.752854774 100.925484 39.7614311 121.676156 6.69860693 112.970137 44.7504923 141.571047 18.184938 123.313095 52.6869288 157.815123 34.4290322 131.249524 63.0298917 169.301415 54.3238979 136.238571 75.0745255 175.247153 76.5137334 137.940241 88.0000087 175.247143 99.4863387 136.238567 100.925491 169.301388 121.676169 131.249516 112.970123 157.815079 141.571025 123.313065 123.3131 141.570956 157.815132 112.970101 131.249528 121.676089 169.301421 100.925467 136.238573 99.4862524 175.247155 ">
      <animate attributeName="stroke-dasharray" attributeType="CSS"
             from="0% 10%" to="50% 0%"
             begin="0s" dur="10s" 
             repeatDur ="indefinite" />
      <animate attributeName="stroke-dasharray" attributeType="CSS"
             from="50% 0%" to="0% 10%"
             begin="10s" dur="20s" />
      <animate attributeName="stroke" attributeType="CSS"
             from="crimson" to="steelblue"
             begin="0s" dur="10s" />
      <animate attributeName="stroke" attributeType="CSS"
             from="steelblue" to="crimson"
             begin="10s" dur="20s" />
    </polygon>
  </g>  
</svg>
</div>
            
          
!
            
              DIV {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 300px;
  height: 300px;
  margin: auto;
}
            
          
!
999px
Loading ..................

Console