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

              
                <?xml version="1.0" encoding="UTF-8"?>
<svg width="511px" height="468px" viewBox="0 0 511 468" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<!--     <title>Group 2</title>
    <desc>Created with Sketch.</desc> -->
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-2">
            <polyline id="Path" points="492.671875 16.7070312 441.019531 122.878906 424.34375 162.566406 398.933594 239.167969 374.117188 297.253906"></polyline>
            <polyline id="Path-2" points="485.070312 287.554688 374.386719 299.695312 236.9375 324.882812 80.7695312 362.046875 23.8945312 467.839844"></polyline>
            <polyline id="Path-3" points="79.2070313 363.375 83.9628906 248.960938 83.9628906 238.59375 81.5849609 223.65625 70.9375 176.878906 64.5507812 153.220703 58.8808594 125.787109 49.734375 98.7636719 47.6015625 88.2714844 30.3261719 43.5839844 17.7949219 28.484375 0.806640625 14.3125"></polyline>
            <polyline id="Path-4" points="21.8769531 31.4765625 34.5742188 45.1894531 107.185547 49.3398438 132.800781 49.3398438 161.820312 49.3398438 191.78125 49.3398438 234.957031 45.1894531 275.144531 40.4082031 338.580078 34.4003906 400.613281 25.171875 493.546875 16.9550781 501.902344 13.9824219 510.201172 6.875"></polyline>
            <polyline id="Path-5" points="22.7050781 33.4746094 45.9707031 55.5605469 71.6230469 78.0449219 92.1054687 97.6054688 126.746094 125.503906 147.736328 138.740234 160.416016 148.462891 245.064453 211.503906 307.033203 244.748047 345.029297 261.216797 383.271484 276.164062"></polyline>
            <polyline id="Path-6" points="108.841797 9.65820312 133.400391 49.8378906 141.849609 67.65625 157.619141 94.8046875 177.019531 121.201172 222.154297 185.029297 243.683594 209.865234 285.773438 252.058594 325.056641 288.832031 346.005859 303.789063"></polyline>
            <polyline id="Path-7" points="192.146484 49.7539062 198.398438 74 208.302734 106.992187 219.710938 142.201172 224.587891 172.398437 244.193359 209.404297 263.855469 250.230469 299.09375 313.964844"></polyline>
            <polyline id="Path-8" points="233.818359 45.0488281 237.472656 105.720703 242.421875 195.697266 245.310547 210.501953 259.828125 282.755859 268.970703 318.548828"></polyline>
            <polyline id="Path-9" points="284.808594 7.72460938 275.115234 41.8046875 271.978516 53.4589844 267.509766 81.6464844 264.572266 100.119141 261.388672 117.996094 258.792969 139.523438 245.994141 206.015625 239.277344 242.712891 236.367188 282.982422 233.974609 325.314453"></polyline>
            <polyline id="Path-10" points="338.96875 34.9570312 315.519531 77.078125 245.589844 210.117188 235.238281 226.378906 225.179688 258.75 214.90625 280.28125 210.037109 290.744141 200.03125 319.357422 193.199219 334.482422"></polyline>
            <polyline id="Path-11"points="435.105469 0.6171875 414.544922 25.9003906 391.515625 51.3203125 379.296875 63.5722656 349.773438 94.4277344 245.490234 208.128906 226.998047 233.074219 187.427734 277.902344 170.691406 296.486328 159.417969 308.484375 140.15625 331.560547 120.021484 352.556641"></polyline>
            <polyline id="Path-12"points="469.646484 64.1171875 456.914062 73.0957031 426.332031 87.8027344 394.365234 106.210938 360.798828 125.035156 345.285156 137.384766 302.814453 164.865234 247.183594 205.460938 202.082031 237.921875 188.580078 246.71875 162.734375 262.455078 127.591797 286.533203 81.4863281 312.677734"></polyline>
            <polyline id="Path-13" points="493.412109 92.6582031 480.25 97.3164062 465.582031 101.109375 447.90625 109.119141 440.121094 112.845703 418.853516 121.814453 404.666016 130.007812 359.460938 152.359375 328.191406 166.474609 301.246094 181.640625 244.697266 209.878906 134.632812 229.792969 82.6445313 238.572266 51.1621094 261.080078 15.4765625 283.175781"></polyline>
            <polyline id="Path-14" points="477.375 211.886719 418.394531 183.195312 396.201172 185.949219 364.75 189.474609 286.71875 200.240234 245.134766 209.365234 193.179687 202.537109 153.916016 195.423828 124.960938 189.474609 85.9570312 179.933594 71.1171875 175.951172 36.0136719 175.951172"></polyline>
            <polyline id="Path-15" points="478.470703 256.271484 398.027344 240.595703 344.458984 234.710938 265.011719 215.085938 243.050781 209.570312"></polyline>
            <polyline id="Path-16" points="411.292969 201.751953 376.304688 204.375 360.244141 208.423828 345.533203 208.423828 294.695312 208.423828 246.042969 208.423828"></polyline>
            <polyline id="Path-17" points="413.951172 27.4023438 413.951172 38.7832031 413.951172 53.375 417.005859 63.0605469 422.602539 76.6337891 426.592773 88.0732422 422.602539 96.8369141 420.271973 106.243164 418.775391 114.768555 418.775391 122.808594 415.767578 129.621094 413.951172 144 413.951172 154.119141 413.951172 167.730469 417.005859 183.024414 412.594727 177.90918 407.794922 167.730469 406.147461 157.027344 406.147461 144 406.147461 133.594727 408.84375 127.392578 402.163086 125.020508 399.46582 119.420898 395.928711 111.796875 393.583984 106.243164 387.637695 102.379883 381.564453 96.8369141 373.34668 86.1396484 367.745117 80.9189453 367.745117 76.6337891"></polyline>
            <path d="M362.802734,82.8652344 C362.802734,82.8652344 365.628073,88.4582725 372.917969,95.8818359 C375.488949,98.4999573 380.638688,102.838824 388.367188,108.898438" id="Path-18"></path>
            <path d="M390.355469,111.476562 C397.503551,123.971013 401.077593,130.218238 401.077593,130.218238 C401.077593,130.218238 399.896105,142.442469 401.077593,164.306002 C401.301393,168.447443 402.275529,175.111325 404,184.297648 C402.051729,189.425696 401.077593,193.073903 401.077593,195.242267 C401.077593,197.410631 402.051729,199.580527 404,201.751953" id="Path-19"></path>
            <polyline id="Path-20" points="403.866211 202.171387 391.903809 215.445801 384.08252 233.85498 382.630371 239.330566 373.446289 248.900391 369.395996 260.359375 369.395996 270.856934 349.856445 280.087402 329.577637 292.332031"></polyline>
            <polygon id="Path-21"  points="298.905273 313.570801 234.260254 325.607422 231.463867 322.242676 225.124023 320.671387 218.830566 318.620605 208.803711 317.606934 200.111328 319.589111 191.727051 313.570801 183.106445 309.471191 171.841797 307.432129 163.995605 306.501465 161.160156 306.501465 150.960449 298.491211 140.207031 292.252441 128.00293 286.470703 123.55957 280.177246 107.288086 259.165527 95.5913086 247.407715 84.2167969 237.963867 82.4125977 226.336914 85.2241211 209.320801 85.2241211 194.354004 84.2167969 179.455566 89.7255859 166.652344 95.5913086 149.411133 95.5913086 143.46582 102.736328 125.240234 102.736328 106.132812 113.183594 102.844727 128.00293 94.9521484 138.660156 86.1435547 145.241211 80.2871094 145.241211 72.9453125 161.160156 70.4570312 174.972168 66.5668945 187.78125 60.8564453 193.646484 55.8618164 196.759766 59.1030273 206.506348 59.1030273 219.958984 56.6962891 234.790527 53.3505859 246.40332 57.2045898 253.015625 57.2045898 265.19873 57.855957 270.983887 57.855957 284.367188 59.1030273 311.96875 62.7050781 322.40625 63.8554688 336.118164 72.9453125 350.294434 80.8007812 358.564453 85.5756836 361.391113 90.1147461 370.331055 100.356934 379.712891 109.394043 384.994141 111.878418 384.994141 115.254395 393.375977 125.240234 398.637207 129.874512 399.611328 131.969727 395.992188 134.382812 397.427734 146.692383 398.112793 163.534668 400.484863 175.375488 401.946777 182.340332 402.465332 184.074707 398.637207 193.331055 397.427734 198.119141 398.112793 201.918945 390.885742 208.066895 381.514648 227.384766 377.421875 237.963867 370.331055 247.407715 362.778809 263.247559 360.138184 266.933594 363.853516 268.629395 352.770996 271.941895 343.621582 278.038086 334.876465 284.483398 328.665039 288.772461 328.161621 290.250488 328.161621 292.252441 323.934082 295.797363 313.546387 301.29248 305.038574 308.317871"></polygon>
            <polyline id="Path-22" points="327.199219 290.668945 320.700684 293.963379 310.643555 299.178711 300.084473 305.261719 295.63623 307.972656 288.76123 307.972656 279.662598 310.54248 271.377441 313.046387 268.044434 314.67334 269.333984 318.875977 257.416504 317.730469 247.78125 316.252441 241.058594 317.730469 234.733398 317.730469 234.733398 313.046387 247.04834 313.046387 261.04541 314.67334 267.058105 314.67334 265.400879 310.54248 255.789551 309.069336 246.443359 309.069336 237.494629 310.54248 234.733398 311.312012 233.838379 318.875977 225.97998 313.753418 214.958984 311.947754 207.064941 311.947754 202.115723 313.753418 194.195801 310.54248 181.358398 306.434082 172.302246 304.021973 164.458008 303.310059 157.416016 297.16748 144.448242 287.458008 137.753906 284.375488 133.813477 282.559082 126.592773 273.54834 118.396484 266.026367 110.495605 257.171387 101.234375 246.910645 93.3364258 240.102539 89.1401367 237.756348 89.8393555 226.929688 89.8393555 212.824219 89.1401367 201.171387 87.769043 191.366699 85.3359375 179.595215 95.6816406 161.376953 108.191895 135.455566 115.163086 116.59082 133.14502 104.20752 146.182129 92.5024414 152.515137 85.9150391 176.783203 79.9521484 188.116211 75.4814453 197.23291 70.0244141 205.631836 67.746582 225.97998 63.9208984 234.733398 62.9970703 241.96582 64.4291992 262.41748 65.5922852 270.121094 64.4291992 288.76123 68.7319336 301.422852 70.0244141 317.359375 74.2050781 334.588867 81.9291992 346.738281 87.3530273 353.270996 91.074707 363.872559 103.490234 372.986816 111.695801 377.605469 115.696777 386.592285 127.931152 391.533203 134.003906 393.970703 135.455566 393.253418 151.703125 395.678711 166.980469 397.966797 177.581543 402.266602 185.230469 393.253418 186.283691 391.533203 195.63623 388.548828 202.828125 380.585938 204.742188 376.081543 211.871582 370.277832 225.409668 366.431641 234.601074 365.669922 237.041992 359.704102 244.647461 350.733398 256.435547 348.629395 262.575684 336.228027 267.980957 320.700684 278.095215 318.3125 282.559082 306.064941 285.692871 295.63623 289.547852 287.420898 292.67334 277.693359 293.963379 269.333984 297.16748 264.303711 300.380371 252.657715 299.178711 238.934082 301.355469 234.733398 302.124023 234.733398 306.434082 219.102539 296.567383 209.063477 293.963379 207.064941 290.668945 199.699707 287.458008 189.183105 285.692871 181.358398 284.375488 166.575684 273.54834 160.220215 269.275879 153.984375 267.980957 141.210449 252.208008 132.477539 240.806641 124.018555 231.484375 121.991699 217.917969 117.152344 199.70459 112.476074 186.283691"></polyline>
            <polyline id="Path-23" points="112.746094 185.975586 117.181641 183.242676 122.709961 170.655273 129.93457 154.25 135.03418 140.760254 137.801758 132.163086 149.841309 127.337402 161.73877 119.348633 169.086426 112.322266 169.086426 110.425293 177.344727 110.425293 190.079102 103.993164 201.59375 98.125 204.645996 94.1269531 211.17041 96.7167969 229.123047 94.7958984 236.533691 90.5874023 253.072754 92.3862305 266.364746 90.5874023 282.778809 94.7958984 299.349121 98.125 303.800781 99.1630859 320.765137 107.519531 332.958008 112.322266 341.762207 122.129395 353.989746 130.353027 361.945312 142.146973 369.087891 147.431152 369.087891 161.888672 372.095703 179.519531 375.574219 187.828125 374.039062 200.194824 374.556152 204.416992 368.080566 220.234863 360.489258 236.471191 357.61377 242.731445 345.224121 256.699707 343.768555 260.541992 327.800781 267.662598 314.054199 278.431152 309.292969 276.341797 292.13916 281.291504 282.778809 283.96582 283.944336 286.458984 275.57666 285.634766 265.686523 289.070801 261.846191 290.686523 253.072754 290.686523 242.290039 290.686523 236.533691 292.497559 223.52002 291.794922 210.27002 289.070801 203.889648 285.634766 190.079102 282.12793 184.925781 280.330566 176.306152 275.84082 165.68457 268.848633 158.105957 265.157715 147.447754 251.929688 128.721191 230.42627 135.03418 229.685547 131.373047 223.077637 128.721191 203.26709 125.491699 193.859863 123.677734 188.680664 128.147949 185.975586 135.980957 167.67041 143.342285 149.628418 144.971191 136.785156 157.333984 132.163086 173.316406 121.571777 174.925293 117.793945 183.748047 116.546387 202.250488 108.225098 207.733398 103.993164 220.585449 103.993164 230.586914 100.869141 237.131836 98.125 248.520508 99.7148438 260.731934 98.125 265.686523 96.1098633 279.76416 100.302734 291.379395 102.986328 301.314941 103.993164 305.84082 108.225098 315.352051 114.498047 323.124512 119.348633 327.200195 119.348633 334.354004 125.84668 336.604004 129.422363 344.286621 134.116699 347.295898 136.198242 347.295898 140.760254 352.291016 145.984375 357.034668 150.769531 360.489258 151.92041 360.489258 158.447754 363.277832 171.36084 366.195801 183.955078 369.087891 188.680664"></polyline>
            <polyline id="Path-24" points="364.620117 191.562988 363.516602 201.283691 362.915039 207.995117 357.727051 214.838867 352.978027 224.573242 350.35498 232.29248 347.210938 234.833984 339.230469 242.466309 332.239746 249.30957 329.876953 254.914062 322.625488 256.735352 312.67041 262.808594 303.584473 268.637695 305.45752 270.592773 298.558594 269.926758 288.035156 274.036133 282.213379 276.358887 280.193848 279.97168 275.00293 277.413086 267.682617 279.97168 262.072754 281.483887 260.047852 283.899414 255.875977 281.483887 247.283691 281.483887 240.395508 282.68457 236.086914 284.979004 231.366211 281.483887 220.744629 279.97168 214.06543 282.68457 211.425293 279.97168 201.881836 277.413086 194.337891 276.358887 187.778809 277.413086 182.736328 273.134277 173.858887 268.637695 167.021484 265.364746 161.741211 263.491211 158.209961 256.228027 151.729492 248.66748 143.550781 239.438965 136.610352 233.288086 131.702637 229.857422 118.231445 232.29248 115.280273 212.046875 110.470703 193.771484 108.056641 184.99707 111.90625 181.791992 120.237305 164.583984 131.702637 140.699219 134.489258 130.608398 151.729492 118.661133 163.542969 111.547852 167.021484 106.254883 191.697266 97.7480469 203.983398 90.8154297 208.695313 92.7255859 225.52832 90.8154297 236.338379 86.5742188 252.030273 86.5742188 263.390625 86.5742188 267.682617 84.3164062 275.00293 88.9794922 289.879883 92.7255859 305.45752 96.265625 322.625488 103.858398 336.848633 109.680664 347.210938 120.260742 357.727051 128.836914 360.988281 134.80957 369.004883 142.628906 372.792969 145.415039 372.792969 160.733398 375.150391 172.419922 377.02832 181.791992 380.077148 187.969727 378.306641 196.46875 377.02832 204.041016 385.529297 204.041016 380.077148 213.514648 375.150391 224.573242 371.254883 234.833984 371.254883 237.568359 363.516602 245.769531 357.727051 254.914062 352.978027 259.116211 352.978027 262.808594 345.930664 267.174805 332.239746 274.036133 324.398438 281.483887 322.625488 284.979004 312.67041 287.585938 298.558594 295.008789 289.879883 300.046875 280.193848 300.046875 272.546875 303.892578 266.276367 306.296875 257.970703 306.296875 241.982422 304.942383 236.086914 308.216797 229.786133 311.452148 217.416016 308.216797 208.695313 308.216797 203.983398 308.216797 193.049805 304.942383 185.188477 304.942383 181.386719 301.449219 168.249023 298.799805 154.049805 290.205078 145.47168 284.979004 138.076172 279.97168 127.756836 267.174805 116.793945 256.735352 108.056641 245.769531 94.6396484 236.417969 95.7558594 229.857422 94.6396484 196.46875 93.0078125 181.791992 99.0253906 168.694336 108.056641 150.787109 116.793945 134.80957 122.270508 121.449219 131.702637 113.134766 145.47168 103.858398 156.408203 92.7255859 164.907227 90.8154297 182.736328 84.3164062 200.720703 77.9775391 214.06543 75.7158203 225.52832 74.0849609 236.086914 71.7070312 250.916016 71.7070312 268.912109 71.7070312 278.549805 74.0849609 288.035156 75.7158203 298.558594 77.9775391 307.72168 80.3154297 312.67041 80.3154297 324.398438 86.5742188 332.239746 88.9794922 343.111328 95.0800781 348.953125 95.0800781 355.058594 103.858398 362.915039 113.134766 369.004883 120.260742 371.254883 126.150391 382.246094 136.679688 388.035156 138.277344 389.119141 150.787109 393.017578 168.694336 395.549805 181.791992 398.571289 184.99707 395.549805 186.018555 395.549805 193.771484 395.549805 201.283691 388.035156 204.041016 383.645508 216.498047 377.02832 232.29248 373.94043 237.568359 366.704102 245.769531 359.09668 256.735352 355.058594 262.808594 356.344727 265.364746 345.930664 270.592773 332.239746 279.97168 325.667969 287.585938 320.683594 290.205078 307.72168 296.34375 298.558594 301.449219 292.786133 301.449219 282.213379 304.942383 268.912109 309.563477 267.682617 311.452148 263.390625 295.008789 237.427734 296.34375 229.786133 291.947266 225.52832 291.947266 234.891602 301.449219 234.891602 306.296875 217.416016 304.942383 205.701172 303.892578 194.337891 300.046875 178.989258 297.654297 170.305664 296.34375 161.741211 290.205078 150.476562 279.97168 147.469727 279.97168 143.550781 276.358887 141.076172 277.413086 134.489258 270.592773 126.09082 260.675781 118.231445 252.186523 110.470703 245.769531 99.0253906 234.833984 99.0253906 216.498047 97.4599609 199.543945 95.7558594 181.791992 103.260742 168.694336 123.527344 130.608398 126.09082 124.055664 131.702637 118.661133 143.550781 109.680664 154.049805 102.68457 158.928223 96.265625 171.310059 92.7255859 189.685059 86.5742188 197.4375 82.9697266 200.720703 80.8168945 216.460938 80.3154297 231.366211 77.1162109 236.338379 74.7626953 242.977051 75.7158203 254.618652 76.394043 265.150391 74.7626953 268.231934 74.7626953 277.208984 77.9775391 290.480957 80.8168945 304.706543 84.3164062 311.59375 84.3164062 314.001465 87.0825195 330.672852 93.7607422 342.447266 97.7480469 345.930664 98.8925781 351.246094 107.026855 361.913574 118.661133 366.704102 122.138672 366.704102 126.150391 377.02832 136.679688 383.645508 140.699219 385.529297 139.193848 385.529297 148.634277 385.529297 151.775391 389.119141 164.583984 390.148438 177.05957 392.144531 182.925293 393.017578 186.018555 389.119141 186.663574 387.418457 195.525879 387.418457 202.279785 371.254883 205.707031 364.620117 216.498047 358.408203 229.857422 356.344727 235.709961 347.210938 245.205078 340.121582 253.914062 337.501953 257.964844 340.121582 259.116211 329.876953 262.026855 320.683594 268.637695 313.496582 273.134277 312.67041 276.358887"></polyline>
            <polyline id="Path-25" points="315.594727 280.303223 309.771973 280.303223 289.710449 286.592773 284.726562 288.138184 278.973633 290.072754 269.70459 293.055664 263.269531 295.29541 260.731445 285.65332 252.602539 284.115234 242.970703 286.592773 235.820312 289.268555 229.703613 285.65332 221.864746 284.115234 214.500977 284.115234 212.927734 285.65332 218.190918 287.799316 229.135254 292.250977 236.449707 296.008301 234.898438 306.786133 223.812988 302.734375 214.500977 299.462402 208.983398 298.055176 207.137695 299.462402 205.724121 302.734375 197.523926 298.055176 187.890137 295.29541 179.742676 293.544678 173.198242 293.544678 168.895508 289.268555 162.814941 284.115234 156.226074 278.22998 150.874023 274.60791 146.521484 273.568848 143.039062 275.52832 129.936035 260.507324 117.174316 247.008301 109.166504 239.126953 106.957031 236.759277 106.957031 233.881836 103.521973 234.868652 102.29834 215.541016 99.9790039 190.296875 98.4443359 183.116211 104.60498 172.527832 117.174316 152.574219 125.345703 135.337402 127.938477 126.220215 143.88916 114.949219 159.196777 104.248535 161.556152 100.308105 177.171875 95.9614258 194.884277 88.0737305 201.084473 83.8608398 216.344727 83.8608398 226.323242 81.3076172 236.449707 78.6879883 252.602539 80.7958984 262.217285 79.4423828 268.053223 77.9633789 280.87793 83.1430664 296.184082 86.4003906 305.713379 88.65625 310.637207 88.0737305 313.853516 91.7788086 326.472656 95.9614258 339.445312 101.901855 343.705566 101.901855 344.45752 106.201172 355.917969 118.428711 360.205078 122.458984 362.040039 124.722168 366.976562 131.772461 375.728516 140.224609 379.066406 142.298828 381.624512 141.375488 381.624512 150.666504 384.869141 166.333008 387.751953 182.077148 389.459961 186.531738 385.958496 190.296875 383.319336 200.238281 383.924316 203.107422 366.976562 207.635254 362.040039 214.569336 355.917969 227.741211 353.100586 234.868652 343.705566 244.409668 337.172852 252.183105 333.681641 256.232422 322.630371 261.597168 313.137695 268.580078 308.000488 272.838867 299.97168 274.60791 288.646484 277.523438 280.87793 281.580566 273.469727 281.580566 264.569824 284.115234"></polyline>
            <path d="M264.744629,284.621582 L260.58252,286.358887" id="Path-26"></path>
            <polyline id="Path-27" points="188.786133 277.348633 202.325195 280.021973 209.92627 282.874512 211.886719 286.462891 207.249023 298.658203 203.375488 295.584961 187.922852 291.938477 179.55127 290.526855 176.222168 290.526855 174.197266 286.462891 167.016113 280.54248 160.989746 276.476562 154.250488 272.110352 149.924805 270.527344 139.425781 255.703613 128.761719 243.649902 121.088867 235.257812 117.238281 232.62793 112.062988 233.915527 125.178223 246.992188 139.425781 265.643066 146.435547 274.038574"></polyline>
            <polyline id="Path-28" points="103.445312 184.459473 109.224121 201.464844 112.260742 220.006348 112.887695 233.491211 108.166504 234.133789 109.224121 223.367188 106.774902 216.385254 106.774902 206.087402 104.632324 197.292969 103.445312 189.879883 102.109375 183.785645 108.166504 181.362305 117.168457 161.45166 124.5 144.523926 130.404297 133.50293 131.334473 128.152832 143.512207 119.76123 157.686523 108.845215 163.415527 102.627441 174.836426 99.4160156 190.424316 93.7363281 200.029785 89.3046875 202.427246 86.1728516 205.154297 97.6557617 200.85791 102.047852 185.913086 109.458008 174.836426 113.636719 172.013184 114.202637 167.171875 120.571777 155.86084 128.958984 148.066895 133.50293 144.244141 136.592285"></polyline>
            <polyline id="Path-29" points="205.780273 97.6572266 217.843262 99.456543 230.70459 96.0957031 236.501953 92.5273438 235.947754 82.5839844 230.073242 84.7866211 221.141113 86.2636719 210.131836 86.7871094 201.515137 85.7626953 197.75 72.3891602 205.780273 71.6259766 228.51416 69.1796875 235.029297 66.7456055 253.373535 68.300293 265.310059 69.1796875 270.044434 68.300293 295.895996 73.8203125 314.849121 77.9165039 324.100098 81.1845703 343.410156 89.3491211 350.916016 93.5107422 361.024414 103.585449 363.064941 108.29834 371.134277 115.928711 373.924316 117.085449 375.284668 121.349609 382.251465 129.314941 388.066895 135.588867 391.561523 136.314453 377.07959 143.94043 379.391602 158.989746 381.409668 169.390137 384.555664 182.542969 386.041504 186.5 382.251465 191.644531 380.487305 201.667969 381.409668 203.79541 369.987305 205.999512 370.625488 198.663086 372.317871 188.453613 363.95752 189.418457 368.09375 193.035645 366.501465 200.453613 368.09375 205.999512"></polyline>
            <polyline id="Path-30" points="383.298828 187.101074 380.474121 182.633301 377.42627 170 377.42627 161.454102 375.680664 151.981445 375.680664 144.482422 372.343262 140.532227 365.591797 134.112305 362.394043 129.843262 359.400879 125.900391 353.357422 121.350098 347.690918 115.695313 342.291504 110.361816 339.439941 104.796875 328.892578 103.306152 322.001953 99.7319336 314.840332 97.2075195 310.24707 94.1132812 307.419434 92.1958008 296.958008 91.2529297 284.234863 86.2470703 273.096191 84.5917969 267.663574 81.5039062 262.71875 83.5864258 250.066406 84.5917969 239.876465 83.5864258 235.968262 82.3056641 237.272461 95.2124023 243.989746 95.2124023 257.897461 95.2124023 262.71875 94.1132812 265.721191 93.6010742 271.13916 94.6499023 279.089355 97.8491211 289.445312 100.337402 295.989746 101.287598 302.505859 101.287598 314.840332 110.361816 322.981445 113.404297 329.952148 115.695312 332.8125 118.183594 342.291504 127.585449 348.5 132.978027 350.666992 132.978027 350.041016 136.375 355.783203 143.77002 360.414062 148.905273 364.243164 149.907227 364.243164 154.581055 365.591797 163.221191 367.126465 171.392578 369.170898 180.958008 372.343262 188.075684"></polyline>
            <polyline id="Path-31" points="132.795898 174.250977 136.5625 175.896484 149.679688 171.575195 160.741699 166.23291 168.848633 161.854004 173.783203 158.532227 176.649414 160.817383 171.636719 164.23584 166.475098 168.297852 158.495605 172.275391 149.679688 175.237305 140.985352 178.081543 135.607422 179.697266 131.478516 178.912598"></polyline>
            <polyline id="Path-32" points="151.318848 175.04834 151.919922 182.466797 153.84668 195.612305 154.787109 202.646484 157.501465 215.587402 159.820312 224.820801 167.613281 224.17041 164.480957 218.037109 162.814941 207.727539 159.820312 196.177246 157.501465 187.431152 156.536133 180.116699 157.501465 172.873047"></polyline>
            <polyline id="Path-33" points="180.450195 163.693359 180.450195 170.908691 180.952148 182.452637 179.816895 190.865723 179.816895 197.460938 178.32373 199.453125 184.049805 201.222656 184.804199 193.199219 184.804199 183.624512 184.804199 169.867676 184.049805 165.580566"></polyline>
            <polyline id="Path-34" points="181.302246 163.133301 191.496094 163.85791 199.088867 160.158203 202.473633 157.209961 204.851074 160.533936 201.511719 163.133301 195.962402 165.329102 191.496094 166.053223 184.528809 166.053223"></polyline>
            <polyline id="Path-35"  points="184.986816 182.203125 194.749512 181.081055 200.083008 177.584473 203.275879 180.497559 197.025879 184.077637 189.859375 186.86377 184.986816 186.86377"></polyline>
            <polyline id="Path-36" points="184.483398 199.587891 194.246582 198.02832 206.92334 193.688477 215.669434 189.479004 219.320312 192.401855 214.091797 194.533447 205.152344 197.244141 195.635254 200.865723 193.057617 202.058105"></polyline>
            <polyline id="Path-37" points="217.405762 135.409668 216.731934 158.381348 217.405762 169.43457 217.405762 177.913574 220.062988 182.280273 222.686523 158.844971"></polyline>
            <polyline id="Path-38" points="218.248535 138.285645 231.809082 135.754395 239.915527 144.41748 239.915527 153.234375 228.071777 142.259766 220.473145 144.41748"></polyline>
            <polyline id="Path-39" points="228.117188 143.080078 231.213379 135.564453 235.378418 125.817871 238.752441 122.771973"></polyline>
            <polyline id="Path-40" points="223.685059 165.615723 232.056152 158.026855 236.724609 150.828125 240.412598 153.86377 230.331055 164.908203 225.081055 171.755371"></polyline>
            <polyline id="Path-41" points="227.69043 168.621094 235.962891 172.710938 241.3125 174.563477 241.3125 180.728516 234.501465 176.211914 227.69043 172.710938 225.924316 171.28125"></polyline>
            <polyline id="Path-42"  points="259.423828 138.499023 282.83252 139.48584 277.273926 149.924805"></polyline>
            <polyline id="Path-43"  points="258.643555 142.385254 268.701935 142.957464 269.466797 143.000977 273.016113 138.96875 273.016113 145.40332 275.649414 147.510742 278.347168 148.740723 274.521484 156.375488 270.779297 148.740723 267.00293 143.000977"></polyline>
            <polyline id="Path-44" points="250.82959 199.89209 251.452637 187.305176 256.445801 171.178223 261.012207 180.211426 264.611816 174.631348 258.536621 166.115234 268.05127 163.160645 271.30957 161.778809 273.443359 154.115234 268.05127 158.683594 257.951172 163.160645 259.202148 154.115234 260.08252 147.365723 261.012207 142.54248"></polyline>
            <polyline id="Path-45" points="258.282227 163.007812 253.186523 166.929688 256.832031 171.542969"></polyline>
            <polyline id="Path-46" points="286.193848 133.790527 285.423828 149.712402 284.648438 159.869629 284.648438 165.874512 284.648438 178.057129 289.206055 174.12207 289.894531 159.869629 290.817383 150.57959 291.400879 137.092285 291.400879 129.542969 290.817383 124.55957"></polyline>
            <polyline id="Path-47" points="294.428711 208.591797 295.968262 198.812012 296.871582 192.362793 296.871582 183.783691 295.650146 183.783691 298.324707 175.04541 296.871582 168.723633 301.963867 165.233887 300.646973 181.228516 300.127441 189.613281 300.646973 197.57959 300.646973 204.061035 301.238281 208.591797"></polyline>
            <polyline id="Path-48" points="303.722168 163.971191 310.728027 165.362305 321.53125 166.341309 327.330078 167.057129 316.920898 172.29248 315.526123 170.003906 306.720703 168.744141 301.73291 168.744141"></polyline>
            <polyline id="Path-49" points="300.727539 184.124023 306.30127 188.069824 319.87207 192.006348 324.566895 194.471191 315.496582 195.687012 308.02002 192.006348 299.924805 189.905518"></polyline>
            <polyline id="Path-50" points="327.979004 166.908691 327.979004 185.641602 327.424805 191.214355 327.424805 194.4375 326.855469 200.132812 326.855469 206.478027 326.855469 208.086914 332.628906 208.086914 332.628906 200.132812 332.628906 193.742676 331.585449 183.966797 331.585449 177.856445 331.585449 169.712891 331.585449 164.763184"></polyline>
            <polyline id="Path-51" points="348.749023 157.401855 354.342773 160.74707 361.061035 162.633301 362.375 167.282227 352.324219 165 347.836914 163.229492 344.742676 162.342041 345.927734 158.4375"></polyline>
            <polyline id="Path-52"  points="344.955566 162.740234 338.96875 180.450684 337.463379 187.104004 335.099121 193.410645 340.027344 192.842285 341.651855 185.950195 344.287598 180.450684 346.037598 175.327637 347.947266 169.84668 349.066895 166.322754 350.553711 164.436035"></polyline>
            <polyline id="Path-53"  points="335.337402 193.655762 339.884277 201.89502 342.665039 206.875 343.23291 208.312988 349.624512 208.312988 346.060059 203.472168 343.23291 198.341309 339.884277 192.533691"></polyline>
            <polyline id="Path-54"  points="346.64209 204.083984 352.131836 198.452637 355.03125 193.333984 356.404785 190.617676 362.980957 189.553711 357.160645 196.818848 352.895508 202.816406 349.472656 207.202148"></polyline>
            <polyline id="Path-55"  points="201.75 74 185.004883 79.4414062 164.927734 85.9121094 157.780273 87.8564453 149.542969 96.2841797 132.821289 108.035156 123.822266 113.759766 120.302734 116.094727 113.803711 137.556641 90 178.044922"></polyline>
            <polyline id="Path-56"  points="94.7958984 152.833008 109.073242 121.999023 112.397461 113.214844 110.286133 112.097656 123.56543 104.419922 138.972656 92.6123047 149.275391 82.8964844 149.275391 80.2646484 160.042969 80.2646484 182.883789 73.9638672 194.863281 69.7568359 196.920898 66.7363281"></polyline>
            <polyline id="Path-57"  points="146.185547 75.1533203 155.501953 76.8271484 172.367188 72.4619141 187.231445 67.0175781 195.224609 61.5966797 208.436523 62.6455078 227.826172 60.0273438 234.679688 56.7597656 248.186523 60.0273438 260.845703 61.5966797 270.521484 62.6455078 290.561523 65.0830078 311.725586 68.0888672 320.583008 68.0888672 332.025391 76.8271484 345.336914 84.6621094 356.362305 88.6289062 360.962891 93.875 376.129883 110.648438 380.450195 113.740234 385.114258 121.751953 397.638672 133.421875"></polyline>
            <polyline id="Path-58"  points="362.694824 80.6630859 349.231934 76.4916992 340.001953 70.4643555 330.138672 64.487793 324.928223 60.0102539 313.96582 59.2602539 297.87793 57.3276367 283.067383 55.1381836 272.086914 53.0292969 259.319336 53.534668 250.312012 53.534668 243.02002 52.1015625 237.563477 50.8105469 233.986328 49.7612305 227.055664 50.8105469 217.632812 53.0292969 204.91748 53.0292969 196.581543 53.0292969 192.368652 50.8105469 184.772949 55.1381836 168.192383 61.4746094 156.730957 65.2121582 146.81543 66.9487305 141.1875 66.9487305 140.140625 70.4643555 135.858398 74.6542969 125.570312 80.6630859 119.389648 85.3505859 108.149902 91.3642578 97.8632812 94.8466797 91.7734375 97.3149414 91.0292969 105.148926 88.9008789 115.716309 87.1181641 125.746094 84.4990234 136.373535 80.3964844 155.849609 73.0395508 171.758301 70.9311523 176.420898 60.7988281 134.574219 50.203125 99.5117188 39.3164062 66.9487305 30.3037109 43.6767578 62.640625 45.9980469 94.9980469 47.7988281 108.149902 47.7988281 106.75293 53.534668 108.149902 63.1787109 106.75293 70.4643555 108.149902 85.3505859 108.149902 99.5117188 109.334961 115.716309 109.334961 130.189453 110.44043 140.523438"></polyline>
            <g id="Group" transform="translate(95.000000, 138.000000)">

                <polyline id="Path-62" points="23.5483398 13.2368164 28.4379883 9.23291016 31.0151367 2.12451172"></polyline>
                <polyline id="Path-61" points="24.8476562 15.1450195 32.8330078 10.9267578 33.8105469 7.89697266"></polyline>
                <polyline id="Path-63" points="25.1118164 18.5610352 28.2841797 18.5610352 30.5175781 22.1801758 29.5561523 28.0541992"></polyline>
                <polyline id="Path-64" points="24.0532227 19.7705078 26.4326172 23.2626953 27.1103516 28.0874023"></polyline>
                <polyline id="Path-65" points="13.0429688 15.7460938 5.27978516 14.3359375 2.77441406 8.74316406 0.429199219 3.42626953"></polyline>
                <polyline id="Path-66"  points="12.6411133 18.9868164 4.94335938 18.9868164 0.991699219 20.2460938"></polyline>
                <polyline id="Path-67" points="12.7207031 20.8164062 7.33105469 27.3105469 7.33105469 31.9667969 10.684082 34.8193359"></polyline>
                <polyline id="Path-68" points="14.5307617 23.081543 12.4404297 27.8735352 14.5307617 30.8613281 18.2041016 32.1142578"></polyline>
                <polygon id="Path-60" points="17.8481445 1.08642578 15.071733 2.09199773 12.5483158 3.9679586 11.3676758 5.9990242 11.3676758 7.75830078"></polygon>
                              <polygon id="Path-59" points="17.8824706 0.499023438 12.1220703 6.83261753 12.1220703 11.7650638 13.1721511 14.9719662 12.1220703 19.769882 15.0022704 22.8686523 21.0477571 22.8686523 24.948702 19.769882 25.7666016 15.9954133 24.1644009 12.6219977 23.2326673 11.6838379 21.7939463 10.1004394 23.2326673 6.83261753 22.4037354 4.05621275"></polygon>
            </g>
        </g>
    </g>
