123

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="bird">
  <button type="button" class="next-bird button">Click to draw! ✎</button>
  <svg
    viewBox="0 0 188 137"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    role="presentational"
  >
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <g id="Group" transform="translate(1.284471, 0.783605)" stroke="#979797">
        <path
          d="M59.9069354,102.728114 C26.6537541,93.9818065 15.0334226,69.4698831 17.7038104,36.3023327 C18.0079934,32.5242282 24.8320659,21.2697355 27.1217792,19.2945202 C49.9402833,-0.389803024 90.1898264,-7.59486333 116.199904,10.0054577 C161.469872,40.6384289 135.16975,100.464087 88.4303729,110.728114 C81.3982402,112.272379 48.338886,117.082855 46.6920917,104.82577 C40.9922846,62.4021246 60.4425293,48.7516013 103.574904,52.9507702 C113.460081,53.9131454 122.60608,58.7063109 132.301467,60.8609265 C136.824585,61.8661036 158.762532,60.5861989 160.723342,71.7320202 C166.035669,101.928854 99.4813917,131.824251 81.6686542,104.673426 C65.094849,79.411028 81.4817512,55.4756545 104.102248,41.665614 C118.287929,33.0051135 145.649658,27.5912997 162.465529,30.9351452 C169.4575,32.3255027 181.444368,41.6695112 186.153029,44.9038952"
          id="Path"
        ></path>
        <path
          d="M16.0631854,44.5210827 C-4.49907048,64.0718327 -7.23125993,60.0356115 19.1295917,58.8179577"
          id="Path-2"
        ></path>
        <path
          d="M36.4186542,28.5640515 C36.4186542,44.9742623 54.0372678,23.4989878 36.7975604,29.9351452"
          id="Path-3"
        ></path>
        <path
          d="M59.1725604,114.060145 C56.7851202,120.802476 56.8605801,125.518945 50.6569354,129.26327 C49.5641941,129.922815 55.7081157,120.137644 56.8170917,122.798426 C58.3140024,126.389986 56.9796115,130.919696 58.9499042,134.274989 C60.5111941,136.933774 58.4134459,128.13176 58.1452167,125.060145"
          id="Path-4"
        ></path>
        <path
          d="M76.0124042,113.954676 C76.0124042,123.910281 79.1361308,127.977149 70.3327167,133.286708 C69.1664381,133.99012 71.1024612,128.971334 72.2624042,129.685145 L76.9538104,126.958583 C78.9559637,128.190677 78.2272479,131.484624 78.8639667,133.747645"
          id="Path-5"
        ></path>
        <path
          d="M146.770217,99.899989 C149.869175,105.939051 150.137415,114.713731 156.067092,118.017176 C159.446683,119.899959 160.980171,111.997374 163.871779,109.427333 C165.556225,107.930209 169.8257,108.182712 169.660842,105.935145 C169.632087,105.543122 147.519414,98.8247419 146.805373,98.6851452"
          id="Path-6"
        ></path>
      </g>
    </g>
  </svg>
  <svg
    role="presentational"
    viewBox="0 0 157 151"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <g id="bird-2" transform="translate(0.000000, 1.000000)" stroke="#979797">
        <path
          d="M60.6457412,71.0425245 C51.7535659,74.3993207 49.4191873,92.4654963 51.2941787,99.4448683 C52.3456736,103.358899 62.6620145,108.149978 66.6418349,109.261275 C90.237492,115.849957 108.610093,111.458436 117.762929,87.6050245 C134.229326,44.6915774 38.0703382,22.5155894 26.6887099,60.4956495 C23.4476921,71.3108026 25.9097811,82.071271 29.2629287,92.2886183 C33.069807,103.888525 38.2687628,112.347663 48.4660537,120.425337 C54.9257637,125.542326 67.3632821,129.307163 75.9113662,130.237837 C80.7420613,130.76378 85.6227244,130.75555 90.4816787,130.702681 C96.9989707,130.631768 103.708328,131.504688 110.016835,129.866743 C115.392801,128.470924 120.138837,125.123126 124.618397,121.8394 C126.913896,120.156692 128.505027,117.633191 130.005116,115.2144 C134.07122,108.658086 134.928935,100.716392 135.309804,93.2104933 C137.963785,40.9076423 91.8584082,-4.38530606 39.3683974,0.339399534 C24.5662263,1.67176543 17.9857744,27.6929187 25.2433974,38.362837 C29.8676566,45.1612705 32.5919086,46.194696 39.1066787,50.7261183"
          id="Path-7"
        ></path>
        <path
          d="M24.7043349,13.144087 C-16.21187,28.8914867 1.47648546,19.1053962 22.2160537,24.6206495"
          id="Path-8"
        ></path>
        <path
          d="M36.6223037,13.2104933 C27.345214,23.1203437 41.040467,26.5082668 42.3762099,24.425337 C49.3095916,13.6135657 40.6895856,15.0108636 34.9973037,14.1050245"
          id="Path-9"
        ></path>
        <path
          d="M68.3879287,130.347212 C68.018137,133.619347 65.3065331,142.800804 67.2785537,140.163618 L62.0285537,144.952681 C70.1411621,134.103677 68.2629287,138.563317 68.2629287,146.733931"
          id="Path-10"
        ></path>
        <path
          d="M87.9543349,131.405806 C87.1483453,135.272993 81.7118669,142.018448 85.5363662,143.007368 L81.2043349,147.636275 C89.2480652,149.716184 86.3357113,134.591865 87.4894912,149.49565"
          id="Path-11"
        ></path>
        <path
          d="M135.536366,97.8393995 C157.942037,95.401885 159.521247,91.7244511 152.266835,113.913618 C151.140298,117.359371 151.781919,124.288513 148.169179,123.987837 C142.077001,123.480806 140.052603,112.917493 133.962147,112.390181"
          id="Path-12"
        ></path>
      </g>
    </g>
  </svg>
  <svg
    role="presentational"
    viewBox="0 0 274 184"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <g id="bird-3" transform="translate(1.000000, 1.000000)" stroke="#979797">
        <path
          d="M151.917621,135.891881 C108.800462,135.355529 66.2349298,116.466038 43.1324652,78.2121937 C27.2951564,51.988241 29.4394267,8.33738862 65.8160589,1.23563124 C77.0509919,-0.957748499 110.033391,0.361846415 112.61684,0.731724991 C165.304308,8.27511506 140.886292,48.2320348 173.601215,79.8684437 C190.20212,95.9220663 214.587906,73.3792838 224.015278,106.927037 C225.166348,111.023177 226.926702,115.925599 224.890278,119.661412 C195.498828,173.579909 76.5221015,151.074417 82.7691839,86.3957875 C84.6099594,67.3374773 121.446442,69.9861553 132.101215,71.3528187 C146.963638,73.2591879 161.823174,81.3928023 173.069965,90.6653187 C181.485149,97.6032908 219.964176,148.442985 226.956684,105.700475 C228.678825,95.1736904 230.309019,78.9411369 223.374653,68.5676625 C208.875041,46.8769484 179.629357,42.5474858 164.109028,67.0989125 C148.048017,92.5056361 155.815615,121.737103 144.976215,148.231725 C143.386619,152.117157 140.610848,155.550792 137.49184,158.360631 C134.8257,160.762493 131.184549,161.78511 128.030903,163.49735"
          id="Path-13"
          transform="translate(131.106544, 81.748675) scale(-1, 1) translate(-131.106544, -81.748675) "
        ></path>
        <path
          d="M228.49184,44.0989125 C230.477236,43.5232001 272.366786,22.2571535 258.17934,41.325475 C256.175925,44.0181208 248.74654,45.6670597 250.878559,48.2590687 C251.399292,48.8921513 292.429963,50.0511106 258.995746,54.887975 C247.786585,56.509583 236.480121,57.3671417 225.222309,58.606725"
          id="Path-14"
        ></path>
        <path
          d="M210.901996,27.4387562 C209.837292,33.2946299 207.250269,35.3989771 215.120746,34.9036 C216.210157,34.8350312 217.559932,21.588338 210.714496,29.7590687"
          id="Path-15"
        ></path>
        <path
          d="M85.5855902,149.380162 C82.7769964,155.402298 80.2841763,161.582045 77.1598089,167.446569 C60.4246521,198.858922 77.989169,155.143906 80.0894964,162.759069 C81.8589742,169.174669 80.9280381,176.042923 81.3473089,182.68485"
          id="Path-16"
        ></path>
        <path
          d="M111.476215,150.989537 C111.374653,156.583287 112.805607,162.420074 111.171528,167.770787 C109.97927,171.674779 102.848193,173.237143 103.448871,177.274694 C103.972676,180.795525 108.08042,169.524174 111.550434,170.317662 C115.03612,171.114734 114.451476,176.854121 115.901996,180.12235"
          id="Path-17"
        ></path>
        <path
          d="M31.8434027,89.8762562 C21.6246527,90.8710479 10.5505405,97.0724516 1.18715269,92.8606312 C-3.50378212,90.7505644 7.06955978,84.3704698 9.30824644,79.7395375 C10.8389442,76.5731464 8.89940161,69.9247418 12.4059027,69.6536 C17.9160852,69.2275226 22.1271254,75.0112572 26.4840277,78.4114125 C29.6155767,80.855294 31.957986,84.169225 34.6949652,87.0481312"
          id="Path-18"
        ></path>
      </g>
    </g>
  </svg>
  <svg
    role="presentational"
    viewBox="0 0 142 144"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <g id="bird-4" transform="translate(0.757904, 1.155078)" stroke="#979797">
        <path
          d="M18.5312068,49.2335855 C14.0293594,59.5906107 7.18245309,69.9728905 10.6486767,82.1865322 C24.1240306,129.668508 88.8206463,130.339193 104.022099,83.8409812 C105.623805,78.9416831 109.705178,65.3696846 108.41558,58.5830604 C103.066826,30.4347572 78.0294507,14.2892652 53.4216971,3.42005554 C46.3471674,0.29524586 18.8770941,-4.52824899 16.0090913,9.33195316 C13.2388696,22.7196081 11.9035655,49.649207 25.862254,59.9727975 C54.5518868,81.1911248 92.9396825,59.4623999 102.455888,29.2331359 C102.926192,27.7391613 103.836192,25.7015537 102.779424,24.5455305 C73.7852306,-7.17191733 54.927943,37.6623181 54.2562747,63.5684666 C53.3390449,98.9458824 66.8598656,116.728101 101.669105,122.080811 C104.561844,122.525636 107.875931,122.932173 110.430332,121.503593 C113.886143,119.570887 116.376041,116.104462 118.419482,112.712954 C121.254213,108.008138 123.203404,102.782802 124.86448,97.5471717 C127.047453,90.6665466 128.688224,83.601931 129.912387,76.4878747 C132.508973,61.3981732 118.60471,55.396276 106.371417,54.6344422"
          id="Path-19"
        ></path>
        <path
          d="M14.4208203,25.4021674 C-4.27501359,39.6511661 -5.97708366,36.1938338 16.3363045,36.803159"
          id="Path-20"
        ></path>
        <path
          d="M25.34386,20.1924914 C23.6173327,29.71099 30.6983059,21.1917034 28.7483483,19.1005551 C24.0472623,14.0590774 24.7482583,20.4176737 24.7482583,21.2035436"
          id="Path-21"
        ></path>
        <path
          d="M46.4031569,117.874835 C44.1131365,127.379433 46.4385781,119.564294 35.1565806,136.264954 C33.9339065,138.074869 37.4178557,129.529437 39.0426974,130.9891 C41.5053347,133.20139 39.8515391,137.560326 40.2559599,140.845939"
          id="Path-22"
        ></path>
        <path
          d="M59.3262416,118.812356 C57.3423905,137.111671 60.518196,127.684945 53.1680149,139.544439 C51.8957694,141.597204 54.9389757,132.796972 57.2342828,133.547981 C60.1423227,134.499472 59.5799238,139.200069 60.7527442,142.026113"
          id="Path-23"
        ></path>
        <path
          d="M123.180618,98.6096955 C128.490787,98.5251348 135.99784,94.0533976 139.111123,98.3560134 C142.156821,102.565224 135.862667,108.267147 133.526439,112.907811 C132.492218,114.96218 131.176775,119.231594 129.114575,118.213077 C124.242306,115.806674 122.21491,109.81583 118.765078,105.617206"
          id="Path-24"
        ></path>
      </g>
    </g>
  </svg>
