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.

            
              
<button>Play again</button>
<div class="container">
<div>
<span class="rain">💧</span>
<span class="rain">💧</span>
<span class="rain">💧</span>
<span class="rain">💧</span>
  </div>
<svg class="cactus" viewBox="0 0 1284 801" xmlns="http://www.w3.org/2000/svg"  >
  <g id="shadow">
    <path id="inside-pot" d="M542.62 641.049c-22.834-64.72-38.456-117.645-32.079-118.893 6.377-1.247 56.324 42.985 79.158 107.706 22.834 64.721 12.504 120.559 6.127 121.807-6.377 1.247-30.372-45.899-53.206-110.62z" fill="#cecece" stroke="#bfbfc6" stroke-opacity="0" stroke-width="2.5"/>
    <g id="big-cactus" fill="#cecece" stroke="#bfbfc6" stroke-opacity="0" stroke-width="2.5">
      <g id="large-arm">
        <path d="M360.772 613.13c-15.557-9.722-37.264-6.762-61.18.75 0 0-96.701 50.709-124.741 49.769-28.041-.939-54.497-35.302-43.503-55.405 16.867-30.841 140.15-47.772 184.924-53.744 52.202-6.964 113.061 47.391 99.656 51.647-17.324 5.077-35.576 7.75-55.156 6.983z"/>
        <path d="M367.712 612.765c-13.658-10.075-45.227-14.689-69.888-2.836 0 0-99.666 44.084-126.863 45.031-27.196.946-49.21-23.492-36.316-39.353 19.78-24.332 141.645-44.429 185.885-51.594 51.58-8.355 108.989 38.065 95.475 42.078-17.419 4.865-29.315 6.097-48.293 6.674z"/>
        <path d="M374.171 611.716c-7.281-5.985-45.511-20.894-78.901-7.493 0 0-103.436 35.663-129.559 39.007-26.124 3.344-42.488-8.475-27.181-18.942 23.484-16.059 143.547-40.181 187.108-48.863 50.789-10.122 96.323 28.256 82.67 31.959-17.539 4.597-15.037 4.395-34.137 4.332z"/>
        <path d="M348.41 591.608c-11.583-1.603-31.677-.376-56.221 5.734 0 0-106.728 28.307-131.914 33.745-25.186 5.437-36.618 4.64-19.202-1.118 26.719-8.832 125.856-34.534 168.824-44.54 50.098-11.667 98.43 21.642 84.657 25.075-17.645 4.362-28.022-14.021-46.144-18.896z"/>
      </g>
      <g id="large-body">
        <path d="M185.452 743.391c-20.058-44.809 58.726-101.241 172.973-132.025 77.315-20.833 175.36-21.518 222.03-6.677 25.06 7.969 21.485 14.512 30.632 34.671 7.871 17.348 21.089 30.766 3.238 49.78-28.106 29.939-112.566 67.444-183.217 84.603-93.25 22.648-182.949 18.153-224.621-7.988-9.954-6.244-17.168-13.724-21.035-22.364z"/>
        <path d="M185.513 743.528c-15.396-34.395 66.888-83.008 181.419-113.156 77.508-20.402 173.383-25.935 217.597-16.582 23.741 5.023 19.634 10.377 26.681 25.844 6.064 13.31 17.721 23.243-1.507 39.18-30.275 25.093-116.329 59.037-186.98 76.196-93.25 22.648-180.483 23.662-218.753 5.122-9.141-4.428-15.489-9.972-18.457-16.604z"/>
        <path d="M185.56 743.633c-11.818-26.401 73.152-69.013 187.902-98.672 77.656-20.071 171.866-29.326 214.194-24.184 22.729 2.761 18.213 7.201 23.648 19.067 4.677 10.212 15.137 17.468-5.149 31.044-31.939 21.374-119.218 52.584-189.869 69.743-93.249 22.648-178.59 27.891-214.248 15.186-8.517-3.035-14.2-7.094-16.478-12.184z"/>
        <path d="M186.164 744.983c-8.063-18.014 79.726-54.329 194.705-83.475 77.811-19.724 170.273-32.884 210.623-32.161 21.667.388 16.722 3.871 20.466 11.958 3.221 6.96 12.425 11.41-8.97 22.507-33.686 17.472-122.249 45.813-192.9 62.972-93.25 22.648-176.604 32.328-209.521 25.745-7.863-1.573-12.848-4.073-14.403-7.546z"/>
        <path d="M187.289 747.495c-.058-.128 93.741-23.016 209.21-51.069 78.142-18.985 166.877-40.47 203.01-49.171 19.401-4.672 13.542-3.232 13.679-3.201.118.026 6.642-1.511-17.119 4.302-37.41 9.152-128.711 31.375-199.362 48.534-93.25 22.648-172.369 41.789-199.443 48.261-6.467 1.545-9.964 2.368-9.975 2.344z"/>
      </g>
    </g>
    <g id="small-cactus">
      <g id="small-body" fill="#cecece" stroke="#bfbfc6" stroke-opacity="0" stroke-width="2.5">
        <path d="M397.309 636.3c-13.879-39.339 16.697-79.461 68.237-89.541 28.646-5.603 76.886-6.54 99.155 5.702 17.798 9.785 25.829 29.123 33.475 46.272 6.67 14.959 12.051 35.876 4.294 50.14-10.976 20.181-55.51 33.201-86.63 40.439-50.863 11.829-104.652-13.674-118.531-53.012z"/>
        <path d="M397.939 638.085c-10.947-31.026 22.01-64.4 73.551-74.48 28.645-5.603 76.293-8.22 97.404.742 16.873 7.163 23.446 22.368 29.792 35.832 5.536 11.744 9.385 28.318.738 40.063-12.233 16.616-57.068 28.784-88.268 35.794-50.994 11.458-102.271-6.925-113.217-37.951z"/>
        <path d="M398.927 640.888c-6.842-19.395 29.447-43.325 80.987-53.406 28.645-5.602 75.464-10.57 94.955-6.199 15.579 3.494 20.111 12.916 24.638 21.223 3.949 7.246 5.654 17.744-4.236 25.963-13.994 11.628-59.249 22.604-90.561 29.296-51.177 10.937-98.94 2.518-105.783-16.877z"/>
        <path d="M398.731 640.332c-2.495-7.071 37.324-20.997 88.864-31.077 28.646-5.603 74.586-13.061 92.361-13.553 14.207-.394 16.578 2.901 19.177 5.744 2.267 2.48 1.701 6.54-9.507 11.024-15.858 6.344-61.558 16.057-92.989 22.411-51.373 10.386-95.411 12.523-97.906 5.451z"/>
        <path d="M398.41 639.422c.027.077 41.893-8.045 93.434-18.126 28.645-5.602 74.076-14.504 90.856-17.818 13.411-2.649 14.528-2.908 16.009-3.234 1.292-.284-.592.041-12.564 2.358-16.94 3.278-62.899 12.259-94.399 18.417-51.485 10.066-93.363 18.327-93.336 18.403z"/>
      </g>
    </g>
    <g fill="#cecece" stroke="#bfbfc6" stroke-opacity="0" stroke-width="2.5">
      <path d="M667.778 724.489l171.169-52.079c13.973-68.052-30.826-173.19-65.954-170.131l-176.408 17.925c54.228 65.779 73.269 134.122 71.193 204.285z"/>
      <path d="M599.098 751.862s65.59-13.665 65.783-13.989c22.565-38.041-30.147-206.004-79.225-227.429-10.57-4.614-71.86 12.31-71.86 12.31 75.205 65.289 101.159 139.425 85.302 229.108z"/>
    </g>
  </g>
  <g id="cactus">
    <path id="inside-pot1" serif:id="inside-pot" d="M823.548 439.738c81.17 0 146.847 2.645 146.847 8.555 0 5.911-63.355 35.686-144.525 35.686-81.17 0-144.31-26.037-144.31-31.947 0-5.911 60.818-12.294 141.988-12.294z" fill="#92929a" stroke="#92929a" stroke-width="2.5"/>
    <g id="large-flower" class="flower" stroke="#fcdedb">
      <path d="M933.492 36.312c3.617.747 4.303 17.157 1.533 36.622-2.771 19.464-7.957 34.66-11.574 33.913-3.616-.748-4.303-17.157-1.532-36.622s7.957-34.661 11.573-33.913z" fill="#f0bdbc" stroke-width=".95"/>
      <path d="M918.214 33.336c5.134-.393 10.395 17.02 11.742 38.86 1.346 21.841-1.728 39.892-6.862 40.285-5.133.393-10.395-17.02-11.741-38.861-1.347-21.84 1.727-39.891 6.861-40.284z" fill="#f5bfbe"/>
      <path d="M900.674 38.741c5.882-1.554 14.693 14.418 19.664 35.646 4.971 21.227 4.231 39.723-1.651 41.277-5.882 1.555-14.693-14.418-19.664-35.645-4.971-21.228-4.231-39.724 1.651-41.278z" fill="#f1b5b4" stroke-width=".9"/>
      <path d="M888.562 46.443c-4.368 2.879 1.075 20.229 12.147 38.721 11.072 18.492 23.608 31.168 27.976 28.29 4.368-2.879-1.074-20.229-12.146-38.721-11.073-18.492-23.608-31.168-27.977-28.29z" fill="#f1b5b4"/>
      <path d="M877.87 58.361c-2.507 2.856 6.075 16.547 19.152 30.555 13.078 14.008 25.73 23.062 28.238 20.206 2.507-2.855-6.075-16.547-19.153-30.555-13.077-14.008-25.73-23.062-28.237-20.206z" fill="#f1b5b4"/>
      <path d="M943.553 42.176c2.374 1.426.068 15.982-5.148 32.484-5.215 16.502-11.377 28.742-13.752 27.316-2.374-1.426-.067-15.982 5.148-32.484 5.216-16.502 11.378-28.742 13.752-27.316z" fill="#f5c1c0"/>
      <path d="M873.003 69.365c-1.125 2.631 8.844 12.96 22.248 23.051 13.404 10.091 25.2 16.149 26.325 13.518 1.125-2.631-8.844-12.96-22.248-23.052-13.404-10.091-25.2-16.148-26.325-13.517z" fill="#f1b5b4"/>
      <path d="M949.516 49.467c1.4 1.757-2.662 14.047-9.066 27.428-6.404 13.38-12.74 22.817-14.14 21.059-1.4-1.757 2.662-14.047 9.066-27.428 6.404-13.38 12.74-22.817 14.14-21.059z" fill="#f7bdbc" stroke-width=".95"/>
      <path d="M872.242 78.97c-.153 2.293 9.974 9.698 22.6 16.526 12.627 6.828 23.002 10.511 23.156 8.219.153-2.293-9.974-9.697-22.601-16.526-12.626-6.828-23.002-10.511-23.155-8.219z" fill="#f1b5b4" stroke-width=".95"/>
      <path d="M952.404 57.138c.67 1.841-4.222 11.768-10.919 22.155-6.696 10.386-12.677 17.324-13.347 15.483-.671-1.841 4.222-11.769 10.918-22.155 6.697-10.387 12.678-17.325 13.348-15.483z" fill="#f5bfbe" stroke-width=".95"/>
      <path d="M874.179 86.969c.484 1.905 9.966 6.883 21.162 11.11 11.196 4.226 19.893 6.11 19.41 4.204-.484-1.905-9.966-6.883-21.162-11.11-11.196-4.226-19.893-6.11-19.41-4.204z" fill="#f1b5b4"/>
    </g>
    <g id="large-arm1" serif:id="large-arm" stroke="#dbe6d4" stroke-width="2.5">
      <path d="M890.409 273.211c15.957-8.956 19.441-28.431 18.447-51.681 0 0-27.129-102.598-17.217-125.744 9.913-23.145 57.312-30.847 76.692-13.128 29.731 27.183 10.086 137.836 2.751 177.948-8.553 46.768-89.525 74.912-90.134 61.86-.305-16.688 2.414-33.141 9.461-49.255z" fill="#cbdbce"/>
      <path d="M888.635 279.192c15.76-7.213 30.962-31.769 25.269-57.479 0 0-18.665-102.29-11.162-125.523 7.503-23.233 42.221-31.396 56.18-13.874 21.416 26.881 5.816 137.681.005 177.848-6.775 46.833-77.642 75.431-77.939 62.391-.035-16.679 2.317-27.186 7.647-43.363z" fill="#c7d3c7"/>
      <path d="M887.791 285.058c9.098-3.586 38.102-29.388 33.403-63.08 0 0-7.904-101.899-3.464-125.243 4.439-23.345 23.033-32.094 30.101-14.822 10.844 26.497.387 137.483-3.486 177.721-4.516 46.915-62.497 68.939-62.399 55.913.308-16.666-.252-14.481 5.845-30.489z" fill="#c7d3c7"/>
      <path d="M918.77 271.92c5.475-9.049 10.42-26.437 11.217-49.622 0 0 1.494-101.558 3.258-125 1.764-23.441 6.277-32.702 7.327-15.649 1.61 26.161-.45 120.246-2.631 160.546-2.543 46.986-55.646 73.5-55.202 60.487.608-16.656 24.774-17.606 36.031-30.762z" fill="#c7d3c7"/>
    </g>
    <g id="needle" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M962.987 97.141l4.062-9.456M962.54 96.752l-8.067-5.968"/>
    </g>
    <g id="needle1" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M934.527 71.569l4.062-9.456M934.079 71.179l-8.067-5.967"/>
    </g>
    <g id="needle2" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M900.929 90.063l4.062-9.456M900.482 89.674l-8.067-5.968"/>
    </g>
    <g id="needle3" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M937.502 135.547l-2.133-10.098M938.016 135.257l9.069-4.191"/>
    </g>
    <g id="needle4" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M945.829 206.69l-2.132-10.098M946.344 206.4l9.069-4.191"/>
    </g>
    <g id="needle5" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M975.888 210.862l-2.133-10.098M976.403 210.573l9.069-4.191"/>
    </g>
    <g id="needle6" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M910.086 257.477l-.271-11.321M909.488 257.228l-10.324-3.397"/>
    </g>
    <g id="needle7" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M979.739 107.382l10.145.38M979.924 106.786l2.369-10.329"/>
    </g>
    <g id="needle8" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M912.893 139.438l-8.965-4.945M913.02 138.826l2.93-10.173"/>
    </g>
    <g id="needle9" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M926.662 228.071l3.8-9.857M926.188 227.691l-8.495-5.776"/>
    </g>
    <g id="needle10" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M980.718 150.473l7.806-5.853M980.527 149.918l-3.943-9.12"/>
    </g>
    <g id="needle11" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M903.987 183.624l-8.545 3.12M903.731 183.142l-3.742-8.587"/>
    </g>
    <g id="needle12" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M958.383 238.325l9.416-1.929M958.431 237.736l.058-10.022"/>
    </g>
    <g id="needle13" class="needle" fill="none" stroke="#babac2" stroke-width="4">
      <path d="M957.956 280.253l9.542.935M958.161 279.702l2.77-9.606"/>
    </g>
    <g>
      <g id="large-body1" serif:id="large-body">
        <path d="M785.034 125.515c57.173-3.684 105.301 81.885 115.202 190.355 6.701 73.406-14.993 158.622-43.113 194.546-15.099 19.29-21.956 14.189-47.706 15.953-22.158 1.518-40.933 8.874-59.145-12.42-28.674-33.526-53.296-118.227-57.215-184.731-5.174-87.777 20.682-164.173 60.913-192.306 9.61-6.721 20.04-10.687 31.064-11.397z" fill="#cbdbcd" stroke="#a7b7ac" stroke-width="2.5"/>
        <path d="M784.86 125.526c43.885-2.828 82.037 83.384 91.126 191.906 6.151 73.441-9.357 158.259-30.476 193.732-11.34 19.048-16.679 13.849-36.442 15.227-17.007 1.187-31.335 8.256-45.621-13.291-22.492-33.924-42.569-118.918-46.488-185.422-5.174-87.777 13.653-163.72 44.185-191.229 7.293-6.571 15.254-10.378 23.716-10.923z" fill="#cad9cc" stroke="#a7b7ac" stroke-width="2.5"/>
        <path d="M784.726 125.534c33.685-2.17 64.181 84.535 72.646 193.097 5.729 73.469-5.03 157.981-20.776 193.107-8.454 18.862-12.628 13.588-27.796 14.671-13.054.931-23.967 7.78-35.239-13.96-17.748-34.23-34.336-119.449-38.256-185.953-5.173-87.777 8.258-163.372 31.346-190.401 5.514-6.457 11.58-10.142 18.075-10.561z" fill="#c7d3c7" stroke="#a7b7ac" stroke-width="2.5"/>
        <path d="M783.003 125.645c22.984-1.48 45.445 85.742 53.257 194.347 5.286 73.497-.492 157.688-10.599 192.451-5.427 18.666-8.378 13.314-18.725 14.086-8.905.664-16.237 7.282-24.347-14.662-12.769-34.551-25.697-120.005-29.616-186.509-5.174-87.777 2.596-163.008 17.873-189.534 3.649-6.336 7.726-9.893 12.157-10.179z" fill="#c7d3c7" stroke="#a7b7ac" stroke-width="2.5"/>
        <clipPath id="_clip1">
          <path d="M779.798 125.852c.164-.011 5.493 88.316 11.909 197.01 4.342 73.558 9.188 157.065 11.105 191.053 1.029 18.251.685 12.73.617 12.84-.058.094.248 6.22-1.119-16.158-2.153-35.235-7.276-121.192-11.195-187.697-5.174-87.776-9.475-162.229-10.855-187.682-.33-6.08-.493-9.364-.462-9.366z"/>
        </clipPath>
        <g clip-path="url(#_clip1)">
          <use xlink:href="#_Image2" x="788.2" y="125.934" width="23.744" height="401.739" transform="matrix(.98934 0 0 .99935 0 0)"/>
        </g>
        <path d="M779.798 125.852c.164-.011 5.493 88.316 11.909 197.01 4.342 73.558 9.188 157.065 11.105 191.053 1.029 18.251.685 12.73.617 12.84-.058.094.248 6.22-1.119-16.158-2.153-35.235-7.276-121.192-11.195-187.697-5.174-87.776-9.475-162.229-10.855-187.682-.33-6.08-.493-9.364-.462-9.366z" fill="none" stroke="#a7b7ac" stroke-width="2.5"/>
      </g>
      <g id="needle14" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M819.704 184.238l10.601-8.698M819.401 183.47l-6.098-12.563"/>
      </g>
      <g id="needle15" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M829.31 138.409l11.168-7.884M829.06 137.621l-5.224-12.987"/>
      </g>
      <g id="needle16" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M837.759 310.125l11.168-7.884M837.51 309.337l-5.225-12.987"/>
      </g>
      <g id="needle17" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M860.726 414.353l.518-14.079M859.97 414.097l-13.107-3.27"/>
      </g>
      <g id="needle18" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M786.329 182.538l.518-14.079M785.574 182.283l-13.108-3.27"/>
      </g>
      <g id="needle19" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M789.665 234.093l11.982-6.448M789.506 233.279l-3.718-13.542"/>
      </g>
      <g id="needle20" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M727.785 210.161l8.551-10.888M727.33 209.481l-8.551-10.889"/>
      </g>
      <g id="needle21" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M695.496 316.743l1.534-13.997M694.761 316.429l-12.834-4.297"/>
      </g>
      <g id="needle22" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M754.382 247.247l8.552-10.889M753.927 246.566l-8.551-10.889"/>
      </g>
      <g id="needle23" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M730.789 402.24l8.552-10.888M730.335 401.559l-8.552-10.888"/>
      </g>
      <g id="needle24" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M833.302 250.518l8.552-10.888M832.848 249.837l-8.552-10.888"/>
      </g>
      <g id="needle25" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M881.859 215.933l12.568-5.081M881.783 215.106l-2.321-13.878"/>
      </g>
      <g id="needle26" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M733.146 159.904l4.658-13.22M732.503 159.417l-11.497-7.349"/>
      </g>
      <g id="needle27" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M739.465 305.265l4.658-13.22M738.822 304.778l-11.497-7.349"/>
      </g>
      <g id="needle28" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M848.639 182.425l4.237-13.374M847.98 181.961l-11.723-6.948"/>
      </g>
      <g id="needle29" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M875.664 276.791l4.237-13.374M875.006 276.326l-11.723-6.948"/>
      </g>
      <g id="needle30" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M754.667 437.608l11.676-7.033M754.471 436.804l-4.327-13.343"/>
      </g>
      <g id="needle31" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M783.071 126.617l7.335-11.819M782.547 125.993l-9.661-9.822"/>
      </g>
      <g id="needle32" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M787.494 282.056l11.676-7.033M787.298 281.252l-4.327-13.343"/>
      </g>
      <g id="needle33" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M750.968 177.52l11.676-7.034M750.772 176.715l-4.327-13.343"/>
      </g>
      <g id="needle34" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M756.79 352.262l11.676-7.033M756.594 351.458l-4.327-13.343"/>
      </g>
      <g id="needle35" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M701.344 243.41l6.411-12.392M700.774 242.832l-10.379-8.985"/>
      </g>
      <g id="needle36" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M703.326 380.072l3.194-13.687M702.634 379.665l-12.22-5.939"/>
      </g>
    </g>
    <g>
      <g id="small-cactus1" serif:id="small-cactus">
        <g id="small-flower" class="flower" stroke="#f1b5b4">
          <path d="M793.86 336.004c2.609-2.131 10.458 3.808 17.515 13.253 7.058 9.446 10.67 18.845 8.061 20.976-2.61 2.131-10.458-3.807-17.516-13.253-7.057-9.446-10.669-18.845-8.06-20.976z" fill="#f0d5d3"/>
          <path d="M801.475 329.265c2.485-1.379 8.866 6.096 14.242 16.683 5.376 10.587 7.724 20.302 5.239 21.681-2.485 1.379-8.867-6.096-14.242-16.683-5.376-10.587-7.724-20.302-5.239-21.681z" fill="#fcdfdc"/>
          <path d="M789.457 342.639c-1.567 2.443 4.892 9.845 14.415 16.52 9.522 6.675 18.525 10.11 20.092 7.667 1.566-2.443-4.893-9.845-14.415-16.52-9.523-6.675-18.526-10.11-20.092-7.667z" fill="#fcdfdc" stroke-width="1.5"/>
          <path d="M809.762 327.228c1.971-.46 5.847 7.569 8.651 17.92 2.804 10.35 3.48 19.127 1.509 19.588-1.971.46-5.848-7.569-8.651-17.919-2.804-10.351-3.48-19.128-1.509-19.589z" fill="#fcdfdc" stroke-width="1.5"/>
          <path d="M786.671 351.049c-.64 2.003 6.603 6.856 16.163 10.832 9.561 3.975 17.843 5.576 18.483 3.573.64-2.002-6.603-6.856-16.164-10.831-9.56-3.975-17.842-5.577-18.482-3.574z" fill="#f0d5d3"/>
          <path d="M816.06 327.836c1.495.164 3.474 7.958 4.417 17.394.942 9.435.493 16.963-1.002 16.798-1.495-.164-3.475-7.958-4.417-17.394-.942-9.435-.494-16.963 1.002-16.798z" fill="#fcdfdc"/>
          <path d="M786.604 357.661c.003 1.572 7.216 4.428 16.097 6.374 8.881 1.946 16.089 2.249 16.086.677-.004-1.572-7.217-4.428-16.098-6.373-8.881-1.946-16.088-2.25-16.085-.678z" fill="#f0d5d3"/>
          <path d="M820.614 330.099c1.079.554 1.692 7.623 1.367 15.775-.324 8.152-1.464 14.32-2.543 13.766-1.079-.554-1.692-7.623-1.367-15.775.324-8.152 1.464-14.32 2.543-13.766z" fill="#fcdfdc"/>
          <path d="M788.291 362.629c.417 1.179 7.08 2.54 14.869 3.037 7.789.497 13.775-.057 13.358-1.236-.417-1.179-7.079-2.54-14.869-3.037-7.789-.497-13.774.057-13.358 1.236z" fill="#f0d5d3" stroke-width="1.5"/>
          <path d="M823.711 333.261c.731.764.42 6.845-.695 13.57-1.116 6.726-2.616 11.566-3.347 10.802-.732-.764-.421-6.845.695-13.571 1.115-6.725 2.615-11.565 3.347-10.801z" fill="#fcdfdc"/>
          <path d="M790.983 366.174c.652.839 6.469 1.137 12.982.666 6.514-.472 11.272-1.537 10.62-2.376-.652-.839-6.47-1.138-12.983-.666-6.513.472-11.271 1.536-10.619 2.376z" fill="#f0d5d3" stroke-width=".95"/>
        </g>
        <g id="small-arm" fill="#c7d3c7" stroke="#a7b7ac" stroke-width="2.5">
          <path d="M950.156 374.823c11.103-6.23 25.537-.813 32.213 12.09 6.675 12.902 3.081 28.435-8.021 34.665-11.103 6.23-25.537.813-32.213-12.09-6.676-12.902-3.082-28.435 8.021-34.665z"/>
          <path d="M957.008 386.821c8.527-7.221 19.13-8.332 23.663-2.48 4.533 5.851 1.291 16.465-7.235 23.685-8.527 7.221-19.13 8.332-23.663 2.48-4.533-5.852-1.291-16.465 7.235-23.685z"/>
          <path d="M963.7 391.924c7.679-4.877 15.631-7.783 17.747-6.486 2.116 1.297-2.4 6.31-10.079 11.187-7.678 4.877-15.63 7.783-17.746 6.486-2.116-1.297 2.4-6.309 10.078-11.187z"/>
        </g>
        <g id="small-body1" serif:id="small-body" stroke="#a7b7ac" stroke-width="2.5">
          <path d="M870.611 338.879c49.337 0 89.393 38.783 89.393 86.553 0 26.55-9.97 68.662-29.443 84.224-15.563 12.438-40.094 13.486-61.968 14.869-19.08 1.207-44.855-.525-59.81-11.614-21.158-15.69-26.214-58.284-27.564-87.479-2.208-47.717 40.055-86.553 89.392-86.553z" fill="url(#_Linear3)"/>
          <path d="M868.372 338.879c38.912 0 70.504 38.783 70.504 86.553 0 26.55-7.863 68.662-23.221 84.224-12.275 12.438-31.623 13.486-48.874 14.869-15.049 1.207-35.378-.525-47.172-11.614-16.687-15.69-20.675-58.284-21.74-87.479-1.741-47.717 31.591-86.553 70.503-86.553z" fill="url(#_Linear4)"/>
          <path d="M864.857 338.879c24.324 0 44.073 38.783 44.073 86.553 0 26.55-4.916 68.662-14.516 84.224-7.673 12.438-19.768 13.486-30.552 14.869-9.407 1.207-22.115-.525-29.488-11.614-10.431-15.69-12.924-58.284-13.59-87.479-1.088-47.717 19.748-86.553 44.073-86.553z" fill="#c7d3c7"/>
          <path d="M865.554 338.879c8.869 0 16.069 38.783 16.069 86.553 0 26.55-1.792 68.662-5.292 84.224-2.798 12.438-7.208 13.486-11.14 14.869-3.43 1.207-8.064-.525-10.752-11.614-3.803-15.69-4.712-58.284-4.955-87.479-.397-47.717 7.2-86.553 16.07-86.553z" fill="#c7d3c7"/>
          <path d="M866.695 338.879c-.096 0-.174 38.783-.174 86.553 0 26.55.019 68.662.057 84.224.031 12.438.078 13.486.121 14.869.037 1.207.087-.525.116-11.614.041-15.69.051-58.284.054-87.479.004-47.717-.078-86.553-.174-86.553z" fill="#c7d3c7"/>
        </g>
      </g>
      <g id="needle37" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M880.932 442.426l10.6-8.698M880.629 441.658l-6.098-12.564"/>
      </g>
      <g id="needle38" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M887.975 340.826l10.6-8.698M887.672 340.058l-6.098-12.563"/>
      </g>
      <g id="needle39" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M900.805 372.948l11.168-7.884M900.555 372.16l-5.224-12.987"/>
      </g>
      <g id="needle40" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M802.525 468.842l8.552-10.889M802.071 468.161l-8.552-10.888"/>
      </g>
      <g id="needle41" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M851.317 475.367l8.552-10.888M850.863 474.686l-8.552-10.888"/>
      </g>
      <g id="needle42" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M905.36 470.1l8.552-10.889M904.905 469.419l-8.551-10.888"/>
      </g>
      <g id="needle43" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M846.435 381.881l8.551-10.889M845.98 381.2l-8.552-10.888"/>
      </g>
      <g id="needle44" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M938.391 448.782l11.33-7.627M938.158 447.988l-4.951-13.103"/>
      </g>
      <g id="needle45" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M848.269 342.501l11.33-7.626M848.035 341.708l-4.951-13.104"/>
      </g>
      <g id="needle46" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M803.891 391.283l4.658-13.221M803.248 390.795l-11.497-7.348"/>
      </g>
      <g id="needle47" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M934.265 395.871l4.238-13.374M933.607 395.407l-11.723-6.948"/>
      </g>
      <g id="needle48" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M956.051 372.844l3.114-9.826M955.568 372.502l-8.613-5.104"/>
      </g>
      <g id="needle49" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M973.725 381.303l10.131-.668M973.85 380.692l1.344-10.521"/>
      </g>
      <g id="needle50" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M977.649 417.455l3.558 9.308M978.211 417.393l9.425-1.838"/>
      </g>
      <g id="needle51" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M821.216 438.28l11.676-7.034M821.02 437.475l-4.327-13.343"/>
      </g>
      <g id="needle52" class="needle" fill="none" stroke="#babac2" stroke-width="4">
        <path d="M792.201 488.699l3.194-13.687M791.509 488.292l-12.219-5.939"/>
      </g>
    </g>
    <g>
      <path d="M697.425 518.968l21.824 164.337c76.633 32.931 210.26 26.25 214.733-5.142l19.448-158.431c-89.615 26.895-174.165 22.498-256.005-.764z" fill="#b8b7d5" stroke="#92929a" stroke-width="2.5"/>
      <path d="M681.071 451.049s.981 61.047 1.317 61.313c39.453 31.201 248.603 36.877 285 .879 7.839-7.752 2.048-66.068 2.048-66.068-93.855 45.232-186.787 45.057-288.365 3.876z" fill="#b8b7d5" stroke="#92929a" stroke-width="2.5"/>
      <g id="face">
        <path id="mouth" d="M792.958 628.631c7.135-6.088 49.509-5.541 56.498.729 6.99 6.27-7.427 30.804-14.562 36.892-7.135 6.088-21.26 5.905-28.249-.365-6.99-6.27-20.823-31.168-13.687-37.256z" fill="#f8c8c8"/>
        <clipPath id="_clip5">
          <path d="M792.958 628.631c7.135-6.088 49.509-5.541 56.498.729 6.99 6.27-7.427 30.804-14.562 36.892-7.135 6.088-21.26 5.905-28.249-.365-6.99-6.27-20.823-31.168-13.687-37.256z"/>
        </clipPath>
        <g clip-path="url(#_clip5)">
          <ellipse id="tongue" cx="820.703" cy="661.743" rx="16.48" ry="8.918" fill="#fcdfdc"/>
        </g>
        <ellipse class="cheek" cx="902.971" cy="624.238" rx="22.27" ry="3.964" fill="#fcdedb" fill-opacity=".52"/>
        <ellipse class="cheek"  cx="753.428" cy="620.113" rx="23.755" ry="5.405" fill="#fcdedb" fill-opacity=".47"/>
        <g id="l-eye" class="eye">
          <path d="M788.417 593.63a17.656 17.656 0 0 1-6.386 1.179c-10.515 0-19.052-8.97-19.052-20.017 0-11.048 8.537-20.017 19.052-20.017 10.515 0 19.052 8.969 19.052 20.017 0 3.54-.876 6.867-2.425 9.753-.245-4.553-3.942-8.162-8.455-8.162-4.697 0-8.51 3.909-8.51 8.724 0 4.183 2.879 7.683 6.724 8.523z" fill="#6a6a6e" stroke="#68686a" stroke-width=".95"/>
          <path d="M788.633 593.677c-3.845-.84-6.725-4.34-6.725-8.523 0-4.815 3.813-8.724 8.51-8.724 4.514 0 8.211 3.609 8.455 8.162-2.23 4.202-5.866 7.471-10.24 9.085z" fill="#c0c6cf"/>
        </g>
        <g id="r-eye" class="eye">
          <path d="M874.802 594.121a17.656 17.656 0 0 1-6.386 1.179c-10.515 0-19.052-8.969-19.052-20.017 0-11.047 8.537-20.017 19.052-20.017 10.515 0 19.052 8.97 19.052 20.017 0 3.54-.877 6.867-2.426 9.753-.244-4.552-3.941-8.161-8.454-8.161-4.697 0-8.511 3.908-8.511 8.723 0 4.183 2.88 7.683 6.725 8.523z" fill="#6a6a6e" stroke="#68686a" stroke-width=".95"/>
          <path d="M875.018 594.168c-3.845-.84-6.725-4.34-6.725-8.523 0-4.815 3.813-8.723 8.51-8.723 4.513 0 8.211 3.609 8.455 8.161-2.23 4.202-5.866 7.472-10.24 9.085z" fill="#dde2ea"/>
        </g>
      </g>
      <path d="M700.999 521.364l12.343 4.561 42.816 169.379-35.507-11.797-19.652-162.143zM968.061 449.959l-17.161 6.614-59.531 245.662c13.459-3.032 27.127-8.434 41.247-18.946 3.132-55.794 11.261-94.702 17.463-153.99 1.173-11.223 13.351-9.614 16.249-19.374 5.723-19.27 2.959-47.633 1.733-59.966z" fill="#cfc2d9" fill-opacity=".33"/>
      <path d="M683.559 453.263l10.945 4.331 19 66.89c-9.891-2.491-19.389-6.173-28.022-12.472l-1.923-58.749z" fill="#cfc2d9" fill-opacity=".18"/>
    </g>
  </g>
  <defs>
    <image id="_Image2" width="24" height="402" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAGSCAYAAAD5KwHyAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADwklEQVR4nO3dQW7jMAwFUGLuf7Gk6wnQZY/RWLa6UJomji1TFL8jGZ/LwaAPbET/KMRk5PL1GQVY/5A/fB8gxgkLDMOABcIIBqYJ/CuCvwYxQsdgB0BEBDnNB5hkAgQ6AcZpxAIBGDq3DgIMEBGR8+WMfdhNE+6RfTtFYAAZOvc5QIXOQSaZAIFOgDBiHtl/QMCEzh0YQR3c6/QfEzr3DlA3nf1OESp0njpAhM6BJpkAgU6AAZAJT8AIB4B3NRHBhM5TB4jQmQHuP39+TP2FlznwDp2DTTIBAp0Aw/CNBULwvYi8ADuEzgn7sPO+J+wPeNci4Bk6B5xkAgR8AM83wYvAMFyxAOrzu3udLx/YZxH8NfDMhPcAIn6ZcNBJJkCgE8DrbfwqEJxCZ72DEXwR8drzr3bgtefPnCIw4BU62TnwCJ0DTzIBAp0AHveEPOCwcskCXez5sx143HTyp8ghEvIdOAibc1AbOgefZAIEOgGGUHcR2QRqVy6bwNT6nn+zg9rQUQBVP19zTOsE1RzUhM77B40AAQKprhV7fhUwVoSODmh5z6/qoObDqTYAEXsmtDEHBAgQSDUZ3wSrAevKRQ+0uudXdxCNXxigB4z3BD1gDJ2iObCETjuDRoAAgVSWLXkREAwfr8E7KKqz4dOvog4mwyO78BSBAUvoFM9Baei0NWgECBBIVXpPKAcK9/zFQHN7/uIOSlcu5aeoMBLKOygUTHNQEjrtDRoBAgRSlez5TUDJnt8E7LDn169cTB2U3BOMgP7vGo8puAMRfei0OWgECHQD6KbZDFyVKxczoN3z24FWQsfcgTZ02gVEdJnQ8qARIEBARETzpfRVgGblUge0sOev6kCz568DFO8s6gBF6FTPwVbotD1oBAgQSLW1Ja8GtkIH3kF1be35qzvY2vM7nCIwsBU6LnOQC532B40AAQKpcmt4HyDzH4i5APDQye35XTrI7fl9TlEmEnw6yAhuc7AWOn0MGgECBFKt7fndgLU9vxvwtj2/Wwdr9wRHYPnPHY8puAOR5dDpZ9AIEOgEWHoL6QosfYWyK7C05/cF3hE6vi/yQij0BYi8ZkJfg0aAAIFU8z2/OzC/6bgD8H/lMt/zu3cw3/P7A7N3Fv5ABAMiz6HT36ARIEAg1ePCAgI87vnhHUDqcc8P6eBxzw86RWAg4jv4C50+B40AAQKpfvf8OGAEA7vt+WEd/O75cafoFgm4Dm4CdA4uX5+x30EjQIBAqmG4YoEwBiww4b9E5oR92MUYsb8iOCDS+xwQUNUP+EAh55hZ6qcAAAAASUVORK5CYII="/>
    <linearGradient id="_Linear3" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(178.868 0 0 185.976 781.136 431.867)">
      <stop offset="0" stop-color="#c7d3c7"/>
      <stop offset=".64" stop-color="#c8d5c8"/>
      <stop offset=".83" stop-color="#cad9cc"/>
      <stop offset="1" stop-color="#ccded0"/>
    </linearGradient>
    <linearGradient id="_Linear4" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(141.072 0 0 185.976 797.803 431.867)">
      <stop offset="0" stop-color="#c7d3c7"/>
      <stop offset=".64" stop-color="#c8d5c8"/>
      <stop offset=".83" stop-color="#cad9cc"/>
      <stop offset="1" stop-color="#ccded0"/>
    </linearGradient>
  </defs>