</svg>

<div class="text">
  <h3>Chapter 13</h3>
  <h3>Good Progress</h3>
  <p>Far into the night, while the other creatures slept, Charlotte worked on her web. First she ripped out a few of the orb lines near the center. She left the radial lines alone, as they were needed for support. As she worked, her eight legs were a great help to her. So were her teeth.</p>
  <p>She loved to weave and she was an expert at it. When she was finished ripping things out, her web looked something like this:</p>

  <p>A spider can produce several kinds of thread. She uses a dry, tough thread for foundation lines, and she uses a sticky thread for snare lines - the ones that catch and hold insects.</p>
  <p>Charlotte decided to use her dry thread for writing the new message.</p>
  <p>"If I write the word 'Terrific' with sticky thread," she thought, "every bug that comes along will get stuck in it and spoil the effect."</p>
  <p>"Now let's see, the first letter is T."</p>
  <p>Charlotte climbed to a point at the top of the left hand side of the web. Swinging her spinnerets into position, she attached her thread and then dropped down. As she dropped, her spinning tubes went into action and she let out thread. At the bottom, she attached the thread. This formed the upright part of the letter T. Charlotte was not satisfied, however. She climbed up and made another attachment, right next to the first. Then she carried the line down, so that she had a double line instead of a single line. "It will show up better if I make the whole thing with double lines."</p>
  <p>She climbed back up, moved over about an inch to the left, touched her spinnerets to the web, and then carried a line across to the right, forming the top of the T. She repeated this, making it double. Her eight legs were very busy helping.</p>
  <p>"Now for the E! " Charlotte got so interested in her work, she began to talk to herself, as though to cheer herself on.</p>
  <p>If you had been sitting quietly in the barn cellar that evening, you would have heard something like this:</p>

  <p>"Now for the R! Up we go! Attach! Descend! Pay out line! Whoa! Attach! Good! Up you go! Repeat! Attach! Descend! Pay out
  line. Whoa, girl! Steady now! Attach! Climb! Attach! Over to the right! Pay out line! Attach! Now right and down and swing that loop and around and around! Now in to the left! Attach! Climb! Repeat! O.K.! Easy, keep those lines together! Now, then, out and down for the leg of the R! Pay out line! Whoa! Attach! Ascend!</p>
  <p>Repeat! Good girl!"</p>
  <p>And so, talking to herself, the spider worked at her difficult task. When it was completed, she felt hungry. She ate a small bug that she had been saving. Then she slept.</p>
  <p>Next morning, Wilbur arose and stood beneath the web. He breathed the morning air into his lungs. Drops of dew, catching the sun, made the web stand out clearly. When Lurvy arrived with breakfast, there was the handsome pig, and over him, woven neatly in block letters, was the word TERRIFIC. Another miracle.</p>

  <h3>Charlotte's Web by E.B. White, 1952. Illustrations by Garth Williams</h3>  
