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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <div id="labyrinth">
  <svg viewBox="0 0 124.29659 122.21839">
  <defs
     id="defs2" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-52.283664,-48.88742)"
     id="layer1">
    <path
       d="m 113.39286,111.03571 c 0.46241,0.42451 -0.34409,0.83275 -0.70556,0.76855 -0.97955,-0.17398 -1.18865,-1.4102 -0.83154,-2.17966 0.63879,-1.37638 2.44027,-1.61141 3.65377,-0.89454 1.78087,1.05204 2.04598,3.48404 0.95753,5.12788 -1.45072,2.19098 -4.53265,2.48553 -6.60198,1.02053 -2.60405,-1.84357 -2.92766,-5.58356 -1.08352,-8.0761 2.2335,-3.0188 6.63575,-3.37127 9.5502,-1.14651 3.43458,2.62181 3.81583,7.68875 1.2095,11.02431 -3.0091,3.85103 -8.74228,4.261 -12.49841,1.2725 -4.26795,-3.39573 -4.70661,-9.79621 -1.33549,-13.97253 3.78188,-4.685195 10.85039,-5.15253 15.44663,-1.39848 5.10269,4.1677 5.59869,11.90479 1.46148,16.92074 -4.55328,5.52037 -12.95935,6.04504 -18.39485,1.52447 -5.938198,-4.93866 -6.491527,-14.01403 -1.58747,-19.86895 5.32389,-6.356143 15.06882,-6.938132 21.34306,-1.650463 6.77418,5.708993 7.38483,16.123683 1.71346,22.817163 -6.09401,7.19229 -17.17862,7.83159 -24.29128,1.77645 -7.61045,-6.47893 -8.27842,-18.23361 -1.839437,-25.76538 6.863797,-8.028678 19.288657,-8.72531 27.239487,-1.902434 8.44695,7.248604 9.17224,20.343734 1.96543,28.713594 -7.63337,8.86525 -21.39885,9.61921 -30.187704,2.02842 -9.283592,-8.01809 -10.066213,-22.454 -2.091414,-31.661808 8.402778,-9.701959 23.509168,-10.513245 33.135918,-2.154408 10.12035,8.787426 10.9603,24.564366 2.2174,34.610026 -9.17206,10.53876 -25.61958,11.40738 -36.084131,2.28039 -10.957197,-9.55666 -11.854481,-26.67481 -2.343389,-37.558235 9.94125,-11.375646 27.73007,-12.301597 39.03235,-2.406382 11.79411,10.325817 12.74872,28.785337 2.46937,40.506457 -10.71037,12.21258 -29.84061,13.19587 -41.980558,2.53236 C 80.300634,122.22877 79.288678,102.42778 90.336349,89.869007 101.81577,76.81943 122.28755,75.778804 135.26512,87.210651 c 13.46809,11.863937 14.53739,33.006509 2.72135,46.402879 -12.24843,13.88661 -34.06182,14.98458 -47.876986,2.78435 C 75.80435,123.76495 74.677712,101.28072 87.262147,87.04678 100.27956,72.323111 123.43463,71.167802 138.08735,84.13645 c 15.14221,13.401881 16.32619,37.22782 2.97332,52.29931 -13.78634,15.56076 -38.28317,16.77341 -53.773413,3.03632 C 71.307945,125.30127 70.066621,100.13356 84.187946,84.224553 98.743204,67.826682 124.58182,66.556686 140.90958,81.062248 c 16.81643,14.939705 18.1151,41.449242 3.2253,58.195742 -15.32415,17.235 -42.50461,18.56234 -59.669851,3.28829 C 66.811455,126.8377 65.45544,98.986304 81.113744,81.402325 97.206758,63.330175 125.72909,61.945486 143.73181,77.988046 c 18.49073,16.477442 19.90409,45.670724 3.47727,64.092164 -16.86187,18.90932 -46.72611,20.35135 -65.566278,3.54027 -19.3279,-17.24628 -20.798609,-47.781489 -3.60326,-67.040382 17.630702,-19.746489 48.836878,-21.245873 68.514488,-3.666253 20.16508,18.015114 21.69314,49.892265 3.72925,69.988595 -18.39952,20.58368 -50.947659,22.14041 -71.462706,3.79224 C 57.818302,129.91075 56.232895,96.69163 74.965341,75.75787 94.133676,54.336999 128.02379,52.722917 149.37626,71.839643 c 21.83947,19.552737 23.48223,54.113847 3.98122,75.885027 -19.93714,22.25808 -55.169248,23.92951 -77.359133,4.04421 C 53.321666,131.44735 51.621558,95.544232 71.891139,72.935643 92.597068,49.840355 129.1712,48.111572 152.19849,68.765442 175.71238,89.855763 177.46984,127.1009 156.43168,150.5469 134.95697,174.4794 97.040811,176.26554 73.17612,154.84309 48.825,132.98398 47.01019,94.396805 68.816938,70.113416 91.060427,45.343682 130.31863,43.500197 155.02071,65.69124 c 25.18835,22.627875 27.06051,62.5571 4.48517,87.67788"
       id="theline"
       style="fill:none;fill-rule:evenodd;stroke:#daab00;stroke-width:1px;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:100;stroke-opacity:1" />
  </g>
</svg>
  
  
</div>
              
            
!

CSS

              
                #labyrinth
  width: 100%
  margin: 50px auto
  background: black
  
#theline
  stroke-dasharray: 2947px !important
  stroke-dashoffset: 2947px !important
  animation: dash 6s ease-in-out infinite
  animation-direction: alternate !important 
  transform-origin: 50% 50% 

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    transform: scale(5, 5)
    stroke: #da6b00
  }
}
              
            
!

JS

              
                // calculate the length of path
// https://css-tricks.com/svg-line-animation-works/
var path = document.querySelector('#theline');
var length = path.getTotalLength();
console.log(length)
              
            
!
999px

Console