</svg>


</div>
            
          
!
            
              body {
	background-color: #16181D;
	background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
  display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.container {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
svg {
  max-width: 800px;
  width: 100%;
  background: linear-gradient(to right, rgba(203,212,189,1) 0%, rgba(211,219,198,1) 34%, rgba(219,227,204,1) 68%, rgba(224,230,214,1) 100%);
}

button {
  background: #cbdbcd;
  border: 2px solid #f1b5b4;
  color: #92929a;
  font-weight: bold;
  padding: 15px 10px;
  margin-top: 20px;
  transition: 0.3s ease-in;
}
button:hover {
  background: #92929a;
  color: #cbdbcd;
}
.rain {
  position: absolute;
  left: 60vw;
  top: 15vh;
  z-index:1;
}
            
          
!
            
              //gsap.to()... infinity and beyond!
gsap.set('.rain', { xPercent: -50, yPercent: -50, opacity: 0 })
CustomWiggle.create("funWiggle", {wiggles: 8, type: "anticipate"});
gsap.set(".needle, .flower",{transformOrigin:"50% 100%", scale: 0.1})

let tl = gsap.timeline({defaults: { duration: 1, ease: "elastic" }});
tl.addLabel("start")
tl.to(".rain",{
    translateY: 200,
    opacity: 0.7,
    ease: "power2.out",
    stagger: {
      amount: 1, 
    }
  },"start")
.to(".rain",{
  opacity: 0,
  ease: "power2.out",
    stagger: {
      amount: 0.2, 
    }
  },"start+=0.8")
  .to("#mouth",{
  transformOrigin:"50% 100%",
    scale: 0.4, 
    ease: "power2.out",
  },"start+=0.8")
.to(".cheek",{
  transformOrigin:"50% 100%",
    scale: 0.4, 
    ease: "power2.out",
  },"start+=0.8")
.to("#cactus",{
  duration: 1,
  transformOrigin:"50% 100%",
    rotate: 5,
    scaleY: 0.9,
    ease: "funWiggle",
  },"start+=0.8")
.to("#shadow",{
  duration: 1,
  scaleX: 1.2,
  transformOrigin:"50% 100%",
    rotate: -5, 
    ease: "funWiggle",
  },"start+=0.8")
.to("#tongue",{
  transformOrigin:"50% 100%",
    scale: 0.1, 
    ease: "power2.out",
  },"start+=0.8")
.to(".eye", {
  transformOrigin:"50% 50%",
    scaleX: 0.6,
    scaleY: 0.4,
    ease: "power2.out",
  },"start+=.5")
.to(".needle",{
    scale: 1,
    delay:0.5,
    stagger: {
      amount: 0.5, 
      from: "center"
    }
  },"start+=1")
.to(".flower",{
    scale: 1, 
    delay:0.5,
    stagger: {
      amount: 0.5, 
      from: "center"
    }
  },"start+=1.3")
.to("#mouth",{
  transformOrigin:"50% 100%",
    scale: 0.9, 
    ease: "power2.out",
  },"start+=1.5")
.to(".cheek",{
  transformOrigin:"50% 100%",
    scaleY: 0.9,
    scaleX: 0.7, 
    ease: "power2.out",
  },"start+=1.5")
.to("#tongue",{
  transformOrigin:"50% 100%",
    scale: 0.8, 
    ease: "power2.out",
  },"start+=1.5")
.to(".eye", {
  transformOrigin:"50% 50%",
    scaleX: 1,
    scaleY: 1,
    rotate: 0,
    ease: "power2.out",
  },"start+=1.5")

document.querySelector('button').addEventListener("click", () => {
 tl.restart();
})

            
          
!
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