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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" viewBox="105.645 203.605 361 361">
  <defs>
    <clipPath id="frameClip">
      <circle cx="286.645" cy="384.605" r="175"/>
    </clipPath>
  </defs>
  <g clip-path="url(#frameClip)">
    <g class="bg">
      <rect width="383.624" height="359.468" x="102.525" y="195.83"/>
      <path d="M104.417 338.038s40.113 3.445 62.376-.399c22.264-3.845 99.122-23.236 116.457-24.676 17.334-1.439 51.337-2.806 86.053 2.696 34.716 5.502 53.892 23.461 70.137 22.959 16.245-.503 43.727 15.876 43.727 15.876l1.193 201.427-198.765 15.433-164.764-27.841-16.414-205.475Z"/>
      <path d="M117.032 298.155s52.338-11.743 80.286 5.613c27.949 17.355 35.602 43.449 71.49 43.479 35.888.031 97.222 19.352 142.801-11.938 45.579-31.29 55.301-26.429 64.384-27.578 9.083-1.148 3.525 245.49 3.525 245.49l-196.78 15.611-159.333-25.504-15.458-176.191 9.085-68.982Z" />
      <path d="M107.74 368.182c2.858-.222 47.181 9.483 91.335 9.851 41.901.35 53.188-5.485 92.543-6.146 41.539-.699 68.364 8.749 113.309 5.889 45.213-2.877 54.503-11.944 62.599-11.083 8.096.862-10.83 185.667-10.83 185.667l-175.478 12.692-160.57-22.431s-15.766-174.216-12.908-174.439Z" />
      <path d="m106.998 445.812-2.797-21.411s11.611-3.295 64.964-.953c47.514 2.085 82.576 14.514 94.141 13.897 11.565-.618 75.868 10.542 88.693 11.156 31.858 1.526 57.707-3.287 79.866-6.76 31.605-4.955 36.043-1.219 36.043-1.219l-1.583 104.539-181.845 24.316-163.184-24.828-14.298-98.737Z" />
    </g>
    <g class="snow">
      <circle cx="301.5" cy="201.5" r="1.5"/>
      <circle cx="203.632" cy="203.5" r="3.5"/>
      <circle cx="121.5" cy="201.5" r="1.5"/>
      <circle cx="355.175" cy="202.5" r="2.5"/>
      <circle cx="196.632" cy="202.5" r="2.5"/>
      <circle cx="221.5" cy="201.5" r="1.5"/>
      <circle cx="167.5" cy="201.5" r="1.5"/>
      <circle cx="261.5" cy="201.5" r="1.5"/>
      <circle cx="227.632" cy="203.5" r="3.5"/>
      <circle cx="280.175" cy="202.5" r="2.5"/>
    </g>
    <g class="tree">
      <path d="M307.991 418.982c0-4.713-3.826-8.539-8.538-8.539h-25.615c-4.713 0-8.538 3.826-8.538 8.539v54.12c0 4.713 3.825 8.539 8.538 8.539h25.615c4.712 0 8.538-3.826 8.538-8.539v-54.12Z" style="stroke-width:3px"/>
      <g class="tree__layer">
        <path d="M285.912 320.193c3.951 33.491 3.455 66.297-1.49 98.419-5.324 34.593-12.434 51.204-21.329 49.835-8.895-1.369-10.681-19.35-5.356-53.942 4.944-32.122 14.335-63.559 28.175-94.312Z" style="stroke-width:3px;"/>
        <path d="M290.142 320.193c26.014 21.46 48.341 45.502 66.982 72.124 20.075 28.67 26.427 45.587 19.054 50.749-7.372 5.162-21.096-6.592-41.171-35.262-18.641-26.623-33.596-55.826-44.865-87.611Z" style="stroke-width:3px;"/>
        <path d="M288.201 320.193c18.356 28.289 32.421 57.932 42.194 88.928 10.524 33.38 11.495 51.423 2.911 54.13-8.583 2.706-18.137-12.631-28.662-46.011-9.773-30.996-15.254-63.345-16.443-97.047Z" style="stroke-width:3px;"/>
        <path d="M283.892 320.193c-6.303 33.129-16.641 64.268-31.016 93.416-15.48 31.391-27.256 45.096-35.328 41.115-8.071-3.981-4.367-21.666 11.113-53.057 14.374-29.148 32.785-56.306 55.231-81.474Z" style="stroke-width:3px;"/>
        <path d="M283.149 320.193c-11.269 31.785-26.224 60.988-44.865 87.611-20.076 28.67-33.799 40.424-41.172 35.262-7.372-5.162-1.021-22.079 19.054-50.749 18.642-26.622 40.969-50.664 66.983-72.124Z" style="stroke-width:3px;"/>
        <path d="M285.09 320.193c-1.189 33.702-6.671 66.051-16.444 97.047-10.524 33.38-20.078 48.717-28.662 46.011-8.583-2.707-7.613-20.75 2.912-54.13 9.773-30.996 23.838-60.639 42.194-88.928Z" style="stroke-width:3px;"/>
        <path d="M287.379 320.193c13.839 30.753 23.231 62.19 28.175 94.312 5.324 34.592 3.539 52.573-5.356 53.942-8.896 1.369-16.006-15.242-21.33-49.835-4.944-32.122-5.44-64.928-1.489-98.419Z" style="stroke-width:3px;"/>
        <path d="M289.399 320.193c22.446 25.168 40.856 52.326 55.231 81.474 15.48 31.391 19.184 49.076 11.112 53.057-8.072 3.981-19.848-9.724-35.328-41.115-14.374-29.148-24.713-60.287-31.015-93.416Z" style="stroke-width:3px;"/>
        <path d="M286.645 320.193c9 32.5 13.5 65 13.5 97.5 0 35-4.5 52.5-13.5 52.5s-13.5-17.5-13.5-52.5c0-32.5 4.5-65 13.5-97.5Z" style="stroke-width:3px;"/>
      </g>
      <g class="tree__layer">
        <path d="M287.814 313.025c14.254 24.22 24.886 49.41 31.896 75.57 7.549 28.173 7.701 43.23.456 45.171-7.244 1.941-14.641-11.175-22.19-39.347-7.009-26.161-10.397-53.292-10.162-81.394Z" style="stroke-width:2.83px;"/>
        <path d="M287.639 313.025c9.832 26.327 15.928 52.98 18.289 79.961 2.542 29.055.077 43.91-7.394 44.564-7.472.653-12.479-13.548-15.021-42.603-2.36-26.981-.985-54.288 4.126-81.922Z" style="stroke-width:2.83px;"/>
        <path d="M284.871 313.025c-4.649 27.716-12.696 53.847-24.142 78.392-12.326 26.434-21.888 38.067-28.685 34.897-6.798-3.17-4.033-17.972 8.293-44.406 11.446-24.545 26.291-47.506 44.534-68.883Z" style="stroke-width:2.83px;"/>
        <path d="M283.731 313.025c-9.39 26.488-21.853 50.824-37.387 73.009-16.729 23.892-28.166 33.687-34.31 29.385-6.143-4.301-.85-18.398 15.879-42.29 15.534-22.186 34.14-42.22 55.818-60.104Z" style="stroke-width:2.82px;"/>
        <path d="M286.651 313.025c5.111 27.634 6.487 54.941 4.126 81.922-2.542 29.055-7.549 43.256-15.02 42.603-7.472-.654-9.936-15.509-7.394-44.564 2.36-26.981 8.456-53.634 18.288-79.961Z" style="stroke-width:2.83px;"/>
        <path d="M285.477 313.025c.234 28.102-3.153 55.233-10.163 81.394-7.549 28.172-14.945 41.288-22.19 39.347-7.244-1.941-7.092-16.998.457-45.171 7.01-26.16 17.641-51.35 31.896-75.57Z" style="stroke-width:2.83px;"/>
        <path d="M288.42 313.025c18.243 21.377 33.087 44.338 44.533 68.883 12.327 26.434 15.091 41.236 8.294 44.406-6.797 3.17-16.359-8.463-28.686-34.897-11.445-24.545-19.493-50.676-24.141-78.392Z" style="stroke-width:2.83px;"/>
        <path d="M289.559 313.025c21.678 17.884 40.284 37.918 55.819 60.104 16.729 23.892 22.022 37.989 15.878 42.29-6.143 4.302-17.58-5.493-34.309-29.385-15.535-22.185-27.997-46.521-37.388-73.009Z" style="stroke-width:2.82px;"/>
      </g>
      <g class="tree__layer">
        <path d="M289.476 305.858c17.343 14.307 32.228 30.334 44.655 48.083 13.384 19.113 17.618 30.391 12.703 33.832-4.915 3.442-14.064-4.395-27.447-23.508-12.428-17.748-22.398-37.217-29.911-58.407Z" style="stroke-width:2.65px;"/>
        <path d="M286.145 305.858c6 21.667 9 43.333 9 65 0 23.333-3 35-9 35s-9-11.667-9-35c0-21.667 3-43.333 9-65Z" style="stroke-width:2.65px;"/>
        <path d="M287.798 305.858c14.091 17.518 25.428 36.225 34.009 56.119 9.242 21.425 11.108 33.326 5.599 35.702-5.509 2.377-12.885-7.147-22.127-28.572-8.581-19.895-14.408-40.978-17.481-63.249Z" style="stroke-width:2.65px;"/>
        <path d="M285.415 305.858c1.495 22.432.052 44.258-4.33 65.477-4.718 22.851-10.015 33.67-15.891 32.457-5.876-1.213-6.455-13.246-1.737-36.097 4.382-21.219 11.701-41.831 21.958-61.837Z" style="stroke-width:2.65px;"/>
        <path d="M283.814 305.858c-7.512 21.19-17.482 40.659-29.91 58.407-13.383 19.113-22.532 26.95-27.447 23.508-4.915-3.441-.681-14.719 12.702-33.832 12.428-17.749 27.313-33.776 44.655-48.083Z" style="stroke-width:2.65px;"/>
        <path d="M286.875 305.858c10.258 20.006 17.577 40.618 21.959 61.837 4.718 22.851 4.139 34.884-1.737 36.097-5.876 1.213-11.173-9.606-15.892-32.457-4.381-21.219-5.824-43.045-4.33-65.477Z" style="stroke-width:2.65px;"/>
        <path d="M283.493 305.858c-3.073 22.271-8.9 43.354-17.482 63.249-9.242 21.425-16.617 30.949-22.126 28.572-5.51-2.376-3.643-14.277 5.598-35.702 8.582-19.894 19.918-38.601 34.01-56.119Z" style="stroke-width:2.65px;"/>
      </g>
      <g class="tree__layer">
        <path d="M287.346 298.69c6.447 15.581 10.66 31.435 12.641 47.564 2.132 17.37.965 26.329-3.501 26.877-4.466.549-7.766-7.862-9.899-25.231-1.98-16.129-1.727-32.532.759-49.21Z" style="stroke-width:2.47px;"/>
        <path d="M288.443 298.69c10.024 13.558 17.948 27.923 23.772 43.093 6.271 16.338 7.306 25.313 3.105 26.926-4.201 1.612-9.437-5.75-15.709-22.088-5.823-15.17-9.546-31.147-11.168-47.931Z" style="stroke-width:2.47px;"/>
        <path d="M285.945 298.69c2.486 16.678 2.739 33.081.758 49.21-2.132 17.369-5.432 25.78-9.898 25.231-4.467-.548-5.634-9.507-3.501-26.877 1.98-16.129 6.194-31.983 12.641-47.564Z" style="stroke-width:2.47px;"/>
        <path d="M283.397 298.69c-5.634 15.893-13.112 30.494-22.433 43.806-10.037 14.335-16.899 20.212-20.585 17.631-3.686-2.581-.511-11.04 9.527-25.375 9.321-13.311 20.484-25.332 33.491-36.062Z" style="stroke-width:2.47px;"/>
        <path d="M284.848 298.69c-1.622 16.784-5.345 32.761-11.169 47.931-6.271 16.338-11.507 23.7-15.708 22.088-4.202-1.613-3.166-10.588 3.105-26.926 5.823-15.17 13.748-29.535 23.772-43.093Z" style="stroke-width:2.47px;"/>
        <path d="M289.894 298.69c13.006 10.73 24.17 22.751 33.491 36.062 10.037 14.335 13.213 22.794 9.527 25.375-3.686 2.581-10.548-3.296-20.586-17.631-9.32-13.312-16.798-27.913-22.432-43.806Z" style="stroke-width:2.47px;"/>
      </g>
      <g class="tree__layer">
        <path d="M289.811 291.523c8.671 7.153 16.114 15.167 22.327 24.041 6.692 9.557 8.809 15.196 6.352 16.916-2.458 1.721-7.032-2.197-13.724-11.754-6.214-8.874-11.199-18.608-14.955-29.203Z" style="stroke-width:2.3px;"/>
        <path d="M288.164 291.523c6.119 9.43 10.807 19.31 14.064 29.642 3.509 11.127 3.832 17.141.971 18.044-2.861.902-6.046-4.211-9.554-15.337-3.258-10.332-5.085-21.115-5.481-32.349Z" style="stroke-width:2.3px;"/>
        <path d="M285.127 291.523c-.397 11.234-2.224 22.017-5.481 32.349-3.509 11.126-6.693 16.239-9.554 15.337-2.862-.903-2.538-6.917.97-18.044 3.258-10.332 7.946-20.212 14.065-29.642Z" style="stroke-width:2.3px;"/>
        <path d="M286.645 291.523c3 10.833 4.5 21.666 4.5 32.5 0 11.666-1.5 17.5-4.5 17.5s-4.5-5.834-4.5-17.5c0-10.834 1.5-21.667 4.5-32.5Z" style="stroke-width:2.3px;"/>
        <path d="M283.48 291.523c-3.756 10.595-8.742 20.329-14.955 29.203-6.692 9.557-11.267 13.475-13.724 11.754-2.457-1.72-.34-7.359 6.351-16.916 6.214-8.874 13.657-16.888 22.328-24.041Z" style="stroke-width:2.3px;"/>
      </g>
      <g class="tree__layer">
        <path d="M285.891 284.355c.373 5.608.012 11.065-1.083 16.369-1.18 5.713-2.504 8.418-3.973 8.115-1.469-.304-1.614-3.312-.434-9.025 1.095-5.304 2.925-10.457 5.49-15.459Z" style="stroke-width:2.12px;"/>
        <path d="M284.24 284.355c-1.878 5.298-4.37 10.165-7.477 14.602-3.346 4.778-5.633 6.737-6.862 5.877-1.229-.86-.17-3.68 3.176-8.458 3.106-4.437 6.828-8.444 11.163-12.021Z" style="stroke-width:2.12px;"/>
        <path d="M287.756 284.355c2.564 5.002 4.394 10.155 5.489 15.459 1.18 5.713 1.035 8.721-.434 9.025-1.469.303-2.793-2.402-3.973-8.115-1.095-5.304-1.456-10.761-1.082-16.369Z" style="stroke-width:2.12px;"/>
        <path d="M289.406 284.355c4.335 3.577 8.057 7.584 11.164 12.021 3.345 4.778 4.404 7.598 3.175 8.458-1.229.86-3.516-1.099-6.862-5.877-3.107-4.437-5.599-9.304-7.477-14.602Z" style="stroke-width:2.12px;"/>
      </g>
      <path class="tree__star" d="M285.922 259.141a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z" style="stroke-width:2.5px"/>
    </g>
    <g class="snow">
      <circle cx="325.175" cy="202.5" r="2.5"/>
      <circle cx="197.632" cy="203.5" r="3.5"/>
      <circle cx="251.5" cy="201.5" r="1.5"/>
      <circle cx="291.5" cy="201.5" r="1.5"/>
      <circle cx="166.632" cy="202.5" r="2.5"/>
      <circle cx="381.5" cy="201.5" r="1.5"/>
      <circle cx="320.632" cy="203.5" r="3.5"/>
      <circle cx="341.5" cy="201.5" r="1.5"/>
      <circle cx="110.5" cy="201.5" r="1.5"/>
    </g>
    <g class="gift gift--large">
      <path class="gift__box" d="M382.806 439.861c0-7.321-5.943-13.265-13.264-13.265h-39.793c-7.321 0-13.265 5.944-13.265 13.265v39.793c0 7.32 5.944 13.264 13.265 13.264h39.793c7.321 0 13.264-5.944 13.264-13.264v-39.793Z" style="stroke-width:3px"/>
      <path class="gift__ribbon" d="M317.185 453.409h64.92" style="stroke-width:3px"/>
      <path class="gift__ribbon" d="M349.645 492.868v-64.919" style="stroke-width:3px"/>
      <g>
        <path class="gift__bow gift__bow--right gift__bow--back" d="M346.795 425.992s12.436-3.548 15.861-6.973a6.289 6.289 0 0 0 0-8.888 6.288 6.288 0 0 0-8.887 0c-3.425 3.426-6.974 15.861-6.974 15.861Z" style="stroke-width:3px"/>
        <path class="gift__bow gift__bow--left gift__bow--back" d="M350.495 425.992s-3.548-12.435-6.973-15.861a6.288 6.288 0 0 0-8.887 0 6.287 6.287 0 0 0 0 8.888c3.425 3.425 15.86 6.973 15.86 6.973Z" style="stroke-width:3px"/>
        <path class="gift__bow gift__bow--left gift__bow--front" d="M348.899 426.287s-9.29-8.995-13.969-10.249a6.288 6.288 0 0 0-7.697 4.444 6.287 6.287 0 0 0 4.444 7.696c4.679 1.254 17.222-1.891 17.222-1.891Z" style="stroke-width:3px"/>
        <path class="gift__bow gift__bow--right gift__bow--front" d="M350.391 426.287s12.544 3.145 17.223 1.891a6.286 6.286 0 0 0 4.443-7.696 6.286 6.286 0 0 0-7.696-4.444c-4.679 1.254-13.97 10.249-13.97 10.249Z" style="stroke-width:3px"/>
      </g>
    </g>
    <g class="snow">
      <circle cx="347.632" cy="203.5" r="3.5"/>
      <circle cx="275.175" cy="202.5" r="2.5"/>
      <circle cx="221.5" cy="201.5" r="1.5"/>
      <circle cx="246.632" cy="202.5" r="2.5"/>
      <circle cx="351.5" cy="201.5" r="1.5"/>
      <circle cx="311.5" cy="201.5" r="1.5"/>
    </g>
    <g class="gift gift--small">
      <g class="gift__confetti">
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
        <path d="M301.645 461.072a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z"/>
      </g>
      <path class="gift__box" d="M321.699 466.536a6.02 6.02 0 0 0-6.016-6.016h-28.075a6.02 6.02 0 0 0-6.017 6.016v29.072a6.02 6.02 0 0 0 6.017 6.016h28.075a6.02 6.02 0 0 0 6.016-6.016v-29.072Z" style="stroke-width:3px"/>
      <g class="gift__top">
        <path class="gift__bow gift__bow--left" d="M301.288 458.415s-5.012-8.367-8.176-10.194a4.743 4.743 0 0 0-6.475 1.735 4.744 4.744 0 0 0 1.735 6.475c3.164 1.826 12.916 1.984 12.916 1.984Z" style="stroke-width:3px"/>
        <path class="gift__bow gift__bow--right" d="M302.002 458.415s9.753-.158 12.916-1.984a4.742 4.742 0 0 0 1.735-6.475 4.742 4.742 0 0 0-6.474-1.735c-3.164 1.827-8.177 10.194-8.177 10.194Z" style="stroke-width:3px"/>
        <path class="gift__lid" d="M324.657 460.135c0-.95-.771-1.721-1.721-1.721h-42.581c-.951 0-1.722.771-1.722 1.721v5.164c0 .95.771 1.722 1.722 1.722h42.581c.95 0 1.721-.772 1.721-1.722v-5.164Z" style="stroke-width:3px"/>
      </g>
    </g>
    <g class="snow">
      <circle cx="350.5" cy="201.5" r="1.5"/>
      <circle cx="306.632" cy="202.5" r="2.5"/>
      <circle cx="191.5" cy="201.5" r="1.5"/>
      <circle cx="126.632" cy="202.5" r="2.5"/>
      <circle cx="111.5" cy="201.5" r="1.5"/>
      <circle cx="267.632" cy="203.5" r="3.5"/>
      <circle cx="335.5" cy="201.5" r="1.5"/>
      <circle cx="200.5" cy="201.5" r="1.5"/>
      <circle cx="395.175" cy="202.5" r="2.5"/>
      <circle cx="151.5" cy="201.5" r="1.5"/>
      <circle cx="209.5" cy="201.5" r="1.5"/>
    </g>
    <path class="fg" d="m313.068 571.715 152.053-15.261 6.593-62.705s-5.431-6.718-28.054-7.866c-29.082-1.476-44.183 7.492-65.067 14.411-13.493 4.47-41.167 15.965-75.153 16.172-19.444.118-56.75-19.803-83.149-31.192-18.38-7.929-40.145-17.074-76.602-18.931-25.065-1.277-45.499 10.879-45.499 10.879l18.039 70.95 169.932 26.953 26.907-3.41Z" />
  </g>
  <circle cx="286.645" cy="384.605" r="175" class="frame"/>