</div>
              
            
!

CSS

              
                /* *********
yeah i should have used GSAP, i know
maybe i'll do one in GSAP as an excercise
********* */

body {
  background: #F0ECE7;
  font-family: 'Della Respira', serif;
  font-size: 20px;
}

@keyframes showText {
  0% {
    height: 0;
    opacity: 0;
  }
  10% {
    height: auto;
    opacity: 0;
  }
  100% {
    height: auto;
    opacity: 1;
  }
}

.text {
  opacity: 0;
  height: 0;
  overflow: hidden;
  max-width: 700px;
  padding: 0 30px 30px;
  margin: 0 auto;
  animation: showText 1s 0s 1 linear;
  animation-delay: 12.85s;
  animation-fill-mode: forwards;
}

h3 {
  font-size: 30px;
}

svg {
  margin: 0 auto;
  display: block;
}

polyline,
path,
polygon {
  stroke: #555;
}

/* spider-body  */
#Path-59,
#Path-60 {
  fill: #111;
  stroke: #111;
  opacity: 0;
}

/* legs  */
#Path-68,
#Path-67,
#Path-66,
#Path-65,
#Path-64,
#Path-63,
#Path-62,
#Path-61 {
  stroke: #111;
  stroke-width: 1.5;
  opacity: 0;
}

