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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <main class="main">
	<section class="svg-wrapper">
	  <svg width="280" height="430" viewBox="0 0 280 430" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter id="drop-shadow">
          <feFlood flood-color="#750850" flood-opacity="0.4" in="SourceGraphic" result="result1" />
          <feComposite in2="SourceGraphic" in="result1" operator="in" result="result2" />
          <feOffset dx="0" dy="5" in="result2" result="offset" />
          <feComposite in2="offset" in="SourceGraphic" operator="over" result="result4" />
        </filter>

        <filter id="drop-shadow-sprinkles">
          <feFlood flood-color="#750850" flood-opacity="0.3" in="SourceGraphic" result="result1" />
          <feComposite in2="SourceGraphic" in="result1" operator="in" result="result2" />
          <feOffset dx="0" dy="2" in="result2" result="offset" />
          <feComposite in2="offset" in="SourceGraphic" operator="over" result="result4" />
        </filter>

        <filter id="cream-outline">
          <feFlood flood-color="#750850" flood-opacity="1" in="SourceGraphic" result="result1" />
          <feComposite in2="SourceGraphic" in="result1" operator="in" result="result2" />
          <feMorphology in="result2" result="result3"  operator="dilate" radius="2" />
          <feComposite in2="result3" in="SourceGraphic" operator="over" result="result4" />
        </filter>

        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="0 5" result="blur" />
          <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feBlend in="SourceGraphic" in2="goo" />
        </filter>

        <filter id="mask-filter">
          <feMorphology in="SourceGraphic" result="result1"  operator="erode" radius="1" />
          <feComposite in="result1" operator="over" result="result4" />
        </filter>

        <mask id="icing-mask">
          <path class="icing" filter="url(#mask-filter)" stroke="none" fill="#FFFFFF" d="M103.45 169 Q92.35 163.3 85.05 157.9 67.75 145 47.25 152.4 54.15 131.8 71.1 115.3 99.75 87.5 140.25 87.5 180.75 87.5 209.35 115.3 224.65 130.2 231.8 148.35 229.7 153.85 224.5 159.35 206.85 175.85 189.05 163.25 170.75 150.4 152.5 160.75 L135 170.7 Q120.6 177.25 103.45 169"/>
        </mask>

        <mask id="cherry-shadow-mask">
          <path stroke="none" fill="#ffffff" d="M71.1 115.3 Q99.75 87.5 140.25 87.5 180.75 87.5 209.35 115.3 224.65 130.2 231.8 148.35 L48.75 148.35 Q55.85 130.15 71.1 115.3"/>
        </mask>
      </defs>

      <g class="amber-ice-cream" opacity="0">
        <g class="main-shadow" data-origin="50% 50%">
          <path class="shadow" stroke="none" fill="#750850" fill-opacity="0.2" d="M55.15 384.15 Q53.4 382.2 53.4 380.1 53.4 377.3 56.45 374.8 59.5 372.25 65.2 370 70.85 367.75 78.7 365.95 L87 364.3 96.2 362.85 102.75 362.05 109.65 361.4 116.8 360.85 124.25 360.45 131.9 360.2 Q135.8 360.1 139.8 360.15 L147.65 360.2 155.3 360.45 162.75 360.85 169.9 361.4 176.8 362.05 183.35 362.85 192.55 364.3 200.85 365.95 Q208.7 367.75 214.35 370 220 372.25 223.1 374.8 226.1 377.3 226.15 380.1 226.1 382.9 223.1 385.45 220 387.95 214.35 390.2 208.7 392.4 200.85 394.25 L192.55 395.95 183.35 397.35 176.8 398.15 169.9 398.85 162.75 399.35 155.3 399.75 147.65 400 139.8 400.1 133.85 400.05 128.05 399.9 122.35 399.7 116.8 399.35 111.4 399 106.15 398.5 101.1 398 96.2 397.35 91.5 396.7 87 395.95 82.75 395.1 78.7 394.25 73.15 392.85 68.15 391.3 Q63.5 389.7 60.2 387.9 56.9 386.1 55.15 384.15"/>
        </g>

        <g class="cone bottom" data-origin="50% 100%">
          <path stroke="none" fill="#ffbd62" d="M198.15 298.65 L198.2 298.65 183.75 371.4 183.35 372.65 182.7 373.7 181.85 374.65 181.05 375.25 180.05 375.95 178.85 376.7 177.45 377.5 175.8 378.3 173.95 379.1 171.8 379.9 169.4 380.7 166.75 381.45 163.8 382.15 160.5 382.8 156.9 383.35 153 383.8 148.75 384.15 144.1 384.35 139.15 384.4 132.7 384.3 126.9 383.9 121.75 383.3 117.15 382.55 113.1 381.6 109.55 380.6 106.5 379.55 103.95 378.45 101.8 377.35 100.05 376.35 98.65 375.35 97.6 374.55 96.5 373.15 96.1 372.35 95.85 371.45 81.45 298.65 198.15 298.65"/>
          <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M102.05 355.55 L105.1 376.05 Q105.4 378 106.4 379.45 L106.35 379.5 104.7 378.85 103.25 378.15 99.8 376.2 98.95 375.6 97.6 374.55 96.8 373.7 96.2 372.65 95.85 371.5 90.3 342.95 Q92.45 342.95 94.4 343.85 96.35 344.8 97.9 346.5 99.5 348.15 100.55 350.5 101.6 352.75 102.05 355.55"/>
          <path stroke="none" fill="#750850" fill-opacity="0.2" d="M198.1 298.65 L198.15 298.65 183.7 371.4 183.3 372.65 182.65 373.7 181.8 374.65 180.85 375.35 179.65 376.15 178.2 377.05 176.45 377.95 174.4 378.9 172 379.85 169.25 380.75 166.15 381.6 166.1 381.55 Q169.5 377.8 172.25 373.35 174.95 368.9 176.9 364.1 178.85 359.25 179.95 354.4 181.05 349.5 181.15 344.9 181.2 340.3 180.2 336.3 179.2 332.3 176.95 329.3 174.75 326.4 172.45 324.6 170.15 322.85 167.75 322 165.3 321.15 162.8 321.05 L161.85 321 159.75 321.1 157.55 321.4 154.9 321.95 152.15 322.7 149.35 323.65 146.5 324.65 140.7 326.85 137.7 327.9 134.65 328.9 131.6 329.8 128.5 330.55 125.3 331.05 122.15 331.3 120.75 331.35 118.2 331.25 115.65 330.95 Q112.35 330.4 109 329 105.65 327.6 102.25 325.15 98.85 322.7 95.4 319.05 91.9 315.4 88.45 310.35 84.9 305.3 81.4 298.7 L81.4 298.65 198.1 298.65"/>
          <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M169.4 380.65 Q164.35 382.25 156.9 383.3 L139.15 384.4 126.9 383.85 117.15 382.5 109.55 380.6 Q106.3 379.5 103.95 378.4 L100.05 376.3 97.65 374.5 Q96.25 373.25 95.9 371.45 L81.45 298.65 198.15 298.65 183.75 371.4 183.05 373.15 181.8 374.6 Q180.4 375.8 177.45 377.45 174.45 379.1 169.4 380.65"/>
        </g>

        <g class="cone middle" data-origin="50% 100%">
          <path stroke="none" fill="#ffbd62" d="M139.05 316.15 L134.15 316.1 129.55 316 125.15 315.8 119 315.4 113.35 314.9 108.15 314.25 103.45 313.5 99.2 312.7 95.35 311.85 91.95 310.95 88.9 310.05 86.2 309.1 83.9 308.25 81.9 307.4 80.25 306.6 78.85 305.85 77.75 305.25 76.8 304.6 76.05 303.85 75.15 302.15 53.85 229.35 139.8 237.2 226.15 229.35 226.2 229.35 204.9 302.1 204.35 303.35 203.4 304.4 202.1 305.35 200.9 305.95 199.45 306.7 Q198.65 307.05 197.7 307.5 L195.6 308.35 193.2 309.25 190.4 310.15 187.3 311.05 183.75 311.95 179.8 312.8 175.4 313.55 170.6 314.3 165.3 314.9 159.5 315.45 153.2 315.85 148.75 316 144 316.15 139.05 316.15"/>
          <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M81.45 235.6 L77.7 250.85 77.05 254.05 76.45 257.4 75.95 260.75 75.6 264.1 Q75.4 265.75 75.35 267.35 L75.25 270.5 Q75.25 272 75.4 273.4 75.5 274.8 75.75 276.05 L76.35 278.6 77.2 281.1 78.3 283.65 79.65 286.15 81.2 288.65 82.9 291.05 84.8 293.45 86.85 295.75 89.05 297.95 91.3 300.05 93.7 302.05 96.15 303.9 98.65 305.6 101.2 307.1 103.8 308.5 106.35 309.65 117.85 313.75 124.7 315.7 124.75 315.75 124.7 315.75 114.35 314.95 105.5 313.8 Q97.35 312.5 91.8 310.9 L86.75 309.3 82.8 307.75 79.8 306.35 77.7 305.2 76.5 304.35 75.6 303.3 75.1 302.15 55.65 235.6 81.45 235.6"/>
          <path stroke="none" fill="#750850" fill-opacity="0.2" d="M214.8 268.35 L204.9 302.1 204.35 303.3 203.35 304.4 202.05 305.3 200.2 306.3 197.7 307.45 194.45 308.75 190.45 310.1 185.6 311.45 179.9 312.75 175.5 313.5 170.7 314.25 165.45 314.85 165.4 314.85 167.8 313.8 170.2 312.7 172.55 311.5 174.95 310.25 177.25 308.9 179.55 307.45 181.8 305.95 183.95 304.3 186 302.6 188 300.75 189.85 298.85 191.55 296.85 193.15 294.7 194.6 292.5 195.85 290.15 196.9 287.7 197.75 285.5 198.35 283.65 198.7 282.05 198.9 280.7 198.85 279.6 198.65 278.8 Q198.35 278.05 197.75 277.75 L196.25 277.45 196.1 277.45 195.05 277.55 193.85 277.75 192.5 278.1 174.9 284.15 172.45 284.85 169.95 285.45 167.35 286 164.7 286.5 162.05 286.85 159.3 287.1 153.7 287.15 150.9 286.95 148.05 286.55 Q141.35 285.3 135.9 283.4 130.45 281.45 125.9 279.05 L121.5 276.65 117.3 274.15 109.15 269.25 Q107.15 268.05 105.05 267 L100.8 264.95 Q96.45 263 91.35 261.8 86.3 260.6 80.1 260.45 L78.45 260.4 62.6 260.25 57.85 244.95 217.85 245.1 217.9 245.1 214.8 268.35"/>
          <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M139.05 316.15 L113.35 314.85 Q102.55 313.6 95.35 311.8 88.15 310 83.9 308.2 79.65 306.4 77.75 305.2 75.7 303.95 75.15 302.15 L53.85 229.35 139.8 237.25 226.2 229.35 204.9 302.1 Q204.6 303.05 203.9 303.85 L202.05 305.3 Q200 306.5 195.6 308.3 191.15 310.1 183.75 311.9 176.3 313.65 165.3 314.9 L139.05 316.15"/>
        </g>

        <g class="cone top" data-origin="50% 100%">
          <path stroke="none" fill="#ffbd62" d="M49.55 220.6 L51.15 221.2 53.2 221.95 55.6 222.75 58.5 223.6 61.9 224.5 65.75 225.4 70.2 226.3 75.15 227.2 80.75 228.05 86.95 228.85 91.45 229.35 96.25 229.8 101.3 230.25 106.7 230.6 112.45 230.9 118.5 231.15 124.9 231.35 131.65 231.45 138.7 231.5 145.9 231.5 152.8 231.35 159.35 231.2 165.5 230.95 171.4 230.65 176.9 230.25 182.1 229.85 187.05 229.4 191.65 228.9 198 228.15 203.75 227.3 208.9 226.4 213.45 225.5 217.5 224.6 221 223.7 224 222.85 226.55 222.05 228.7 221.35 230.4 220.7 230.5 220.7 230.65 220.75 230.75 221.05 230.75 221.65 230.6 222.95 230.25 224.65 229.8 226.7 229.2 229 228.5 231.5 227.75 234.05 227 236.65 226.25 239.15 224.9 243.65 223.9 246.8 223.5 248 222.75 249.2 221.55 250.3 220.75 250.8 219.85 251.25 218.35 251.85 216.45 252.6 214.2 253.4 211.55 254.25 208.45 255.1 204.9 256.05 200.85 256.95 196.3 257.8 191.25 258.65 185.6 259.45 181.55 259.95 177.2 260.4 172.6 260.8 167.75 261.15 162.55 261.45 157.1 261.7 151.35 261.9 145.25 262 138.85 262.05 132.6 262 126.65 261.9 121 261.7 115.7 261.45 110.6 261.15 105.85 260.75 101.35 260.35 97.15 259.9 93.15 259.4 87.7 258.6 82.75 257.75 78.35 256.85 74.45 255.9 71.05 255 68.05 254.1 65.5 253.25 63.35 252.45 61.55 251.75 60.15 251.15 59.3 250.7 58.6 250.25 57.45 249.2 56.8 248.05 56.4 246.85 55.4 243.65 53.95 239.15 52.4 234.05 51.65 231.45 50.95 228.95 50.3 226.65 49.8 224.6 49.45 222.85 49.25 221.6 49.25 220.95 49.35 220.65 49.45 220.6 49.55 220.6"/>
          <path stroke="none" fill="#750850" fill-opacity="0.2" d="M49.5 220.55 L53.15 221.9 55.55 222.7 58.45 223.55 61.85 224.45 65.7 225.35 70.15 226.25 75.1 227.15 80.7 228 86.9 228.8 101.25 230.2 106.65 230.55 112.4 230.85 118.45 231.1 124.85 231.3 131.6 231.4 138.65 231.45 145.85 231.45 152.75 231.3 159.3 231.15 171.35 230.6 176.85 230.2 187 229.35 191.6 228.85 197.95 228.1 203.7 227.25 208.85 226.35 213.4 225.45 217.45 224.55 220.95 223.65 223.95 222.8 226.5 222 230.35 220.65 230.45 220.65 Q230.65 220.6 230.7 221.05 L230.6 222.5 229.45 227.75 227.55 228.45 225.3 229.15 222.6 229.95 219.5 230.8 215.9 231.65 211.85 232.55 207.25 233.4 202.1 234.25 196.4 235.05 190.15 235.8 175.7 237.05 170.3 237.4 145.6 238.2 125.4 238.1 119.3 237.9 107.9 237.4 88.65 235.8 82.55 235.05 77.05 234.2 72.05 233.4 67.6 232.5 63.65 231.65 60.2 230.8 57.2 229.95 54.6 229.15 50.6 227.75 49.35 222.45 49.2 221 49.2 220.85 49.2 220.7 49.3 220.6 49.4 220.55 49.5 220.55"/>
          <path fill="none" stroke="#750850" stroke-width="1.85" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M230.4 220.75 Q227.45 221.95 221 223.75 214.55 225.5 203.75 227.3 192.95 229.1 176.9 230.3 L138.7 231.55 101.3 230.25 Q85.65 229.05 75.15 227.25 64.65 225.4 58.5 223.6 52.3 221.8 49.55 220.65 49.15 220.5 49.3 221.6 L49.85 224.6 51 228.95 52.45 234.05 54 239.15 55.4 243.65 56.45 246.85 56.8 248.05 Q57.15 248.9 58 249.7 L60.15 251.1 68.05 254.1 Q73.5 255.85 82.75 257.7 92 259.5 105.85 260.75 L138.85 262 172.6 260.75 Q186.75 259.55 196.3 257.8 205.85 256 211.55 254.2 217.2 252.4 219.85 251.2 221.25 250.55 222.2 249.75 223.1 248.95 223.5 248 L223.85 246.8 224.85 243.6 226.25 239.15 227.75 234.05 229.15 229 230.2 224.65 230.7 221.65 Q230.8 220.6 230.4 220.75"/>
        </g>

        <g class="cream" data-origin="50% 100%">
          <g class="cream-outline" filter="url(#cream-outline)">
            <path class="head" stroke="none" fill="#ffffff" d="M166.05 92.7 Q172.25 94.4 178.15 96.9 L178.35 96.95 Q183.95 99.3 189.3 102.45 L189.5 102.6 Q194.95 105.8 199.9 109.6 204.85 113.4 209.3 117.85 213.75 122.3 217.6 127.3 221.4 132.25 224.6 137.7 227.8 143.15 230.3 149.05 232.8 154.95 234.5 161.15 236.2 167.35 237.1 173.9 238 180.45 238 187.2 L238 188.9 237.85 194.5 237.4 199.9 236.7 205.2 235.65 210.5 234.35 215.6 232.75 220.65 232.6 221.15 230.95 225.55 228.9 230.35 228.7 231.2 228.7 242.05 199.4 242.05 199.4 226.95 171.35 229.9 171.35 252.05 142.05 252.05 142.05 243.7 Q142.05 242.9 141.45 242.3 140.85 241.7 140 241.7 139.15 241.7 138.55 242.3 137.95 242.9 137.95 243.7 L137.95 247.05 108.75 247.05 108.75 229.65 Q94.6 228.5 80.6 226.4 L80.6 238.05 51.3 238.05 51.3 231.2 51.1 230.35 Q48.9 225.65 47.25 220.65 L47 219.85 Q45.45 215.25 44.35 210.45 43.2 205.25 42.6 199.9 42 194.5 42 188.95 L42 187.2 Q42 180.45 42.9 173.9 43.8 167.35 45.5 161.15 47.2 154.95 49.7 149.05 L49.75 148.9 Q52.1 143.2 55.2 137.95 L55.4 137.7 Q58.6 132.25 62.4 127.3 66.2 122.3 70.65 117.85 75.1 113.4 80.1 109.6 85.05 105.8 90.5 102.6 L90.75 102.4 Q96 99.3 101.7 96.95 L101.85 96.9 Q107.75 94.4 113.95 92.7 120.15 91 126.7 90.1 L140 89.2 153.3 90.1 Q159.8 91 166.05 92.7"/>
            <path class="stem s1" data-origin="50% 0%" stroke="none" fill="#ffffff" d="M51.3 274.65 L51.3 234.05 80.6 234.05 80.6 274.65 51.3 274.65"/>
            <path class="stem s2" data-origin="50% 0%" stroke="none" fill="#ffffff" d="M137.95 254.3 L108.75 254.3 108.75 245.05 137.95 245.05 137.95 254.3"/>
            <path class="stem s3" data-origin="50% 0%" stroke="none" fill="#ffffff" d="M142.05 285.5 L142.05 248.05 171.35 248.05 171.35 285.5 142.05 285.5"/>
            <path class="stem s4" data-origin="50% 0%" stroke="none" fill="#ffffff" d="M228.7 296.2 L228.7 296.5 199.4 296.5 199.4 296.3 199.4 237.05 228.7 237.05 228.7 296.2"/>

            <g class="circles-group" filter="url(#goo)">
              <path class="circle behind c1" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M65.9 260.05 Q72 260.05 76.25 264.35 80.55 268.6 80.55 274.7 80.55 280.8 76.25 285.1 72 289.35 65.9 289.35 59.8 289.35 55.55 285.1 51.25 280.8 51.25 274.7 51.25 268.6 55.55 264.35 59.8 260.05 65.9 260.05"/>
              <path class="circle behind c2" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M123.35 238.65 Q129.45 238.65 133.7 242.95 138 247.2 138 253.3 138 259.4 133.7 263.7 129.45 267.95 123.35 267.95 117.25 267.95 113 263.7 108.7 259.4 108.7 253.3 108.7 247.2 113 242.95 117.25 238.65 123.35 238.65"/>
              <path class="circle behind c3" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M146.3 296.2 Q142 291.9 142 285.8 142 279.7 146.3 275.45 150.55 271.15 156.65 271.15 162.75 271.15 167 275.45 171.3 279.7 171.3 285.8 171.3 291.9 167 296.2 162.75 300.45 156.65 300.45 150.55 300.45 146.3 296.2"/>
              <path class="circle behind c4" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M224.45 285.9 Q228.75 290.15 228.75 296.25 228.75 302.35 224.45 306.65 220.2 310.9 214.1 310.9 208 310.9 203.75 306.65 199.45 302.35 199.45 296.25 199.45 290.15 203.75 285.9 208 281.6 214.1 281.6 220.2 281.6 224.45 285.9"/>

              <path class="circle drop d1" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M65.9 260.05 Q72 260.05 76.25 264.35 80.55 268.6 80.55 274.7 80.55 280.8 76.25 285.1 72 289.35 65.9 289.35 59.8 289.35 55.55 285.1 51.25 280.8 51.25 274.7 51.25 268.6 55.55 264.35 59.8 260.05 65.9 260.05"/>
              <path class="circle drop d2" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M123.35 238.65 Q129.45 238.65 133.7 242.95 138 247.2 138 253.3 138 259.4 133.7 263.7 129.45 267.95 123.35 267.95 117.25 267.95 113 263.7 108.7 259.4 108.7 253.3 108.7 247.2 113 242.95 117.25 238.65 123.35 238.65"/>
              <path class="circle drop d3" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M146.3 296.2 Q142 291.9 142 285.8 142 279.7 146.3 275.45 150.55 271.15 156.65 271.15 162.75 271.15 167 275.45 171.3 279.7 171.3 285.8 171.3 291.9 167 296.2 162.75 300.45 156.65 300.45 150.55 300.45 146.3 296.2"/>
              <path class="circle drop d4" data-origin="50% 100%" stroke="none" fill="#ffffff" d="M224.45 285.9 Q228.75 290.15 228.75 296.25 228.75 302.35 224.45 306.65 220.2 310.9 214.1 310.9 208 310.9 203.75 306.65 199.45 302.35 199.45 296.25 199.45 290.15 203.75 285.9 208 281.6 214.1 281.6 220.2 281.6 224.45 285.9"/>
            </g>
          </g>
        </g>

        <g class="droplets">
          <g class="d1">
            <path class="drop drop-1" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M65 394.5 Q65 396.75 63.4 398.4 61.75 400 59.5 400 57.25 400 55.6 398.4 54 396.75 54 394.5 54 392.25 55.6 390.6 57.25 389 59.5 389 61.75 389 63.4 390.6 65 392.25 65 394.5"/>
            <path class="drop drop-2" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M71 394.5 Q71 396.75 69.4 398.4 67.75 400 65.5 400 63.25 400 61.6 398.4 60 396.75 60 394.5 60 392.25 61.6 390.6 63.25 389 65.5 389 67.75 389 69.4 390.6 71 392.25 71 394.5"/>
            <path class="drop drop-3" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M77 394.5 Q77 396.75 75.4 398.4 73.75 400 71.5 400 69.25 400 67.6 398.4 66 396.75 66 394.5 66 392.25 67.6 390.6 69.25 389 71.5 389 73.75 389 75.4 390.6 77 392.25 77 394.5"/>
            <path class="path-2 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M65.6 394.45 Q65.3 371.4 48.05 386.95"/>
            <path class="path-1 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M29.95 381.95 Q34.95 377.55 41.75 377.55 49.15 377.55 54.35 382.75 59.25 387.65 59.6 394.45"/>
            <path class="path-3 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M71.3 394.65 Q72.95 356.3 97.3 382.25"/>
          </g>

          <g class="d2">
            <path class="drop drop-1" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M123 394.5 Q123 396.75 121.4 398.4 119.75 400 117.5 400 115.25 400 113.6 398.4 112 396.75 112 394.5 112 392.25 113.6 390.6 115.25 389 117.5 389 119.75 389 121.4 390.6 123 392.25 123 394.5"/>
            <path class="drop drop-2" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M129 394.5 Q129 396.75 127.4 398.4 125.75 400 123.5 400 121.25 400 119.6 398.4 118 396.75 118 394.5 118 392.25 119.6 390.6 121.25 389 123.5 389 125.75 389 127.4 390.6 129 392.25 129 394.5"/>
            <path class="drop drop-3" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M135 394.5 Q135 396.75 133.4 398.4 131.75 400 129.5 400 127.25 400 125.6 398.4 124 396.75 124 394.5 124 392.25 125.6 390.6 127.25 389 129.5 389 131.75 389 133.4 390.6 135 392.25 135 394.5"/>
            <path class="path-2 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M123.6 394.45 Q123.3 371.4 106.05 386.95"/>
            <path class="path-1 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M87.95 381.95 Q92.95 377.55 99.75 377.55 107.15 377.55 112.35 382.75 117.25 387.65 117.6 394.45"/>
            <path class="path-3 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M129.3 394.65 Q130.95 356.3 155.3 382.25"/>
          </g>

          <g class="d3">
            <path class="drop drop-1" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M156 394.5 Q156 396.75 154.4 398.4 152.75 400 150.5 400 148.25 400 146.6 398.4 145 396.75 145 394.5 145 392.25 146.6 390.6 148.25 389 150.5 389 152.75 389 154.4 390.6 156 392.25 156 394.5"/>
            <path class="drop drop-2" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M162 394.5 Q162 396.75 160.4 398.4 158.75 400 156.5 400 154.25 400 152.6 398.4 151 396.75 151 394.5 151 392.25 152.6 390.6 154.25 389 156.5 389 158.75 389 160.4 390.6 162 392.25 162 394.5"/>
            <path class="drop drop-3" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M168 394.5 Q168 396.75 166.4 398.4 164.75 400 162.5 400 160.25 400 158.6 398.4 157 396.75 157 394.5 157 392.25 158.6 390.6 160.25 389 162.5 389 164.75 389 166.4 390.6 168 392.25 168 394.5"/>
            <path class="path-2 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M156.6 394.45 Q156.3 371.4 139.05 386.95"/>
            <path class="path-1 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M120.95 381.95 Q125.95 377.55 132.75 377.55 140.15 377.55 145.35 382.75 150.25 387.65 150.6 394.45"/>
            <path class="path-3 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M162.3 394.65 Q163.95 356.3 188.3 382.25"/>
          </g>

          <g class="d4">
            <path class="drop drop-1" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M214 394.5 Q214 396.75 212.4 398.4 210.75 400 208.5 400 206.25 400 204.6 398.4 203 396.75 203 394.5 203 392.25 204.6 390.6 206.25 389 208.5 389 210.75 389 212.4 390.6 214 392.25 214 394.5"/>
            <path class="drop drop-2" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M220 394.5 Q220 396.75 218.4 398.4 216.75 400 214.5 400 212.25 400 210.6 398.4 209 396.75 209 394.5 209 392.25 210.6 390.6 212.25 389 214.5 389 216.75 389 218.4 390.6 220 392.25 220 394.5"/>
            <path class="drop drop-3" data-origin="50% 50%" stroke="none" fill="#ffffff" d="M226 394.5 Q226 396.75 224.4 398.4 222.75 400 220.5 400 218.25 400 216.6 398.4 215 396.75 215 394.5 215 392.25 216.6 390.6 218.25 389 220.5 389 222.75 389 224.4 390.6 226 392.25 226 394.5"/>
            <path class="path-2 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M214.6 394.45 Q214.3 371.4 197.05 386.95"/>
            <path class="path-1 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M178.95 381.95 Q183.95 377.55 190.75 377.55 198.15 377.55 203.35 382.75 208.25 387.65 208.6 394.45"/>
            <path class="path-3 motion-path" fill="none" stroke="#750850" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M220.3 394.65 Q221.95 356.3 246.3 382.25"/>
          </g>
        </g>

        <g class="face">
          <g class="open">
            <path class="mouth bg" stroke="#750850" stroke-width="2" fill="#750850" d="M160.05 186.55 L161 186.7 161.85 187.1 162.55 187.8 162.95 188.65 163.15 189.6 Q163.1 193 162.25 196.15 161.4 199.25 159.8 202 158.15 204.7 155.95 206.95 153.7 209.15 151 210.8 148.25 212.35 145.15 213.25 L138.65 214.1 Q133.5 214.05 129.1 212.2 124.65 210.3 121.3 206.95 117.95 203.55 116.05 199.15 114.15 194.7 114.15 189.6 L114.3 188.65 114.7 187.8 115.4 187.1 116.25 186.7 117.2 186.55 160.05 186.55"/>
            <path class="mouth teeth" stroke="#750850" stroke-width="2" fill="#ffffff" d="M160.05 186.55 Q161.35 186.55 162.2 187.45 163.1 188.3 163.15 189.6 L163.05 191.55 162.85 193.4 162.5 195.2 162 197 161.4 198.7 160.65 200.35 116.6 200.35 115.85 198.7 115.25 197 114.75 195.2 114.4 193.4 114.2 191.55 114.15 189.6 114.3 188.65 114.7 187.8 115.4 187.1 116.25 186.7 117.2 186.55 160.05 186.55"/>
            <path class="mouth tongue" stroke="#750850" stroke-width="2" fill="#ff5ea9" d="M147.15 212.6 L145.1 213.25 143 213.75 140.85 214 138.6 214.1 136.4 214 134.2 213.75 132.1 213.25 130.05 212.6 128.1 211.75 126.25 210.75 125.75 210.35 125.3 209.95 Q125.25 209.35 125.8 208.75 L127.3 207.6 Q127.75 207.3 128.35 207.05 128.9 206.75 129.55 206.5 130.15 206.2 130.85 206 L132.3 205.6 133.8 205.25 135.4 204.95 137 204.8 138.6 204.75 141.05 204.85 143.4 205.25 145.65 205.8 147.7 206.5 149.4 207.3 Q150.15 207.7 150.75 208.2 151.9 209.1 151.95 209.95 L151.45 210.35 151 210.75 149.1 211.75 147.15 212.6"/>
            <g class="eye right" data-origin="50% 50%">
              <path class="pupil" data-origin="50% 50%" stroke="#750850" stroke-width="2" fill="#203b6e" d="M186.95 176.4 L186.55 177 185.95 177.4 185.15 177.55 Q184.3 177.55 183.8 177 183.25 176.45 183.25 175.6 183.25 175.2 183.4 174.85 L183.8 174.25 Q184.05 173.95 184.4 173.85 L185.15 173.7 185.95 173.85 186.55 174.25 186.95 174.85 187.1 175.6 186.95 176.4"/>
              <path class="blink left" fill="none" stroke="#750850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M188.55 175.55 L181.8 175.55"/>
            </g>
            <g class="eye left" data-origin="50% 50%">
              <path class="pupil" data-origin="50% 50%" stroke="#750850" stroke-width="2" fill="#203b6e" d="M93.8 176.4 L93.4 177 92.8 177.4 92 177.55 91.25 177.4 90.65 177 Q90.1 176.45 90.1 175.6 L90.25 174.85 90.65 174.25 Q90.9 173.95 91.25 173.85 L92 173.7 92.8 173.85 Q93.15 173.95 93.4 174.25 L93.8 174.85 93.95 175.6 93.8 176.4"/>
              <path class="blink right" fill="none" stroke="#750850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M95.25 175.55 L88.5 175.55"/>
            </g>
            <path class="eyes closed" fill="none" stroke="#750850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M191.1 179 L185.1 175.5 191.1 172 M86.3 179 L92.3 175.5 86.3 172"/>
          </g>

          <g class="closed">
            <path class="eye left" fill="none" stroke="#750850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M87.65 176.7 Q92.45 173.5 96.9 176.7"/>
            <path  class="eye right" fill="none" stroke="#750850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M180.65 176.7 Q185.45 173.5 189.9 176.7"/>
            <path class="mouth" fill="none" stroke="#750850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M116 191.05 Q136.65 196.6 161 191.05"/>
          </g>
          <path class="blush right" stroke="none" fill="#f6aacf" d="M189.45 190.5 L190.1 191.5 190.65 192.55 191.05 193.7 191.3 194.9 191.4 196.2 191.3 197.45 191.05 198.65 190.65 199.8 190.1 200.9 189.45 201.85 188.65 202.75 187.75 203.55 186.8 204.2 185.7 204.75 184.55 205.15 183.35 205.4 182.1 205.5 178.45 204.75 Q176.75 204.05 175.5 202.75 174.2 201.5 173.5 199.8 172.8 198.1 172.8 196.2 172.75 195.55 172.85 194.9 L173.1 193.7 173.5 192.55 174.05 191.5 174.7 190.5 175.5 189.6 176.4 188.8 177.4 188.15 178.45 187.6 179.6 187.2 180.8 186.95 182.1 186.9 183.35 186.95 184.55 187.2 185.7 187.6 186.8 188.15 187.75 188.8 188.65 189.6 189.45 190.5"/>
          <path class="blush left" stroke="none" fill="#f6aacf" d="M102.5 190.5 L103.15 191.5 103.7 192.55 104.1 193.7 104.35 194.9 104.45 196.2 104.35 197.45 104.1 198.65 103.7 199.8 103.15 200.9 102.5 201.85 101.7 202.75 100.8 203.55 99.85 204.2 98.75 204.75 97.6 205.15 96.4 205.4 95.15 205.5 91.5 204.75 Q89.8 204.05 88.55 202.75 87.25 201.5 86.55 199.8 85.85 198.1 85.85 196.2 L85.9 194.9 86.15 193.7 86.55 192.55 87.1 191.5 87.75 190.5 88.55 189.6 Q88.95 189.15 89.45 188.8 89.9 188.45 90.45 188.15 90.95 187.85 91.5 187.6 92.05 187.35 92.65 187.2 L93.85 186.95 95.15 186.9 96.4 186.95 97.6 187.2 98.75 187.6 99.85 188.15 100.8 188.8 101.7 189.6 102.5 190.5"/>
        </g>

        <g class="topping">
          <path class="icing" filter="url(#drop-shadow)" stroke="#750850" stroke-width="2" fill="#ff5ea9" d="M103.45 169 Q92.35 163.3 85.05 157.9 67.75 145 47.25 152.4 54.15 131.8 71.1 115.3 99.75 87.5 140.25 87.5 180.75 87.5 209.35 115.3 224.65 130.2 231.8 148.35 229.7 153.85 224.5 159.35 206.85 175.85 189.05 163.25 170.75 150.4 152.5 160.75 L135 170.7 Q120.6 177.25 103.45 169"/>
          <path class="shine" mask="url(#icing-mask)" stroke="none" fill="#ffffff" fill-opacity="0.6" d="M59.8 151.8 Q59.45 163.85 82.6 173.1 57.5 204 39.3 172.4 L49.1 150.7 50 148.3 51.45 144.75 53.1 141.15 54.9 137.75 56.9 134.3 58.3 132.05 60.55 128.75 62.15 126.6 63.85 124.45 65.55 122.35 67.4 120.3 69.3 118.25 71.25 116.25 74.05 113.6 75.85 112.05 77.65 110.5 79.45 109 81.35 107.6 83.2 106.2 85.1 104.9 87 103.65 88.95 102.4 90.9 101.25 92.9 100.15 94.85 99.05 96.9 98.05 98.9 97.05 101 96.15 103.05 95.25 105.2 94.5 107.3 93.75 109.5 93.05 111.65 92.4 113.9 91.85 116.1 91.3 118.4 90.8 120.6 90.3 122.95 89.95 125.25 89.6 127.6 89.3 129.9 89.1 132.3 88.9 134.65 88.75 137.1 88.65 139.5 88.6 Q95.05 93.9 68.2 128.8 60.1 139.7 59.8 151.8"/>
        </g>

        <g class="cherry">
          <g class="cherry-shadow" mask="url(#cherry-shadow-mask)">
            <path class="shadow" data-origin="50% 50%" stroke="none" fill="#660033" fill-opacity="0.4" d="M154.75 90.45 L153.75 92.45 152.5 94.3 151 96 149.3 97.5 Q148.4 98.15 147.45 98.75 L145.45 99.75 143.25 100.5 141 101 138.6 101.15 136.25 101 133.95 100.5 Q132.8 100.2 131.8 99.75 L129.75 98.75 127.9 97.5 126.2 96 124.75 94.3 123.45 92.45 122.45 90.45 121.7 88.25 121.25 86 121.1 83.6 Q121.05 82.4 121.25 81.25 121.4 80.05 121.7 78.95 122 77.8 122.45 76.8 L123.45 74.75 124.75 72.9 126.2 71.2 127.9 69.75 Q128.75 69.05 129.75 68.45 130.7 67.9 131.8 67.45 132.8 67 133.95 66.7 L136.25 66.25 138.6 66.1 Q142.25 66.1 145.45 67.45 148.6 68.8 151 71.2 153.4 73.6 154.75 76.8 156.1 79.95 156.15 83.6 L156 86 155.5 88.25 154.75 90.45"/>
          </g>

          <g class="cherry-body" data-origin="50% 100%">
            <path class="stem" stroke="#750850" stroke-width="2" fill="#00c3bf" d="M147.7 51 L148.6 51.1 Q149.1 51.25 149.6 51.55 L150.35 52.25 150.9 53.2 151.15 54.3 151 55.35 150.55 56.3 149.85 57.1 148.9 57.65 Q148.05 57.95 147.3 58.35 146.55 58.75 145.95 59.2 L144.8 60.15 143.85 61.15 143.1 62.3 142.5 63.5 Q142.2 64.1 142.05 64.75 L141.75 66 141.6 67.3 141.6 68.55 141.7 69.85 141.95 71.05 142 72.1 141.75 73.1 141.2 74 140.45 74.65 139.5 75.1 139.3 75.15 138.55 75.25 137.95 75.2 Q137.25 75.05 136.7 74.7 L135.75 73.8 135.2 72.55 Q134.55 69.55 134.8 66.4 135.05 63.25 136.4 60.35 137.7 57.4 140.2 55.05 142.65 52.65 146.5 51.2 L147.55 51 147.7 51"/>
            <path class="fruit" stroke="#750850" stroke-width="2" fill="#fd1c3f" d="M154.75 87.45 L153.75 89.45 152.5 91.3 151 93 149.3 94.5 Q148.4 95.15 147.45 95.75 L145.45 96.75 143.25 97.5 141 98 138.6 98.15 136.25 98 133.95 97.5 Q132.8 97.2 131.8 96.75 L129.75 95.75 127.9 94.5 126.2 93 124.75 91.3 123.45 89.45 122.45 87.45 121.7 85.25 121.25 83 121.1 80.6 Q121.05 79.4 121.25 78.25 121.4 77.05 121.7 75.95 122 74.8 122.45 73.8 L123.45 71.75 124.75 69.9 126.2 68.2 127.9 66.75 Q128.75 66.05 129.75 65.45 130.7 64.9 131.8 64.45 132.8 64 133.95 63.7 L136.25 63.25 138.6 63.1 Q142.25 63.1 145.45 64.45 148.6 65.8 151 68.2 153.4 70.6 154.75 73.8 156.1 76.95 156.15 80.6 L156 83 155.5 85.25 154.75 87.45"/>
            <path class="glow" fill="none" stroke="#ffffff" stroke-width="4.25" stroke-opacity="0.4980392156862745" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" d="M128.05 78 Q127.75 79.25 127.75 80.55 L127.8 81.4"/>
            <path class="glow" fill="none" stroke="#ffffff" stroke-width="4.25" stroke-opacity="0.4980392156862745" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" d="M138.55 69.75 L135.75 70.15 Q134.35 70.5 133.2 71.2 132 71.85 131 72.85"/>
          </g>
        </g>

        <g class="sprinkles" filter="url(#drop-shadow-sprinkles)">
          <g class="sprinkle s1" data-origin="50% 50%">
            <path stroke="none" fill="#ffbd62" d="M117.05 101.6 L117.75 101.65 118.6 102 119.35 102.65 119.85 103.45 124.1 113.95 124.35 114.85 124.25 115.8 123.9 116.65 123.3 117.35 122.45 117.85 121.35 118.1 121.3 118.1 120.15 117.85 119.2 117.2 118.55 116.2 114.25 105.75 114.05 104.8 Q114 104.3 114.1 103.85 L114.45 103 115.1 102.3 Q115.45 102 115.9 101.8 L116.85 101.6 117.05 101.6"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M119.75 106.6 L119.05 106.55 118.85 106.55 117.95 106.75 Q117.45 106.95 117.1 107.25 116.75 107.55 116.55 107.95 116.3 108.3 116.2 108.75 L116.1 109.7 116.3 110.6 116.3 110.65 116.25 110.65 114.25 105.75 114.05 104.8 Q114 104.3 114.1 103.85 L114.45 103 115.1 102.3 Q115.45 102 115.9 101.8 L117.05 101.6 118.2 101.8 Q118.75 102.05 119.15 102.45 L119.85 103.45 121.85 108.35 121.8 108.4 121.3 107.55 120.6 106.95 119.75 106.6"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M123.9 116.65 L123.3 117.35 122.45 117.85 121.5 118.05 121.3 118.05 120.6 118 119.75 117.65 119 117 118.5 116.2 117.35 113.3 117.35 113.25 118.05 114.25 119 114.85 120.1 115.1 121.25 114.85 122.05 114.4 122.65 113.7 123 112.85 123.05 111.95 122.85 111.05 122.85 111 124.1 113.9 124.35 114.85 124.25 115.8 123.9 116.65"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M114.3 103.45 Q114.5 102.9 114.95 102.5 L115.9 101.85 117.1 101.6 118.2 101.85 119.15 102.5 119.8 103.45 124.1 113.95 124.3 115.1 124.1 116.25 123.45 117.2 122.45 117.85 120.15 117.8 Q119.05 117.35 118.55 116.2 L114.3 105.7 114.05 104.55 Q114.05 103.95 114.3 103.45"/>
          </g>

          <g class="sprinkle s2" data-origin="50% 50%">
            <path stroke="none" fill="#ffbd62" d="M72.55 127.6 L73.25 127.65 Q73.7 127.75 74.1 128 L74.85 128.65 75.35 129.45 79.6 139.95 79.85 140.85 79.75 141.8 79.4 142.65 78.8 143.35 77.95 143.85 76.85 144.1 76.8 144.1 75.65 143.85 Q75.1 143.6 74.7 143.2 L74.05 142.2 69.75 131.75 69.55 130.8 Q69.5 130.3 69.6 129.85 69.7 129.4 69.95 129 70.2 128.6 70.6 128.3 L71.4 127.8 72.35 127.6 72.55 127.6"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M75.25 132.6 L74.55 132.55 74.35 132.55 73.45 132.75 Q72.95 132.95 72.6 133.25 L72.05 133.95 Q71.8 134.3 71.7 134.75 L71.6 135.7 71.8 136.6 71.8 136.65 71.75 136.65 69.75 131.75 69.55 130.8 Q69.5 130.3 69.6 129.85 69.7 129.4 69.95 129 70.2 128.6 70.6 128.3 L71.4 127.8 72.55 127.6 73.7 127.8 Q74.25 128.05 74.65 128.45 L75.35 129.45 77.35 134.35 77.3 134.4 76.8 133.55 76.1 132.95 Q75.7 132.7 75.25 132.6"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M79.4 142.65 L78.8 143.35 77.95 143.85 77 144.05 76.8 144.05 76.1 144 75.25 143.65 74.5 143 74 142.2 72.85 139.3 72.85 139.25 73.55 140.25 74.5 140.85 75.6 141.1 76.75 140.85 77.55 140.4 78.15 139.7 78.5 138.85 78.55 137.95 78.35 137.05 78.35 137 79.6 139.9 79.85 140.85 79.75 141.8 79.4 142.65"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M69.8 129.45 Q70 128.9 70.45 128.5 L71.4 127.85 72.6 127.6 73.7 127.85 74.65 128.5 75.3 129.45 79.6 139.95 79.8 141.1 79.6 142.25 78.95 143.2 77.95 143.85 75.65 143.8 Q74.55 143.35 74.05 142.2 L69.8 131.7 69.55 130.55 69.8 129.45"/>
          </g>

          <g class="sprinkle s3" data-origin="50% 50%">
            <path stroke="none" fill="#ffbd62" d="M138.3 122.6 L139 122.65 139.85 123 140.6 123.65 141.1 124.45 145.35 134.95 145.6 135.85 145.5 136.8 145.15 137.65 144.55 138.35 143.7 138.85 142.6 139.1 142.55 139.1 141.4 138.85 Q140.85 138.6 140.45 138.2 140 137.8 139.8 137.2 L135.5 126.75 135.3 125.8 Q135.25 125.3 135.35 124.85 L135.7 124 Q135.95 123.6 136.35 123.3 L137.15 122.8 138.1 122.6 138.3 122.6"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M141 127.6 L140.3 127.55 140.1 127.55 139.2 127.75 138.35 128.25 Q138 128.55 137.8 128.95 137.55 129.3 137.45 129.75 L137.35 130.7 137.55 131.6 137.55 131.65 137.5 131.65 135.5 126.75 135.3 125.8 Q135.25 125.3 135.35 124.85 L135.7 124 Q135.95 123.6 136.35 123.3 L137.15 122.8 138.3 122.6 139.45 122.8 Q140 123.05 140.4 123.45 L141.1 124.45 143.1 129.35 143.05 129.4 142.55 128.55 141.85 127.95 Q141.45 127.7 141 127.6"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M145.15 137.65 L144.55 138.35 143.7 138.85 142.75 139.05 142.55 139.05 141.85 139 141 138.65 140.25 138 139.75 137.2 138.6 134.3 138.6 134.25 139.3 135.25 140.25 135.85 141.35 136.1 142.5 135.85 143.3 135.4 143.9 134.7 144.25 133.85 144.3 132.95 144.1 132.05 144.1 132 145.35 134.9 145.6 135.85 145.5 136.8 145.15 137.65"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M135.55 124.45 L136.2 123.5 137.15 122.85 138.35 122.6 139.45 122.85 140.4 123.5 141.05 124.45 145.35 134.95 145.55 136.1 145.35 137.25 144.7 138.2 143.7 138.85 141.4 138.8 Q140.3 138.35 139.8 137.2 L135.55 126.7 135.3 125.55 Q135.3 124.95 135.55 124.45"/>
          </g>

          <g class="sprinkle s4" data-origin="50% 50%">
            <path stroke="none" fill="#00c3bf" d="M93.4 114.75 L94.05 114.5 94.95 114.45 95.95 114.7 Q96.4 114.9 96.75 115.25 L105 122.95 105.65 123.65 105.95 124.55 106 125.5 105.75 126.35 105.15 127.2 104.25 127.85 104.2 127.9 103.1 128.15 101.95 127.95 Q101.35 127.8 100.95 127.35 L92.65 119.65 92.05 118.9 91.7 118.05 91.65 117.1 91.95 116.2 92.5 115.4 93.25 114.8 93.4 114.75"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M97.95 118.15 Q97.6 118.2 97.35 118.4 L97.15 118.45 96.45 119 95.85 119.8 95.65 120.7 95.65 121.6 95.95 122.5 96.55 123.2 96.55 123.25 96.5 123.25 92.65 119.65 92.05 118.9 91.7 118.05 91.65 117.1 91.95 116.2 92.5 115.4 93.4 114.75 94.55 114.45 95.65 114.6 Q96.3 114.8 96.75 115.25 L100.6 118.8 100.55 118.85 99.75 118.35 98.9 118.1 97.95 118.15"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M106 125.55 L105.75 126.45 105.15 127.25 104.4 127.85 104.25 127.95 103.55 128.2 102.65 128.25 101.7 127.95 100.9 127.4 98.6 125.3 98.6 125.25 99.65 125.85 100.8 126 101.9 125.75 102.85 125.05 103.35 124.3 103.6 123.4 103.55 122.5 103.2 121.65 102.65 120.95 102.65 120.9 105 123 105.65 123.75 105.95 124.65 106 125.55"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M91.75 117.6 Q91.65 117 91.9 116.4 L92.5 115.45 Q92.9 114.95 93.45 114.7 L94.55 114.5 95.7 114.65 96.7 115.25 105 122.95 105.7 123.9 106 125.05 105.8 126.2 105.15 127.2 Q104.3 128.05 103.1 128.1 101.9 128.15 100.95 127.35 L92.7 119.6 91.95 118.65 Q91.7 118.15 91.75 117.6"/>
          </g>

          <g class="sprinkle s5" data-origin="50% 50%">
            <path stroke="none" fill="#00c3bf" d="M125.4 146.25 Q125.75 146.05 126.05 146 L126.95 145.95 127.95 146.2 Q128.4 146.4 128.75 146.75 L137 154.45 137.65 155.15 137.95 156.05 138 157 137.75 157.85 137.15 158.7 136.25 159.35 136.2 159.4 135.1 159.65 133.95 159.45 132.95 158.85 124.65 151.15 124.05 150.4 123.7 149.55 123.65 148.6 123.95 147.7 Q124.1 147.25 124.5 146.9 L125.25 146.3 125.4 146.25"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M129.95 149.65 Q129.6 149.7 129.35 149.9 L129.15 149.95 Q128.7 150.2 128.45 150.5 L127.85 151.3 127.65 152.2 127.65 153.1 127.95 154 128.55 154.7 128.55 154.75 128.5 154.75 124.65 151.15 124.05 150.4 123.7 149.55 123.65 148.6 123.95 147.7 Q124.1 147.25 124.5 146.9 L125.4 146.25 126.55 145.95 127.65 146.1 Q128.3 146.3 128.75 146.75 L132.6 150.3 132.55 150.35 131.75 149.85 130.9 149.6 129.95 149.65"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M138 157.05 L137.75 157.95 137.15 158.75 136.4 159.35 136.25 159.45 135.55 159.7 134.65 159.75 133.7 159.45 132.9 158.9 130.6 156.8 130.6 156.75 131.65 157.35 132.8 157.5 133.9 157.25 134.85 156.55 135.35 155.8 135.6 154.9 135.55 154 135.2 153.15 134.65 152.45 134.65 152.4 137 154.5 137.65 155.25 137.95 156.15 138 157.05"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M123.75 149.1 Q123.65 148.5 123.9 147.9 L124.5 146.95 125.45 146.2 126.55 146 127.7 146.15 128.7 146.75 137 154.45 137.7 155.4 138 156.55 137.8 157.7 137.15 158.7 Q136.3 159.55 135.1 159.6 133.9 159.65 132.95 158.85 L124.7 151.1 123.95 150.15 Q123.7 149.65 123.75 149.1"/>
          </g>

          <g class="sprinkle s6" data-origin="50% 50%">
            <path stroke="none" fill="#ffffff" d="M96 149.65 L95.85 148.95 95.95 148.05 96.35 147.15 96.95 146.4 105.75 139.3 106.55 138.8 107.5 138.6 108.4 138.7 109.25 139.05 110 139.7 110.55 140.7 110.6 140.75 110.65 141.9 110.3 143.05 109.55 143.95 100.8 151.1 99.95 151.55 99.05 151.8 98.15 151.7 97.25 151.3 96.55 150.7 96.1 149.8 96 149.65"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M100.05 145.6 L100.2 146.25 100.25 146.45 100.65 147.25 101.4 147.95 102.2 148.25 103.1 148.35 104.05 148.2 104.85 147.7 104.9 147.7 104.9 147.75 100.8 151.1 99.95 151.55 99.05 151.8 98.15 151.7 97.25 151.3 96.55 150.7 96 149.65 95.9 148.5 96.2 147.35 96.95 146.4 101.05 143.1 101.15 143.1 100.5 143.8 100.1 144.7 Q100 145.1 100.05 145.6"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M108.5 138.7 L109.3 139.05 110.05 139.7 110.55 140.6 110.6 140.75 110.75 141.45 110.65 142.35 110.25 143.25 109.6 144 107.2 145.95 107.15 145.95 107.9 145 108.2 143.85 108.1 142.75 107.55 141.7 106.9 141.1 106.05 140.75 105.1 140.65 104.25 140.85 103.45 141.35 103.4 141.35 105.8 139.3 Q106.15 138.95 106.65 138.75 L107.6 138.6 108.5 138.7"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M98.6 151.7 L97.5 151.4 96.6 150.7 96 149.6 95.95 148.5 96.25 147.35 96.95 146.45 105.75 139.3 Q106.25 138.95 106.8 138.75 L107.95 138.6 109.05 138.95 110 139.7 Q110.7 140.75 110.6 141.9 110.5 143.1 109.55 143.95 L100.75 151.05 Q100.3 151.45 99.7 151.65 L98.6 151.7"/>
          </g>

          <g class="sprinkle s7" data-origin="50% 50%">
            <path stroke="none" fill="#00c3bf" d="M154.15 114.9 L154 114.2 154.1 113.3 154.5 112.4 155.1 111.65 163.9 104.55 164.7 104.05 165.65 103.85 166.55 103.95 Q167.05 104.05 167.4 104.3 L168.15 104.95 168.7 105.95 168.75 106 168.8 107.15 168.45 108.25 167.7 109.2 158.95 116.35 158.1 116.8 157.2 117.05 156.3 116.95 155.4 116.55 154.7 115.95 154.25 115.05 154.15 114.9"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M158.2 110.85 L158.35 111.5 158.4 111.7 Q158.55 112.2 158.85 112.5 L159.55 113.2 160.35 113.5 161.25 113.6 162.2 113.45 163 112.95 163.05 112.95 163.05 113 158.95 116.35 158.1 116.8 157.2 117.05 156.3 116.95 155.4 116.55 154.7 115.95 154.15 114.9 154.05 113.75 154.35 112.6 155.1 111.65 159.2 108.35 159.3 108.35 158.65 109.05 158.25 109.95 Q158.15 110.35 158.2 110.85"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M166.55 104.05 L167.35 104.4 168.1 105.05 168.6 105.95 168.65 106.1 168.8 106.8 168.7 107.7 168.3 108.6 167.65 109.35 165.25 111.3 165.2 111.3 165.95 110.35 166.25 109.2 166.15 108.1 165.6 107.05 164.95 106.45 164.1 106.1 163.15 106 162.3 106.2 Q161.85 106.35 161.5 106.7 L161.45 106.7 163.85 104.65 Q164.2 104.3 164.7 104.1 L165.65 103.95 166.55 104.05"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M156.75 116.95 L155.65 116.65 154.75 115.95 154.15 114.85 154.1 113.75 154.4 112.6 155.1 111.7 163.9 104.55 Q164.4 104.2 164.95 104 L166.1 103.85 167.2 104.2 168.15 104.95 Q168.85 106 168.75 107.15 168.65 108.35 167.7 109.2 L158.9 116.3 Q158.45 116.7 157.85 116.9 L156.75 116.95"/>
          </g>

          <g class="sprinkle s8" data-origin="50% 50%">
            <path stroke="none" fill="#ffffff" d="M161.05 132.4 Q161.4 132.2 161.7 132.15 L162.6 132.1 163.6 132.35 164.4 132.9 172.65 140.6 173.3 141.3 173.6 142.2 173.65 143.15 173.4 144 172.8 144.85 171.9 145.5 171.85 145.55 170.75 145.8 169.6 145.6 Q169 145.45 168.6 145 L160.3 137.3 159.7 136.55 159.35 135.7 159.3 134.75 159.6 133.85 160.15 133.05 Q160.45 132.7 160.9 132.45 L161.05 132.4"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M165.6 135.8 Q165.25 135.85 165 136.05 L164.8 136.1 164.1 136.65 163.5 137.45 163.3 138.35 163.3 139.25 163.6 140.15 164.2 140.85 164.2 140.9 164.15 140.9 160.3 137.3 159.7 136.55 159.35 135.7 159.3 134.75 159.6 133.85 160.15 133.05 161.05 132.4 162.2 132.1 163.3 132.25 164.4 132.9 168.25 136.45 168.2 136.5 167.4 136 166.55 135.75 165.6 135.8"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M173.65 143.2 L173.4 144.1 172.8 144.9 172.05 145.5 171.9 145.6 171.2 145.85 170.3 145.9 169.35 145.6 Q168.9 145.4 168.55 145.05 L166.25 142.95 166.25 142.9 167.3 143.5 168.45 143.65 169.55 143.4 170.5 142.7 171 141.95 171.25 141.05 171.2 140.15 170.85 139.3 170.3 138.6 170.3 138.55 172.65 140.65 173.3 141.4 173.6 142.3 173.65 143.2"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M159.4 135.25 Q159.3 134.65 159.55 134.05 L160.15 133.1 Q160.55 132.6 161.1 132.35 L162.2 132.15 163.35 132.3 164.35 132.9 172.65 140.6 Q173.1 141 173.35 141.55 L173.65 142.7 173.45 143.85 172.8 144.85 Q171.95 145.7 170.75 145.75 169.55 145.8 168.6 145 L160.35 137.25 159.6 136.3 Q159.35 135.8 159.4 135.25"/>
          </g>

          <g class="sprinkle s9" data-origin="50% 50%">
            <path stroke="none" fill="#ffffff" d="M191.8 115.15 L192.45 114.9 193.35 114.85 194.35 115.1 195.15 115.65 203.4 123.35 204.05 124.05 204.35 124.95 204.4 125.9 204.15 126.75 203.55 127.6 202.65 128.25 202.6 128.3 201.5 128.55 200.35 128.35 Q199.75 128.2 199.35 127.75 L191.05 120.05 190.45 119.3 190.1 118.45 190.05 117.5 190.35 116.6 190.9 115.8 191.65 115.2 191.8 115.15"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M196.35 118.55 Q196 118.6 195.75 118.8 L195.55 118.85 194.85 119.4 194.25 120.2 194.05 121.1 194.05 122 194.35 122.9 194.95 123.6 194.95 123.65 194.9 123.65 191.05 120.05 190.45 119.3 190.1 118.45 190.05 117.5 190.35 116.6 190.9 115.8 191.8 115.15 192.95 114.85 194.05 115 Q194.7 115.2 195.15 115.65 L199 119.2 198.95 119.25 198.15 118.75 197.3 118.5 196.35 118.55"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M204.4 125.95 L204.15 126.85 203.55 127.65 202.8 128.25 202.65 128.35 201.95 128.6 201.05 128.65 200.1 128.35 199.3 127.8 197 125.7 197 125.65 198.05 126.25 199.2 126.4 200.3 126.15 201.25 125.45 201.75 124.7 202 123.8 201.95 122.9 201.6 122.05 201.05 121.35 201.05 121.3 203.4 123.4 204.05 124.15 204.35 125.05 204.4 125.95"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M190.15 118 Q190.05 117.4 190.3 116.8 L190.9 115.85 Q191.3 115.35 191.85 115.1 L192.95 114.9 194.1 115.05 195.1 115.65 203.4 123.35 204.1 124.3 204.4 125.45 204.2 126.6 203.55 127.6 Q202.7 128.45 201.5 128.5 200.3 128.55 199.35 127.75 L191.1 120 190.35 119.05 Q190.1 118.55 190.15 118"/>
          </g>

          <g class="sprinkle s10" data-origin="50% 50%">
            <path stroke="none" fill="#ffbd62" d="M188.1 149.3 L187.95 148.65 188.05 147.7 188.4 146.8 189 146.1 197.7 138.8 Q198.05 138.45 198.45 138.25 L199.4 138.05 200.3 138.15 Q200.8 138.25 201.2 138.5 L201.9 139.15 202.5 140.1 202.5 140.15 202.6 141.35 202.3 142.45 201.55 143.35 192.95 150.65 192.1 151.15 191.2 151.4 190.3 151.3 189.4 150.95 188.7 150.35 188.2 149.5 188.1 149.3"/>
            <path stroke="none" fill="#ffffff" fill-opacity="0.6" d="M192.05 145.2 L192.2 145.85 192.25 146.05 192.75 146.85 193.45 147.5 Q193.85 147.75 194.35 147.8 L195.2 147.9 196.1 147.7 Q196.55 147.55 196.9 147.2 L196.95 147.2 196.95 147.25 192.95 150.65 192.1 151.15 191.2 151.4 190.3 151.3 189.4 150.95 188.7 150.35 Q188.25 149.85 188.1 149.3 L187.95 148.15 188.25 147.05 Q188.55 146.45 189 146.1 L193.05 142.65 193.1 142.7 192.45 143.4 192.15 144.25 192.05 145.2"/>
            <path stroke="none" fill="#750850" fill-opacity="0.2980392156862745" d="M200.25 138.05 L201.1 138.45 201.8 139.1 202.3 139.9 202.4 140.1 202.55 140.8 202.45 141.7 202.1 142.65 201.5 143.35 199.1 145.35 199.05 145.35 199.8 144.4 200.05 143.3 199.95 142.2 199.35 141.15 198.7 140.55 Q198.25 140.3 197.8 140.15 L196.9 140.15 196.05 140.35 195.25 140.8 195.2 140.8 197.55 138.75 Q197.95 138.4 198.4 138.2 L199.3 138 200.25 138.05"/>
            <path fill="none" stroke="#750850" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" d="M190.7 151.35 L189.6 151 Q189.1 150.75 188.75 150.3 L188.1 149.25 188 148.1 188.3 147 189 146.15 197.7 138.8 Q198.15 138.4 198.75 138.25 L199.9 138.05 201 138.4 201.9 139.15 Q202.7 140.15 202.55 141.35 202.5 142.55 201.55 143.35 L192.85 150.65 191.85 151.25 190.7 151.35"/>
          </g>
        </g>
      </g>
    </svg>
  </section>