</svg>

              
            
!

CSS

              
                :root {
  --bgHue: 210;
  --treeHue: 151;
  --stroke: hsl(var(--bgHue), 90%, 5%);
  --trunk: hsl(50, 50%, 20%);
  --star: hsl(50, 60%, 55%);
  --snow: hsl(var(--bgHue), 90%, 93%);
  --giftSmallHue: 0;
  --giftLargeHue: 210;
}

html, body {
  height: 100%;
}

body {
  background-color: hsl(var(--bgHue), 65%, 7%);
  display: grid;
  place-items: center;
}

svg {
  max-height: 80vh;
  max-width: 80vw;
}

.frame {
  stroke: var(--stroke);
  fill: none;
  stroke-width: 10;
}

.bg {
  & > * {
    @for $i from 1 through 6 {
      &:nth-child(#{$i}) {
        fill: hsl(var(--bgHue), 50%, #{63 + $i * 6%});
      }
    }
  }
}
.fg {
  fill: hsl(var(--bgHue), 50%, 99%);
}

.tree {
  & > * {
    stroke: var(--stroke);

    @for $i from 2 through 7 {
      &:nth-child(#{$i}) {
        fill: hsl(var(--treeHue), 35%, #{10 + $i * 3.5%});
      }
    }

    &:first-child {
      fill: var(--trunk);
    }

    &:last-child {
      fill: var(--star);
    }
  }
}

.gift {
  --hue: 10;

  stroke: var(--stroke);


  &--large {
    --hue: var(--giftLargeHue);
  }

  &--small {
    --hue: var(--giftSmallHue);

    cursor: pointer;
  }

  &__box {
    fill: hsl(var(--hue), 52%, 52%);
  }

  &__ribbon {
    stroke: var(--stroke);	
  }

  &__lid {
    fill: hsl(var(--hue), 50%, 58%);
  }

  &__bow {
    stroke: var(--stroke);
    fill: hsl(calc(var(--hue) + 50), 60%, 65%);

    &--front {
      fill: hsl(calc(var(--hue)), 60%, 75%);
    }

    &--back {
      fill: hsl(calc(var(--hue)), 60%, 70%);
    }
  }

  &__confetti {
    path {
      fill: hsl(var(--hue), 52%, 52%);
      stroke: none;

      &:nth-child(2n) {
        fill: hsl(calc(var(--hue) + 90), 52%, 52%);
      }

      &:nth-child(3n) {
        fill: hsl(calc(var(--hue) + 180), 52%, 52%);
      }

      &:nth-child(7n) {
        fill: hsl(calc(var(--hue) + 270), 52%, 52%);
      }
    }
  }
}

.snow {
  circle {
    fill: var(--snow);
  }
}
              
            
!

JS

              
                /* Do what Cassie said */
gsap.registerPlugin(CustomBounce, CustomWiggle);


/*
 * Various settings and things to make my life easier
 */

const wind = {
	duration: 12,
	stagger: 0.5,
	strength: 6.5
};
const dom = {
	bowsLeft: document.querySelectorAll(".gift__bow--left"),
	bowsRight: document.querySelectorAll(".gift__bow--right"),
	confetti: document.querySelectorAll(".gift__confetti path"),
	giftLarge: document.querySelector(".gift--large"),
	giftLargeBows: document.querySelectorAll(".gift--large .gift__bow"),
	giftSmall: document.querySelector(".gift--small"),
	giftSmallBows: document.querySelectorAll(".gift--small .gift__bow"),
	giftSmallTop: document.querySelector(".gift--small .gift__top"),
	gifts: document.querySelectorAll(".gift"),
	leaves: document.querySelectorAll(".tree path"),
	snowLayers: document.querySelectorAll(".snow"),
	snowPetals: document.querySelectorAll(".snow circle"),
	star: document.querySelector(".tree__star"),
	treeLayers: document.querySelectorAll(".tree__layer"),
};

/* Setting all the defaults */

gsap.set(dom.gifts, {y: -300, transformOrigin: "50% 100%"});
gsap.set(dom.bowsLeft, {transformOrigin: "100% 100%", rotation: 40});
gsap.set(dom.bowsRight, {transformOrigin: "0% 100%", rotation: -40});
gsap.set(dom.leaves, {transformOrigin: "50% 0%"});
gsap.set(dom.star, {transformOrigin: "50% 100%"});
gsap.set(dom.confetti, {scale: "random(0.3, 0.7)"});
gsap.set(dom.giftSmallTop, {transformOrigin: "25% 100%"});

/* Special bit */

dom.giftSmall.addEventListener("click", confetti);


/*
 * Custom eases! Yay!
 */

/* Wind */

CustomWiggle.create("windWiggle", {
	wiggles: wind.strength,
	type: "sine.easeOut"
});

/* Squashing a heavy thing */

CustomBounce.create("weakBounce", {
	strength: 0.075,
	squash: 0.15,
	squashID: "weakBounceSquash"
});

/* Squashing a light thing */

CustomBounce.create("strongBounce", {
	strength: 0.1,
	squash: 0.25,
	squashID: "strongBounceSquash"
});


/*
 * Actual animations
 */

/* Large box */

gsap.to(dom.giftLarge, {
	duration: 2,
	y: 0,
	ease: "weakBounce"
});
gsap.to(dom.giftLarge, {
	duration: 2,
	scaleX: 1.05,
	scaleY: 0.95,
	ease: "weakBounceSquash"
});
gsap.to(dom.giftLargeBows, {
	duration: 1.75,
	delay: 1.9,
	rotation: 0,
	ease: Elastic.easeOut.config(1, 0.45)
});

/* Small box */

gsap.to(dom.giftSmall, {
	duration: 3,
	y: 0,
	ease: "strongBounce"
});
gsap.to(dom.giftSmall, {
	duration: 3,
	scaleX: 1.15,
	scaleY: .9,
	ease: "strongBounceSquash"
});
gsap.to(dom.giftSmallBows, {
	duration: 2,
	delay: 2.65,
	rotation: 0,
	ease: Elastic.easeOut.config(1, 0.45)
});

/* Tree blowing in the wind */

const rotationDelta = wind.strength / dom.treeLayers.length;
const delayDelta = wind.stagger / dom.treeLayers.length;

dom.treeLayers.forEach((layer, index) => {
	const leaves = layer.querySelectorAll("path");

	gsap.to(leaves, {
		duration: wind.duration,
		rotation: -(index + 1) * rotationDelta,
		ease: "windWiggle",
		stagger: 0.05,
		delay: delayDelta * (dom.treeLayers.length - index),
		repeat: -1
	});
});
gsap.to(dom.star, {
	duration: wind.duration,
	rotation: wind.strength / 2,
	xPercent: wind.strength / 2,
	ease: "windWiggle",
	repeat: -1
});

/* Snow */

gsap.to(dom.snowPetals, {
	y: 320,
	ease: "easeOut",
	duration: wind.duration,
	stagger: {
		each: wind.stagger,
		axis: "x",
		// don't wait for all elements to finish animating, just loop right away
		repeat: -1 
	},
	repeat: -1
});
gsap.to(dom.snowLayers, {
	duration: wind.duration,
	xPercent: wind.strength * 2,
	ease: "windWiggle",
	stagger: {
		each: 0.15,
		repeat: -1
	},
	repeat: -1
});

/* Confetti! */

function confetti(e) {
	dom.giftSmall.removeEventListener("click", confetti, false);

	gsap.to(dom.giftSmallTop, {
		keyframes: [{
			y: -40,
			rotation: -150,
			x: -2,
			ease: "expo.easeOut",
			duration: 1
		}, {
			ease: "Bounce.easeOut",
			duration: 1,
			rotation: -170,
			delay: -0.45,
			x: -2,
			y: 28
		}]
	});
	gsap.to(dom.confetti, {
		keyframes: [{
			rotation: "random(-360, 360)",
			x: "random(-45, 45)",
			y: "random(-250, -75)",
			ease: "expo.out",
			duration: 3,
			stagger: 0.015
		}, {
			opacity: 0,
			delay: -2.35,
			ease: "expo.out",
			duration: .5,
			stagger: 0.015
		}]
	});
}

              
            
!
999px

Console