@keyframes ani-path {
	from{
		stroke-dashoffset:304;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-2 {
	from{
		stroke-dashoffset: 532;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-3 {
	from{
		stroke-dashoffset: 369;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-4 {
	from{
		stroke-dashoffset: 499;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-5 {
	from{
		stroke-dashoffset: 438;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-6 {
	from{
		stroke-dashoffset: 381;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-7 {
	from{
		stroke-dashoffset: 287;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-8 {
	from{
		stroke-dashoffset: 276;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-9 {
	from{
		stroke-dashoffset: 322;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-10 {
	from{
		stroke-dashoffset: 333;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-11 {
	from{
		stroke-dashoffset: 472;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-12 {
	from{
		stroke-dashoffset: 461;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-13 {
	from{
		stroke-dashoffset: 520;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-14 {
	from{
		stroke-dashoffset: 453 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-15 {
	from{
		stroke-dashoffset: 240 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-16 {
	from{
		stroke-dashoffset: 165 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-17 {
	from{
		stroke-dashoffset: 287 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-18 {
	from{
		stroke-dashoffset: 36 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-19 {
	from{
		stroke-dashoffset: 94 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-20 {
	from{
		stroke-dashoffset: 124 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-21 {
	from{
		stroke-dashoffset: 966;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-22 {
	from{
		stroke-dashoffset: 1272;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-23 {
	from{
		stroke-dashoffset: 1090;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-24 {
	from{
		stroke-dashoffset: 2655;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-25 {
	from{
		stroke-dashoffset: 942 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-26 {
	from{
		stroke-dashoffset: 4 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-27 {
	from{
		stroke-dashoffset: 214 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-28 {
	from{
		stroke-dashoffset: 340;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-29 {
	from{
		stroke-dashoffset: 445 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-30 {
	from{
		stroke-dashoffset: 408 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-31 {
	from{
		stroke-dashoffset: 98  ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-32 {
	from{
		stroke-dashoffset: 111;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-33 {
	from{
		stroke-dashoffset: 78 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-34 {
	from{
		stroke-dashoffset: 48 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-35 {
	from{
		stroke-dashoffset: 40;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-36 {
	from{
		stroke-dashoffset: 65 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-37 {
	from{
		stroke-dashoffset: 71;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-38 {
	from{
		stroke-dashoffset: 58;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-39 {
	from{
		stroke-dashoffset: 23;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-40 {
	from{
		stroke-dashoffset: 48 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-41 {
	from{
		stroke-dashoffset: 39;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-42 {
	from{
		stroke-dashoffset: 35;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-43 {
	from{
		stroke-dashoffset: 52;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-44 {
	from{
		stroke-dashoffset: 117;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-45 {
	from{
		stroke-dashoffset: 12;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-46 {
	from{
		stroke-dashoffset: 100;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-47 {
	from{
		stroke-dashoffset: 91;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-48 {
	from{
		stroke-dashoffset: 52;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-49 {
	from{
		stroke-dashoffset: 52;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-50 {
	from{
		stroke-dashoffset: 90;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-51 {
	from{
		stroke-dashoffset: 40;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-52 {
	from{
		stroke-dashoffset: 67;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-53 {
	from{
		stroke-dashoffset: 41 ;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-54 {
	from{
		stroke-dashoffset: 45;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-55 {
	from{
		stroke-dashoffset: 162;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-56 {
	from{
		stroke-dashoffset: 148;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-57 {
	from{
		stroke-dashoffset: 282;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes ani-path-58 {
	from{
		stroke-dashoffset: 684;
    opacity: 1;
	}

	to {
	    stroke-dashoffset: 0;
      opacity: 1;
	 }
}

@keyframes charlotte {
  0% { 
    opacity: 0;
    transform: translateY(-7px);
	}
  5% {
    opacity: 1;
  }
  
  30% {
    transform: translateY(0px);
    opacity: 1;
  }
  
  50% {
    transform: translatey(-5px);
    opacity: 1;
  }
  
  70% {
    transform: translatey(-1px);
    opacity: 1;
  }
  90% {
    transform: translatey(-3px);
    opacity: 1;
  }
  100% {
    transform: translatey(0);
    opacity: 1;
  }
}

#Path {
  stroke-dasharray: 304;
  animation: ani-path .2s 0s 1 linear;
  animation-delay: 1s;
}

#Path-2 {
  stroke-dasharray: 531;
  animation: ani-path-2 .2s 0s 1 linear;
  animation-delay: 1.2s;
}

#Path-3 {
  stroke-dasharray: 369;
  animation: ani-path-3 .2s 0s 1 linear;
  animation-delay: 1.4s;
}

#Path-4 {
  stroke-dasharray: 499;
  animation: ani-path-4 .2s 0s 1 linear;
  animation-delay: 1.6s;
}

#Path-5 {
  stroke-dasharray: 438;
  animation: ani-path-5 .2s 0s 1 linear;
  animation-delay: 1.8s;
}

#Path-6 {
  stroke-dasharray: 381;
  animation: ani-path-6 .1s 0s 1 linear;
  animation-delay: 2s;
}

#Path-7 {
  stroke-dasharray: 287;
  animation: ani-path-7 .1s 0s 1 linear;
  animation-delay: 2.1s;
}

#Path-8 {
   stroke-dasharray: 276;
  animation: ani-path-8 .1s 0s 1 linear;
  animation-delay: 2.2s; 
}

#Path-9 {
   stroke-dasharray: 322;
  animation: ani-path-9 .1s 0s 1 linear;
  animation-delay: 2.3s; 
}

#Path-10 {
   stroke-dasharray: 333;
  animation: ani-path-10 .1s 0s 1 linear;
  animation-delay: 2.4s; 
}

#Path-11 {
   stroke-dasharray: 472;
  animation: ani-path-11 .1s 0s 1 linear;
  animation-delay: 2.5s; 
}

#Path-12 {
   stroke-dasharray: 461;
  animation: ani-path-12 .1s 0s 1 linear;
  animation-delay: 2.6s; 
}

#Path-13 {
   stroke-dasharray: 520;
  animation: ani-path-13 .1s 0s 1 linear;
  animation-delay: 2.7s; 
}

#Path-14 {
   stroke-dasharray: 453;
  animation: ani-path-14 .1s 0s 1 linear;
  animation-delay: 2.8s; 
}

#Path-15 {
   stroke-dasharray: 240;
  animation: ani-path-15 .1s 0s 1 linear;
  animation-delay: 2.9s; 
}

#Path-16 {
   stroke-dasharray: 165;
  animation: ani-path-16 .1s 0s 1 linear;
  animation-delay: 3s; 
}

#Path-17 {
   stroke-dasharray: 287;
  animation: ani-path-17 .1s 0s 1 linear;
  animation-delay: 3.1s; 
}


#Path-18 {
   stroke-dasharray: 36;
  animation: ani-path-18 .1s 0s 1 linear;
  animation-delay: 3.2s; 
}

#Path-19 {
   stroke-dasharray: 94;
  animation: ani-path-19 .1s 0s 1 linear;
  animation-delay: 3.3s; 
}

#Path-20 {
   stroke-dasharray: 124;
  animation: ani-path-20 .1s 0s 1 linear;
  animation-delay: 3.4s; 
}

#Path-21 {
   stroke-dasharray: 966;
  animation: ani-path-21 .1s 0s 1 linear;
  animation-delay: 3.5s; 
}

#Path-22 {
   stroke-dasharray: 1272;
  animation: ani-path-22 1s 0s 1 linear;
  animation-delay: 3.6s; 
}

#Path-23 {
   stroke-dasharray: 1090;
  animation: ani-path-23 .8s 0s 1 linear;
  animation-delay: 4.6s; 
}

#Path-24 {
   stroke-dasharray: 2655;
  animation: ani-path-24 1.8s 0s 1 linear;
  animation-delay: 5.4s; 
}

#Path-25 {
   stroke-dasharray: 942;
  animation: ani-path-25 .8s 0s 1 linear;
  animation-delay: 7.2s; 
}

#Path-26 {
   stroke-dasharray: 4;
  animation: ani-path-26 .1s 0s 1 linear;
  animation-delay: 8s; 
}

#Path-27 {
   stroke-dasharray: 214;
  animation: ani-path-27 .1s 0s 1 linear;
  animation-delay: 8.1s; 
}

#Path-28 {
   stroke-dasharray: 340;
  animation: ani-path-28 .2s 0s 1 linear;
  animation-delay: 8.2s; 
}

#Path-29 {
   stroke-dasharray: 445;
  animation: ani-path-29 .3s 0s 1 linear;
  animation-delay: 8.4s; 
}

#Path-30 {
   stroke-dasharray: 408;
  animation: ani-path-30 .3s 0s 1 linear;
  animation-delay: 8.7s; 
}

#Path-31 {
   stroke-dasharray: 98;
  animation: ani-path-31 .05s 0s 1 linear;
  animation-delay: 9s; 
}

#Path-32 {
   stroke-dasharray: 111;
  animation: ani-path-32 .05s 0s 1 linear;
  animation-delay: 9.05s; 
}

#Path-33 {
   stroke-dasharray: 78;
  animation: ani-path-33 .05s 0s 1 linear;
  animation-delay: 9.1s; 
}

#Path-34 {
   stroke-dasharray: 48;
  animation: ani-path-34 .05s 0s 1 linear;
  animation-delay: 9.15s; 
}

#Path-35 {
   stroke-dasharray: 40;
  animation: ani-path-35 .05s 0s 1 linear;
  animation-delay: 9.2s; 
}

#Path-36 {
   stroke-dasharray: 65;
  animation: ani-path-36 .05s 0s 1 linear;
  animation-delay: 9.25s; 
}

#Path-37 {
   stroke-dasharray: 71;
  animation: ani-path-37 .05s 0s 1 linear;
  animation-delay: 9.3s; 
}

#Path-38 {
   stroke-dasharray: 58;
  animation: ani-path-38 .05s 0s 1 linear;
  animation-delay: 9.35s; 
}

#Path-39 {
   stroke-dasharray: 23;
  animation: ani-path-39 .05s 0s 1 linear;
  animation-delay: 9.4s; 
}

#Path-40 {
   stroke-dasharray: 48;
  animation: ani-path-40 .05s 0s 1 linear;
  animation-delay: 9.45s; 
}

#Path-41 {
   stroke-dasharray: 39;
  animation: ani-path-41 .05s 0s 1 linear;
  animation-delay: 9.5s; 
}

#Path-42 {
   stroke-dasharray: 35;
  animation: ani-path-42 .05s 0s 1 linear;
  animation-delay: 9.55s; 
}

#Path-43 {
   stroke-dasharray: 52;
  animation: ani-path-43 .05s 0s 1 linear;
  animation-delay: 9.6s; 
}

#Path-44 {
   stroke-dasharray: 117;
  animation: ani-path-44 .05s 0s 1 linear;
  animation-delay: 9.65s; 
}

#Path-45 {
   stroke-dasharray: 12;
  animation: ani-path-45 .05s 0s 1 linear;
  animation-delay: 9.7s; 
}

#Path-46 {
   stroke-dasharray: 100;
  animation: ani-path-46 .05s 0s 1 linear;
  animation-delay: 9.75s; 
}

#Path-47 {
   stroke-dasharray: 91;
  animation: ani-path-47 .05s 0s 1 linear;
  animation-delay: 9.8s; 
}

#Path-48 {
   stroke-dasharray: 52;
  animation: ani-path-48 .05s 0s 1 linear;
  animation-delay: 9.85s; 
}

#Path-49 {
   stroke-dasharray: 52;
  animation: ani-path-49 .05s 0s 1 linear;
  animation-delay: 9.9s; 
}

#Path-50 {
   stroke-dasharray: 90;
  animation: ani-path-50 .05s 0s 1 linear;
  animation-delay: 9.95s; 
}

#Path-51 {
   stroke-dasharray: 40;
  animation: ani-path-51 .05s 0s 1 linear;
  animation-delay: 10s; 
}

#Path-52 {
   stroke-dasharray: 67;
  animation: ani-path-52 .05s 0s 1 linear;
  animation-delay: 10.05s; 
}

#Path-53 {
   stroke-dasharray: 41;
  animation: ani-path-53 .05s 0s 1 linear;
  animation-delay: 10.1s; 
}

#Path-54 {
   stroke-dasharray: 45;
  animation: ani-path-54 .05s 0s 1 linear;
  animation-delay: 10.15s; 
}

#Path-55 {
   stroke-dasharray: 162;
  animation: ani-path-55 .05s 0s 1 linear;
  animation-delay: 10.2s; 
}

#Path-56 {
   stroke-dasharray: 148;
  animation: ani-path-56 .05s 0s 1 linear;
  animation-delay: 10.25s; 
}

#Path-57 {
   stroke-dasharray: 282;
  animation: ani-path-57 .05s 0s 1 linear;
  animation-delay: 10.3s; 
}

#Path-58 {
   stroke-dasharray: 684;
  animation: ani-path-58 .5s 0s 1 linear;
  animation-delay: 10.35s; 
}

#Path-59,
#Path-60,
#Path-61,
#Path-62,
#Path-63,
#Path-64,
#Path-65,
#Path-66,
#Path-67,
#Path-68 {
  animation: charlotte 2s 0s 1 ease-in;
  animation-delay: 10.85s; 
}

#Path,
#Path-2,
#Path-3,
#Path-4,
#Path-5,
#Path-6,
#Path-7,
#Path-8,
#Path-9,
#Path-10,
#Path-11,
#Path-12,
#Path-13,
#Path-14,
#Path-15,
#Path-16,
#Path-17,
#Path-18,
#Path-19,
#Path-20,
#Path-21,
#Path-22,
#Path-23,
#Path-24,
#Path-25,
#Path-26,
#Path-27,
#Path-28,
#Path-29,
#Path-30,
#Path-31,
#Path-32,
#Path-33,
#Path-34,
#Path-35,
#Path-36,
#Path-37,
#Path-38,
#Path-39,
#Path-40,
#Path-41,
#Path-42,
#Path-43,
#Path-44,
#Path-45,
#Path-46,
#Path-47,
#Path-48,
#Path-49,
#Path-50,
#Path-51,
#Path-52,
#Path-53,
#Path-54,
#Path-55,
#Path-56,
#Path-57,
#Path-58,
#Path-59,
#Path-60,
#Path-61,
#Path-62,
#Path-63,
#Path-64,
#Path-65,
#Path-66,
#Path-67,
#Path-68 {
   opacity: 0;
   animation-fill-mode: forwards;
}


              
            
!

JS

              
                //manually console logged each path's length to get the values for dash-offset and stroke-dasharray
var path = document.querySelector('#Path-58');
var length = path.getTotalLength();
// console.log(length);
              
            
!
999px

Console