</main>
              
            
!

CSS

              
                body {
  min-height:			100vh;
  margin:				0;
  padding:			1rem;
  color:				#FFFFFF;
  background-color:	#00C7C3;
}

svg {
  display:			block;
  margin:				auto;
}

* {
  box-sizing:			border-box;
}
              
            
!

JS

              
                gsap.registerPlugin(MotionPathPlugin, MorphSVGPlugin);

jQuery(document).ready(function($) {
	
	//	Set initial transforms
	
	$('.svg-wrapper g, .svg-wrapper path').each(function(index) {
		//	Do some error-checking, just in case I missed one
		if ($(this).is('[data-origin]')) {
			var tOrig = $(this).attr('data-origin');
			if (tOrig) {
				gsap.set($(this).get(0), { transformOrigin: tOrig });
			} else {
				console.log($(this).attr('class') + ' don`t got no data-origin value');
			}
		} else {
			console.log($(this).attr('class') + ' ain`t got no data-origin AT ALL');
		}
	});
	
	//	Init all shapes their 'start' positions
	
	gsap.set('.face .closed', { opacity: 0 });
	gsap.set('.motion-path', { opacity: 0 });
	gsap.set('.droplets .drop', { opacity: 0 });
	gsap.set('.blink', { opacity: 0 });
  gsap.set('.amber-ice-cream', { opacity: 1 });
	
	//	Get the icing to dance on its own
	
	gsap.to('.icing', { duration: 3, yoyo: true, repeat: -1, ease: 'elastic.inOut(1, 0.2)', morphSVG: 'M47.25 152.4 Q54.15 131.8 71.1 115.3 99.75 87.5 140.25 87.5 180.75 87.5 209.35 115.3 224.65 130.2 231.8 148.35 210.95 144.75 193.35 157.9 186.05 163.3 174.95 169 157.8 177.25 143.4 170.7 L125.9 160.75 Q107.65 150.4 89.35 163.25 71.55 175.85 53.9 159.35 L47.25 152.4' });
	
	//	Set up somne independent blinks
	
	let blinkTL = gsap.timeline({ repeat: -1 });
	blinkTL.to('.blink', { opacity: 1, duration: 0, delay: 3 });
	blinkTL.to('.pupil', { opacity: 0, duration: 0 });
	blinkTL.to('.blink', { opacity: 0, duration: 0, delay: 0.1 });
	blinkTL.to('.pupil', { opacity: 1, duration: 0 });
	blinkTL.to('.blink', { opacity: 1, duration: 0, delay: 0.1 });
	blinkTL.to('.pupil', { opacity: 0, duration: 0 });
	blinkTL.to('.blink', { opacity: 0, duration: 0, delay: 0.1 });
	blinkTL.to('.pupil', { opacity: 1, duration: 0 });
	
	//	Create master timeline and child timlines
	
	let masterTL = gsap.timeline({ repeat: -1 });
	
	let bobTL = gsap.timeline({ yoyo: true, repeat: 9 });
	bobTL.to('.cone', { scaleY: 0.95, duration: 0.5, ease: 'circ.inOut' });
	bobTL.to('.cone.top, .cone.middle', { y: 3, duration: 0.5, delay: -0.5, ease: 'circ.inOut' });
	bobTL.to('.cream, .face, .topping, .sprinkles, .cherry', { y: 5, duration: 0.5, delay: -0.5, ease: 'circ.inOut' });
	bobTL.to('.circle.drop', { yPercent: 15, stagger: { from: 'center', amount: 0.1 }, duration: 0.5, delay: -0.5, ease: 'circ.inOut' });
	bobTL.to('.sprinkle.s1, .sprinkle.s3, .sprinkle.s5, .sprinkle.s7, .sprinkle.s9', { rotation: 45, stagger: { from: 'center', amount: 0.1 }, duration: 0.5, delay: -0.6, ease: 'circ.inOut' });
	bobTL.to('.sprinkle.s2, .sprinkle.s4, .sprinkle.s6, .sprinkle.s8, .sprinkle.s10', { rotation: -45, stagger: { from: 'center', amount: 0.1 }, duration: 0.5, delay: -0.6, ease: 'circ.inOut' });
	bobTL.to('.main-shadow', { scale: 0.98, duration: 0.5, delay: -0.5, ease: 'circ.inOut' });
	
	//###################################
	
	let jumpTL = gsap.timeline();
	
	//	Load the spring...
	
	jumpTL.set('.face .open', { opacity: 0 });
	jumpTL.set('.face .closed', { opacity: 1 });
	jumpTL.to('.cone', { scaleY: 0.9, duration: 1.5, ease: 'circ.out' });
	jumpTL.to('.cone.top, .cone.middle', { y: 10, duration: 1.5, delay: -1.5, ease: 'circ.out' });
	jumpTL.to('.cream, .face, .topping, .sprinkles, .cherry', { y: 15, duration: 1.5, delay: -1.5, ease: 'circ.out' });
	jumpTL.to('.main-shadow', { scale: 0.9, duration: 1.5, delay: -1.5, ease: 'circ.out' });
	
	//	SPROING!
	
	jumpTL.set('.face .open', { opacity: 1 });
	jumpTL.set('.face .closed', { opacity: 0 });
	jumpTL.to('.cone', { scaleY: 1, y: -50, duration: 0.5, ease: 'expo.out' });
	jumpTL.to('.cream, .topping, .sprinkles, .cherry', { y: -50, duration: 0.5, delay: -0.5, ease: 'expo.out' });
	jumpTL.to('.face', { y: -40, duration: 0.5, delay: -0.5, ease: 'expo.out' });
	jumpTL.to('.face .eye .pupil', { scale: 2, duration: 0.5, delay: -0.5, ease: 'expo.out' });
	jumpTL.to('.main-shadow', { scale: 1.4, opacity: 0.5, duration: 0.5, delay: -0.5, ease: 'expo.out' });
	jumpTL.to('.sprinkle', { yPercent: -100, stagger: { from: 'center', amount: 0.1 }, duration: 1, delay: -0.9, ease: 'expo.inOut' });
	jumpTL.to('.cherry-body', { yPercent: -1, duration: 1, delay: -1, ease: 'expo.inOut' });
	jumpTL.to('.cherry .shadow', { scale: 1.1, opacity: 0.9, duration: 1, delay: -1, ease: 'expo.inOut' });
	
	//	BOOF!
	
	jumpTL.to('.cone.top, .cone.middle', { y: 10, duration: 0.5, ease: 'expo.in' });
	jumpTL.to('.cone.bottom', { y: 0, duration: 0.5, delay: -0.5, ease: 'expo.in' });
	jumpTL.to('.cream, .topping, .sprinkles, .cherry', { y: 15, duration: 0.5, delay: -0.5, ease: 'expo.in' });
	jumpTL.to('.face', { y: 5, duration: 0.5, delay: -0.5, ease: 'expo.in' });
	jumpTL.to('.sprinkle', { yPercent: -400, duration: 0.5, delay: -0.5, ease: 'expo.in' });
	jumpTL.to('.cherry-body', { yPercent: -100, duration: 0.5, delay: -0.5, ease: 'expo.in' });
	jumpTL.to('.cherry .shadow', { scale: 2, opacity: 0.5, duration: 0.5, delay: -0.5, ease: 'expo.in' });
	jumpTL.set('.face .open .eye', { opacity: 0 });
	jumpTL.set('.face .open .eyes.closed', { opacity: 1 });
	jumpTL.to('.main-shadow', { scale: 0.9, opacity: 1, duration: 0.5, delay: -0.5, ease: 'expo.in' });
	jumpTL.to('.face', { y: 20, duration: 0.5, ease: 'back.out(4)' });
	jumpTL.set('.face .open .eye', { opacity: 1 });
	jumpTL.set('.face .open .eyes.closed', { opacity: 0 });
	jumpTL.to('.face .eye .pupil', { scale: 1, duration: 0.5, delay: -0.5, ease: 'expo.out' });
	
	jumpTL.to('.sprinkle', { yPercent: 0, stagger: { from: 'center', amount: 0.3 }, duration: 0.5, delay: -0.45, ease: 'bounce.out(4)' });
	jumpTL.to('.cherry-body', { yPercent: 0, duration: 0.5, delay: -0.6, ease: 'bounce.out(4)' });
	jumpTL.to('.cherry .shadow', { scale: 1, opacity: 1, duration: 0.5, delay: -0.6, ease: 'bounce.out(4)' });
	
	//	*smol sproing*
	
	jumpTL.to('.cone', { scaleY: 1, duration: 0.5, delay: -0.6, ease: 'circ.out' });
	jumpTL.to('.cone.top, .cone.middle', { y: 0, duration: 0.5, delay: -0.5, ease: 'circ.out' });
	jumpTL.to('.cream, .face, .topping, .sprinkles, .cherry', { y: 0, duration: 0.5, delay: -0.5, ease: 'circ.out' });
	jumpTL.to('.main-shadow', { scale: 1, duration: 0.5, delay: -0.5, ease: 'circ.out' });
	
	//	Drip!
	
	jumpTL.to('.circle.drop', { yPercent: 100, duration: 0.75, delay: -0.8, ease: 'back.out(3)' });
	jumpTL.to('.face', { y: 10, duration: 0.3, ease: 'circ.out' });
	jumpTL.to('.face .open .eye', { yPercent: 100, duration: 0.3, delay: -0.3, ease: 'circ.out' });
	
	jumpTL.to('.circle.drop.d1', { y: 80, duration: 0.3, delay: -0.4, ease: 'circ.in', onComplete: showSplatter, onCompleteParams:['.d1'] });
	jumpTL.set('.circle.drop.d1', { opacity: 0 });
	jumpTL.to('.stem.s1, .circle.behind.c1', { y: -10, duration: 0.2, delay: -0.4, ease: 'circ.in' });
	jumpTL.to('.stem.s1, .circle.behind.c1', { y: 0, duration: 0.2, delay: -0.2, ease: 'back.out(4)' });
	
	jumpTL.to('.circle.drop.d3', { y: 70, duration: 0.3, delay: -0.25, ease: 'circ.in', onComplete: showSplatter, onCompleteParams:['.d3'] });
	jumpTL.set('.circle.drop.d3', { opacity: 0 });
	jumpTL.to('.stem.s3, .circle.behind.c3', { y: -10, duration: 0.2, delay: -0.25, ease: 'circ.in' });
	jumpTL.to('.stem.s3, .circle.behind.c3', { y: 0, duration: 0.2, delay: -0.2, ease: 'back.out(4)' });
	
	jumpTL.to('.circle.drop.d4', { y: 59, duration: 0.3, delay: -0.2, ease: 'circ.in', onComplete: showSplatter, onCompleteParams:['.d4'] });
	jumpTL.set('.circle.drop.d4', { opacity: 0 });
	jumpTL.to('.stem.s4, .circle.behind.c4', { y: -10, duration: 0.2, delay: -0.2, ease: 'circ.in' });
	jumpTL.to('.stem.s4, .circle.behind.c4', { y: 0, duration: 0.2, delay: -0.2, ease: 'back.out(4)' });
	
	jumpTL.to('.circle.drop.d2', { y: 102, duration: 0.3, delay: -0.18, ease: 'circ.in', onComplete: showSplatter, onCompleteParams:['.d2'] });
	jumpTL.set('.circle.drop.d2', { opacity: 0 });
	jumpTL.to('.stem.s2, .circle.behind.c2', { y: -6, duration: 0.2, delay: -0.18, ease: 'circ.in' });
	jumpTL.to('.stem.s2, .circle.behind.c2', { y: 0, duration: 0.2, delay: -0.18, ease: 'back.out(4)' });
	
	jumpTL.to('.face', { y: 0, duration: 0.3, delay: 0.5, ease: 'circ.out' });
	jumpTL.to('.face .open .eye', { yPercent: 0, duration: 0.3, delay: -0.3, ease: 'circ.out' });
	
	masterTL.add(bobTL).add(jumpTL);
	
	//###################
	
	//jumpTL.to('.main-shadow', { scale: 0.9, opacity: 1, duration: 0.5, delay: 5, ease: 'expo.in' });
	
	///
	//	Reusable function for showing the ice-cream splatters independently
	///
	
	function showSplatter(wrapperClass) {
		let tl = gsap.timeline();
		tl.set('.droplets ' + wrapperClass + ' .drop', { opacity: 1 });
		
		tl.to('.droplets ' + wrapperClass + ' .drop-1', { opacity: 0, motionPath: { path: '.droplets ' + wrapperClass + ' .path-1', align: '.droplets ' + wrapperClass + ' .path-1', alignOrigin: [0.5, 0.5], start: 1, end: 0 }, duration: 2, ease: 'expo.out' });
		tl.to('.droplets ' + wrapperClass + ' .drop-2', { opacity: 0, motionPath: { path: '.droplets ' + wrapperClass + ' .path-2', align: '.droplets ' + wrapperClass + ' .path-2', alignOrigin: [0.5, 0.5] }, duration: 2, delay: -2, ease: 'expo.out' });
		tl.to('.droplets ' + wrapperClass + ' .drop-3', { opacity: 0, motionPath: { path: '.droplets ' + wrapperClass + ' .path-3', align: '.droplets ' + wrapperClass + ' .path-2', alignOrigin: [0.5, 0.5] }, duration: 2, delay: -2, ease: 'expo.out' });
		
		tl.set('.droplets ' + wrapperClass + ' .drop', { x: 0, y: 0 });
	}
});
              
            
!
999px

Console