</div>


            
          
!
            
              .bird svg {
    max-width: 100%;
    height: 250px;
    width: auto;
    display: none;
    margin: 0 auto;
}

body {
    text-align: center;
    background: #FAFAFA;
    padding: 20px 20px 0;
}

.button {
    margin: 1rem auto 2rem;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1px;
	text-decoration: none;
	background: #2f2831;
	transition: 300ms background;
	padding: 1rem 2rem;
	text-align: center;
	color: #FFF;
	display: inline-block;
	border: none;
	min-width: 200px;
	cursor: pointer;
	width: auto;
}

            
          
!
            
              (() => {
    /**
     * Animate all the SVG paths as a generator
     *
     * @link https://jakearchibald.com/2013/animated-line-drawing-svg/
     */
    function* draw(element, time = "1s") {
        // Gather all the paths in the SVG
        const paths = Array.from(element.querySelectorAll("path"));
        // Loop around the paths and prepare their strokeDashOffset
        for (let path of paths) {
            const length = path.getTotalLength();
            path.style.transition = path.style.WebkitTransition = "none";
            path.style.strokeDasharray = length + " " + length;
            path.style.strokeDashoffset = length;
            path.getBoundingClientRect();
            path.style.transition = path.style.WebkitTransition = `stroke-dashoffset ${time} ease-in-out`;
        }
        // Yield to kick off the generator
        yield;
        // Loop once again, but yield after triggering each animation
        for (let path of paths) {
            path.style.strokeDashoffset = "0";
            yield path;
        }
    }
    const rand = (min, max) =>
    Math.floor(Math.random() * (max - min + 1)) + min;
    /**
     * Pick a bird from all the SVGs
     *
     * First hide the birds, then show a random one and start drawing
     *
     * @params  birds array
     * @return  generator
     */
    const pickABird = birds => {
        birds.forEach(bird => {
            bird.style.display = "none";
        });
        const index = rand(0, birds.length - 1);
        const bird = birds[index];
        const gen = draw(bird);
        bird.style.display = "block";
        gen.next();
        return gen;
    };
    const birds = Array.from(document.querySelectorAll(".bird svg"));
    const controls = document.querySelector(".next-bird");
    let gen = pickABird(birds);
    if (controls) {
        controls.addEventListener("click", () => {
            // On click, proceed with the generator
            const result = gen.next();
            // A bit of tracking to see whether the birds are triggered
            if (typeof galite !== "undefined") {
                galite("send", "event", "Squiggle Birds", "Click");
            }
            // If the generator has finished, pick a new bird and start afresh
            if (result.done) {
                gen = pickABird(birds);
                gen.next();
            }
        });
    }
})();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console