Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

              
                        <div class="wrapper">
        <div class="svg-wrapper">
            <svg class="the-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 803.11 1234.09"><title>candyland</title><g id="bg"><rect x="-108.17" y="-43.69" width="1153.05" height="1308.93" style="fill:#ffccfa"/></g><g id="BlockB2"><polygon points="157.15 1001.38 157.15 756.41 465.14 578.29 465.14 827.86 157.15 1001.38" style="fill:#42210b"/><polygon points="51.08 695.17 157.15 756.41 439.49 593.2 333.92 531.86 51.08 695.17" style="fill:#fff"/><polygon points="157.15 756.41 157.15 1001.38 51.08 940.14 51.08 695.17 157.15 756.41" style="fill:#fff6db"/><path d="M157.15,904.6s-7.47-11.59-18.1-8.3-26.51-4-31.7-7.74c-4.67-3.37-14.26.67-20.88,1.36-7,.73-19.85-6.38-26.14-10.86s-9.25-1.52-9.25-1.52V851.45l106.07,31.7Z" style="fill:#fff"/><path d="M157.15,875.34s-17-15.87-34.56-12.38c-14.46,2.87-33-2-40.11-6.19-5-3-18.93-20.62-31.4-15.58v17.46c19.94-2.06,26.35,25.17,41.71,18.07s12.26,10.74,31.23,6.4,33.13,8,33.13,8V875.34Z" style="fill:#e7223a"/></g>
                
                <g id="SodaFall_B" data-name="SodaFall B">
                    <polygon points="166.4 763.96 166.4 1266.93 231.08 1304.28 231.08 800.04 166.4 763.96" style="fill:#851d14"/>
                    <polygon points="166.4 764 231.08 800.08 513.74 639.42 447.24 598.36 166.4 764" style="fill:#6f1811"/>
                </g>
                <g id="SodaFall_B_render"></g>
                <g id="sf_Abottom" data-name="sf Abottom"><polygon points="398.42 665.38 398.42 699.75 331.92 666.38 331.92 627.6 398.42 665.38" style="fill:#851d14"/></g>
                <g id="sf_Abottom_render"></g>
                <g id="BlockB"><polygon points="205.98 792.53 478.14 949.68 760.99 786.37 495.54 633.09 205.98 792.53" style="fill:#fff"/><polygon points="205.98 792.53 206.6 1037.86 478.14 1194.65 478.14 949.68 205.98 792.53" style="fill:#fff6db"/><polygon points="478.14 1194.65 760.99 1031.34 760.99 786.37 478.14 949.68 478.14 1194.65" style="fill:#ded6bf"/><path d="M761,941.92s-16.84.6-20.29,5.88-28.38,13-33.25,12.16-24.13,32.65-44.4,35.48-27.38,29.81-51.1,32.45-39.34,20.48-46,22.71-47,6.28-62,19.66-21.26,14.6-25.74,12.58v-28.39L761,913.93Z" style="fill:#ccc"/><path d="M761,901.46v26.15c-3.07,9.24-12.27,10.79-22.7,11-20.87.42-18.48,2.86-26.93,8.55-7.82,5.27-21.29,24.43-38.61,25.68s-16.85.39-29.59,9.15-8.95,18-34.7,25.91c-17.27,5.3-17.27,3-26.64,10.77-12.64,10.43-25.4,31.68-47.41,29.25-16.48-1.82-42.26,9.22-56.27,14.61v-26.15c3.15-2.69,11.83-5.8,49-16.63,30.28-8.83,57.11-19.77,81.78-41.89s53.75-42.75,81.35-41C714.06,938.32,761,901.46,761,901.46Z" style="fill:#cc1e33"/><path d="M247.84,961.9c4.87-.81,24.13,32.65,44.41,35.49s27.37,29.8,51.09,32.44,39.34,20.48,46,22.71,47,6.28,62.05,19.67,11.11,1.68,26.72,10.63V1057L206.3,920.59v25.65C214.55,957.72,247.84,961.9,247.84,961.9Z" style="fill:#fff"/><path d="M206.23,893.55l.1,38.64c3.07,9.24,6.5,7.69,16.93,7.9,20.87.42,24.74,6,30.51,13.52s12.44,18,29.77,19.23,17.94,5,30.68,13.79,7.16,16.19,33.6,21.27c15.69,3,20.36.91,26.65,10.77,8.81,13.81,25.4,31.68,47.4,29.25,16.49-1.82,42.26,9.22,56.27,14.61v-26.15c-3.14-2.69-11.82-5.8-49-16.63-30.28-8.83-49.29-19.18-81.78-41.89-27.24-19-57.86-34.87-81.35-41C243,930.8,206.23,893.55,206.23,893.55Z" style="fill:#e7223a"/></g><g id="bA2"><polygon points="216.9 436.87 322.82 497.56 499.67 395.97 393.61 334.86 216.9 436.87" style="fill:#fff"/><path d="M216.9,436.87l0,85.07a81.52,81.52,0,0,0,13.55,3.86c8.91,2,4.33,5.23,12.91,8.37,7.52,2.75,15.16-3.83,22.43-.47,10.21,4.73,2.89,13.82,11.92,20.52,7.66,5.67,14.88,11.35,23.27,15.86,9.61,5.18,17.67,18.3,21.87,21.68v-94.2Z" style="fill:#fff6db"/><path d="M302.56,551.05c-9.42,2.15-15.23-9.51-17.44-14-1.88-3.87-8.17-6.22-12.21-11.8-5.7-7.87-22.87-3.07-28.47-8.46s-13.83-10.65-20.7-6.88c-2.77,1.52-5.09.23-6.87-1.84v13.92a81.52,81.52,0,0,0,13.55,3.86c8.91,2,4.33,5.23,12.91,8.37,7.52,2.75,15.16-3.83,22.43-.47,10.21,4.73,2.89,13.82,11.92,20.52,7.66,5.67,14.88,11.35,23.27,15.86,9.61,5.18,17.67,18.3,21.87,21.68v-23S312,548.9,302.56,551.05Z" style="fill:#e7223a"/><path d="M373.57,568.54c14.78,1.11,7.63-23.09,22-26.71,8.19-2.05,10.56,9,18.86,7.53,15.81-2.88,11-48.18,27.1-48.32,5-.05,5,7.92,9.9,8.12,9.12.37,10.22-15.11,19.35-15.3,5.87-.12,7.1,4.79,12.87,3.7,11.44-2.16,3.25-25.11,13.56-30.53,1.41-.74,1.09-11.79,2.5-12.53l0-58.53L322.82,497.56v94.2C336.44,598.87,348.86,566.68,373.57,568.54Z" style="fill:#b0aa97"/><path d="M345.41,580.92c-1.57-3-4-5.06-7.61-4.45-11.39,1.9-15-7.7-15-7.7v23C330,595.52,336.89,588.29,345.41,580.92Z" style="fill:#a11829"/></g>
                
                <g id="SodaFall_A" data-name="SodaFall A">
                    <polygon points="331.92 503.39 398.42 541.54 566.56 445.26 499.52 406.55 331.92 503.39" style="fill:#6f1811"/><polyline points="398.42 665.38 398.42 541.54 331.92 503.39 331.92 627.6" style="fill:#851d14"/></g>
                    <g id="sodaFall_A_render"></g>
                    <g id="chocolate"><polygon points="545.61 790.24 634.56 842.13 767.45 690.15 767.45 678.32 631.38 828.89 545.61 778.02 545.61 790.24" style="fill:#754c24"/><polygon points="676.51 629.53 767.45 678.32 631.38 828.89 545.61 778.02 676.51 629.53" style="fill:#8c6239"/><path d="M658.72,652.79s15.82,10.83,18,10.38,15-15.59,14.7-18.27-14.4-10.69-17.37-10.84S658.72,649.82,658.72,652.79Z" style="fill:#9e6832"/><path d="M676.77,663.17c2.23-.45,15-15.59,14.7-18.27-.11-1-2.36-2.92-5.22-4.82h-.14a4.73,4.73,0,0,1,1.58,4.14c-.2,2.85-8.73,13.33-12.25,14.16-2.67.62-15-8.92-15-8.92l-.12-.22a7.81,7.81,0,0,0-1.65,3.55S674.54,663.62,676.77,663.17Z" style="fill:#754c24"/><path d="M681.4,665.65s15.83,10.83,18.05,10.38,15-15.59,14.7-18.26-14.4-10.7-17.37-10.84S681.4,662.68,681.4,665.65Z" style="fill:#9e6832"/><path d="M699.45,676c2.23-.44,15-15.59,14.7-18.26-.11-1-2.36-2.93-5.22-4.82h-.13a4.68,4.68,0,0,1,1.57,4.13c-.2,2.85-8.73,13.33-12.25,14.16-2.66.62-15-8.92-15-8.92l-.12-.22a7.92,7.92,0,0,0-1.65,3.55S697.23,676.48,699.45,676Z" style="fill:#754c24"/><path d="M703.53,679.11s15.83,10.83,18.05,10.38,15-15.59,14.7-18.26-14.4-10.7-17.37-10.84S703.53,676.14,703.53,679.11Z" style="fill:#9e6832"/><path d="M721.58,689.49c2.23-.44,15-15.59,14.7-18.26-.11-1.05-2.36-2.93-5.22-4.82h-.14a4.67,4.67,0,0,1,1.58,4.13c-.2,2.85-8.73,13.33-12.25,14.16-2.66.62-15-8.92-15-8.92l-.12-.22a7.81,7.81,0,0,0-1.65,3.55S719.36,689.94,721.58,689.49Z" style="fill:#754c24"/><path d="M725.27,691.22s15.82,10.83,18.05,10.38,15-15.59,14.7-18.26-14.4-10.7-17.37-10.84S725.27,688.25,725.27,691.22Z" style="fill:#9e6832"/><path d="M743.32,701.6c2.23-.44,15-15.59,14.7-18.26-.11-1.05-2.36-2.93-5.23-4.82h-.13a4.7,4.7,0,0,1,1.58,4.13C754,685.5,745.51,696,742,696.81c-2.67.62-15-8.92-15-8.92l-.13-.22a7.93,7.93,0,0,0-1.64,3.55S741.09,702.05,743.32,701.6Z" style="fill:#754c24"/><path d="M640.46,676.89s15.26,10.45,17.41,10,14.48-15,14.19-17.63-13.9-10.32-16.77-10.46S640.46,674,640.46,676.89Z" style="fill:#9e6832"/><path d="M657.87,686.91c2.15-.43,14.48-15,14.19-17.63-.11-1-2.28-2.82-5-4.65h-.13a4.54,4.54,0,0,1,1.52,4c-.19,2.75-8.43,12.87-11.82,13.66-2.57.61-14.43-8.6-14.43-8.6l-.12-.22a7.66,7.66,0,0,0-1.58,3.43S655.72,687.34,657.87,686.91Z" style="fill:#754c24"/><path d="M662.34,689.3s15.27,10.45,17.42,10,14.48-15.05,14.19-17.63-13.9-10.31-16.77-10.46S662.34,686.43,662.34,689.3Z" style="fill:#9e6832"/><path d="M679.76,699.32c2.15-.43,14.48-15.05,14.19-17.63-.11-1-2.28-2.82-5-4.65h-.13a4.55,4.55,0,0,1,1.52,4c-.19,2.75-8.43,12.87-11.82,13.66-2.57.61-14.43-8.6-14.43-8.6l-.12-.22a7.66,7.66,0,0,0-1.59,3.43S677.61,699.75,679.76,699.32Z" style="fill:#754c24"/><path d="M683.7,702.29s15.27,10.45,17.42,10,14.47-15,14.19-17.63-13.9-10.32-16.77-10.46S683.7,699.42,683.7,702.29Z" style="fill:#9e6832"/><path d="M701.12,712.31c2.15-.43,14.47-15,14.19-17.63-.12-1-2.28-2.82-5-4.65h-.13a4.54,4.54,0,0,1,1.52,4c-.19,2.75-8.42,12.87-11.82,13.66-2.57.61-14.43-8.6-14.43-8.6l-.11-.22a7.66,7.66,0,0,0-1.59,3.43S699,712.74,701.12,712.31Z" style="fill:#754c24"/><path d="M704.68,714S720,724.43,722.1,724s14.47-15,14.18-17.63-13.9-10.32-16.76-10.46S704.68,711.11,704.68,714Z" style="fill:#9e6832"/><path d="M722.1,724c2.15-.43,14.47-15,14.18-17.63-.11-1-2.28-2.82-5-4.65h-.13a4.53,4.53,0,0,1,1.52,4c-.19,2.76-8.42,12.87-11.82,13.67-2.57.6-14.43-8.6-14.43-8.6l-.12-.22a7.77,7.77,0,0,0-1.58,3.43S720,724.43,722.1,724Z" style="fill:#754c24"/><path d="M623.31,698.58s14.9,10.2,17,9.78,14.13-14.69,13.85-17.2S640.58,681.09,637.79,681,623.31,695.78,623.31,698.58Z" style="fill:#9e6832"/><path d="M640.3,708.36c2.1-.42,14.13-14.69,13.85-17.2-.11-1-2.23-2.76-4.93-4.54h-.12a4.41,4.41,0,0,1,1.48,3.89c-.18,2.68-8.22,12.56-11.53,13.33-2.51.59-14.08-8.39-14.08-8.39l-.12-.21a7.37,7.37,0,0,0-1.54,3.34S638.21,708.78,640.3,708.36Z" style="fill:#754c24"/><path d="M644.67,710.69s14.9,10.2,17,9.78,14.13-14.68,13.85-17.2-13.57-10.07-16.36-10.21S644.67,707.89,644.67,710.69Z" style="fill:#9e6832"/><path d="M661.66,720.47c2.1-.42,14.13-14.68,13.85-17.2-.11-1-2.23-2.75-4.93-4.54h-.12a4.41,4.41,0,0,1,1.48,3.89c-.18,2.68-8.22,12.56-11.53,13.34-2.51.58-14.08-8.4-14.08-8.4l-.12-.21a7.37,7.37,0,0,0-1.54,3.34S659.57,720.89,661.66,720.47Z" style="fill:#754c24"/><path d="M665.51,723.37s14.9,10.19,17,9.77,14.13-14.68,13.85-17.2S682.78,705.87,680,705.73,665.51,720.57,665.51,723.37Z" style="fill:#9e6832"/><path d="M682.5,733.14c2.1-.42,14.13-14.68,13.85-17.2-.11-1-2.23-2.75-4.93-4.54h-.12a4.43,4.43,0,0,1,1.48,3.89c-.18,2.69-8.22,12.56-11.53,13.34-2.51.59-14.08-8.39-14.08-8.39l-.12-.22a7.47,7.47,0,0,0-1.54,3.35S680.41,733.56,682.5,733.14Z" style="fill:#754c24"/><path d="M686,734.77s14.9,10.2,17,9.78,14.13-14.68,13.85-17.2-13.57-10.07-16.36-10.21S686,732,686,734.77Z" style="fill:#9e6832"/><path d="M703,744.55c2.1-.42,14.13-14.68,13.85-17.2-.11-1-2.23-2.75-4.92-4.54h-.13a4.41,4.41,0,0,1,1.48,3.89c-.18,2.69-8.22,12.56-11.53,13.34-2.51.58-14.08-8.4-14.08-8.4l-.12-.21a7.37,7.37,0,0,0-1.54,3.34S700.88,745,703,744.55Z" style="fill:#754c24"/><path d="M603.12,719.24s15.26,10.46,17.41,10,14.48-15,14.19-17.63-13.9-10.32-16.77-10.46S603.12,716.38,603.12,719.24Z" style="fill:#9e6832"/><path d="M620.53,729.27c2.15-.43,14.48-15,14.19-17.63-.11-1-2.28-2.82-5-4.65h-.13a4.53,4.53,0,0,1,1.52,4c-.19,2.76-8.43,12.87-11.82,13.67-2.57.6-14.43-8.6-14.43-8.6l-.12-.22a7.56,7.56,0,0,0-1.58,3.42S618.38,729.7,620.53,729.27Z" style="fill:#754c24"/><path d="M625,731.66s15.27,10.45,17.42,10,14.48-15,14.19-17.63-13.9-10.32-16.77-10.46S625,728.79,625,731.66Z" style="fill:#9e6832"/><path d="M642.42,741.68c2.15-.43,14.48-15,14.19-17.63-.11-1-2.28-2.82-5.05-4.65h-.12a4.54,4.54,0,0,1,1.52,4c-.19,2.75-8.43,12.87-11.82,13.66-2.58.61-14.43-8.6-14.43-8.6l-.12-.22a7.66,7.66,0,0,0-1.59,3.43S640.27,742.11,642.42,741.68Z" style="fill:#754c24"/><path d="M646.36,744.65s15.27,10.45,17.42,10,14.47-15,14.19-17.63-13.9-10.32-16.77-10.46S646.36,741.78,646.36,744.65Z" style="fill:#9e6832"/><path d="M663.78,754.67c2.15-.43,14.47-15,14.19-17.63-.12-1-2.29-2.82-5.05-4.65h-.13a4.53,4.53,0,0,1,1.52,4c-.19,2.76-8.42,12.87-11.82,13.67-2.57.6-14.43-8.6-14.43-8.6l-.12-.22a7.77,7.77,0,0,0-1.58,3.43S661.63,755.1,663.78,754.67Z" style="fill:#754c24"/><path d="M667.34,756.33s15.27,10.45,17.42,10,14.47-15,14.18-17.62-13.9-10.32-16.76-10.46S667.34,753.47,667.34,756.33Z" style="fill:#9e6832"/><path d="M684.76,766.35c2.15-.43,14.47-15,14.18-17.62-.11-1-2.28-2.82-5-4.65h-.13a4.53,4.53,0,0,1,1.52,4c-.19,2.75-8.42,12.87-11.82,13.67-2.57.6-14.43-8.6-14.43-8.6l-.12-.22a7.61,7.61,0,0,0-1.58,3.42S682.61,766.78,684.76,766.35Z" style="fill:#754c24"/><path d="M586,740.94s14.9,10.19,17,9.77,14.13-14.68,13.85-17.2-13.57-10.07-16.36-10.2S586,738.14,586,740.94Z" style="fill:#9e6832"/><path d="M603,750.71c2.1-.41,14.13-14.68,13.85-17.2-.11-1-2.23-2.75-4.93-4.54h-.12a4.43,4.43,0,0,1,1.48,3.89c-.18,2.69-8.22,12.56-11.53,13.34-2.51.59-14.08-8.39-14.08-8.39l-.12-.22a7.57,7.57,0,0,0-1.55,3.35S600.86,751.13,603,750.71Z" style="fill:#754c24"/><path d="M607.32,753.05s14.9,10.2,17,9.78,14.13-14.69,13.85-17.2-13.57-10.07-16.36-10.21S607.32,750.25,607.32,753.05Z" style="fill:#9e6832"/><path d="M624.32,762.83c2.1-.42,14.13-14.69,13.85-17.2-.11-1-2.23-2.76-4.93-4.54h-.12A4.41,4.41,0,0,1,634.6,745c-.18,2.68-8.22,12.56-11.53,13.33-2.51.59-14.08-8.39-14.08-8.39l-.12-.22a7.57,7.57,0,0,0-1.55,3.35S622.22,763.25,624.32,762.83Z" style="fill:#754c24"/><path d="M628.16,765.72s14.9,10.2,17,9.78,14.13-14.68,13.85-17.2-13.57-10.07-16.36-10.21S628.16,762.93,628.16,765.72Z" style="fill:#9e6832"/><path d="M645.16,775.5c2.1-.42,14.13-14.68,13.85-17.2-.11-1-2.23-2.75-4.93-4.54H654a4.43,4.43,0,0,1,1.48,3.89c-.18,2.69-8.22,12.56-11.53,13.34-2.51.59-14.08-8.4-14.08-8.4l-.12-.21a7.47,7.47,0,0,0-1.55,3.34S643.06,775.92,645.16,775.5Z" style="fill:#754c24"/><path d="M648.64,777.13s14.9,10.2,17,9.78,14.13-14.69,13.85-17.2-13.57-10.07-16.36-10.21S648.64,774.33,648.64,777.13Z" style="fill:#9e6832"/><path d="M665.63,786.91c2.1-.42,14.13-14.69,13.85-17.2-.11-1-2.23-2.76-4.93-4.54h-.12a4.41,4.41,0,0,1,1.48,3.89c-.18,2.68-8.22,12.56-11.53,13.33C661.87,783,650.3,774,650.3,774l-.12-.21a7.37,7.37,0,0,0-1.54,3.34S663.54,787.33,665.63,786.91Z" style="fill:#754c24"/><path d="M691.48,782.75,663.17,792a5.55,5.55,0,0,1-7.29-5.47c0-.84.1-1.71.21-2.58a6.94,6.94,0,0,0-6.83-7.88h-8.8l-1-3.64a13.64,13.64,0,0,0-12.49-10l-4.27-.21a4.74,4.74,0,0,1-4.15-6.55h0a.78.78,0,0,0-.6-1.07l-19.27-3.2a3,3,0,0,1-2.31-4l.55-1.5a3.36,3.36,0,0,0-4.55-4.22L589,743.16a1.53,1.53,0,0,1-2.1-1.83l3.54-11.73a6.3,6.3,0,0,1,.49-1.2l6.66-12.65-57.12,40.83-13.76,45.35,80.57,42.12h36.27l54.19-47.25Z" style="fill:#fff"/></g><g id="strawberry"><path d="M519.72,702.56s-.8-24.53-3.22-30.16c0,0-8.71,4.2-13,20.66,0,0-4.31-21.25-19.23-31.73,0,0,.6,33,6.3,38.66,0,0-11.27-24.94-50.06-26.93,0,0,21.55,28.08,32.16,31.94,0,0-34.15-12-51.72-9.07,0,0,23.66,18,38.52,19.79,0,0-32.55-2.39-43.16,5,0,0,24.27,11.38,45.45,4.91,0,0-21.58,5.74-30.2,16.7A109.69,109.69,0,0,0,472,740.55C493.53,735.38,519.72,702.56,519.72,702.56Z" style="fill:#009245"/><path d="M501.82,701.8c28.51-31.9,82.88-40.47,105.09,26.51,9.54,60.06,29.84,110.51,11.27,126.42s-31.82,15.91-56.36,7.62-85.24-33.48-85.24-33.48S399.39,770.19,501.82,701.8Z" style="fill:#cc1e33"/><g id="seeds"><ellipse cx="530.9" cy="752.89" rx="1.67" ry="2.78" transform="translate(-328.78 421.77) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="550.74" cy="740.55" rx="1.67" ry="2.78" transform="translate(-318.58 430.71) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="509.25" cy="770.69" rx="1.67" ry="2.78" transform="translate(-342.32 412.74) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="548.88" cy="760.19" rx="1.67" ry="2.78" transform="translate(-329.81 432.99) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="571.93" cy="744.8" rx="1.67" ry="2.78" transform="translate(-317.37 443.19) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="526.25" cy="773.52" rx="1.67" ry="2.78" transform="translate(-341.03 422.66) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="532.39" cy="735.5" rx="1.67" ry="2.78" transform="translate(-318.87 419.66) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="555.85" cy="719.07" rx="1.67" ry="2.78" transform="translate(-305.79 429.93) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="510.74" cy="749.22" rx="1.67" ry="2.78" transform="translate(-330.14 409.95) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="533.29" cy="715.53" rx="1.67" ry="2.78" transform="translate(-307.63 416.8) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="562.26" cy="701.23" rx="1.67" ry="2.78" transform="translate(-294.8 430.48) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="511.64" cy="728.14" rx="1.67" ry="2.78" transform="translate(-318.28 406.9) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="535.84" cy="695.36" rx="1.67" ry="2.78" transform="translate(-295.99 414.82) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="554.35" cy="683.35" rx="1.67" ry="2.78" transform="translate(-286.2 423.08) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="519.51" cy="695.36" rx="1.67" ry="2.78" transform="translate(-298.75 405.74) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="581.2" cy="709.16" rx="1.67" ry="2.78" transform="translate(-296.02 442.34) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="596.94" cy="717.28" rx="1.67" ry="2.78" transform="translate(-297.88 452.45) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="578.21" cy="691.31" rx="1.67" ry="2.78" transform="matrix(0.83, -0.56, 0.56, 0.83, -286.61, 437.67)" style="fill:#f2f2f2"/><ellipse cx="565.83" cy="766.8" rx="1.67" ry="2.78" transform="translate(-330.63 443.51) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="586.97" cy="756.79" rx="1.67" ry="2.78" transform="translate(-321.5 453.57) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="546.42" cy="777.2" rx="1.67" ry="2.78" transform="translate(-339.67 434.49) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="564.22" cy="780.82" rx="1.67" ry="2.78" transform="matrix(0.83, -0.56, 0.56, 0.83, -338.68, 444.98)" style="fill:#f2f2f2"/><ellipse cx="582.76" cy="771.77" rx="1.67" ry="2.78" transform="translate(-330.53 453.76) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="545.08" cy="792.69" rx="1.67" ry="2.78" transform="translate(-348.5 436.35) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="582.49" cy="789.06" rx="1.67" ry="2.78" transform="translate(-340.18 456.52) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="601.45" cy="773.35" rx="1.67" ry="2.78" transform="matrix(0.83, -0.56, 0.56, 0.83, -328.26, 464.41)" style="fill:#f2f2f2"/><ellipse cx="562.92" cy="799.82" rx="1.67" ry="2.78" transform="translate(-349.46 447.46) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="581.47" cy="805.83" rx="1.67" ry="2.78" transform="translate(-349.67 458.78) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="599.08" cy="796.2" rx="1.67" ry="2.78" transform="translate(-341.35 466.94) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="567.04" cy="818.04" rx="1.67" ry="2.78" transform="translate(-412.36 640.55) rotate(-45)" style="fill:#f2f2f2"/><ellipse cx="597.16" cy="811.02" rx="1.67" ry="2.78" transform="translate(-349.91 468.37) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="614.25" cy="804.15" rx="1.67" ry="2.78" transform="translate(-343.22 476.71) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="583.25" cy="822.65" rx="1.67" ry="2.78" transform="translate(-358.71 462.6) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="599.08" cy="829.01" rx="1.67" ry="2.78" transform="matrix(0.83, -0.56, 0.56, 0.83, -359.58, 472.47)" style="fill:#f2f2f2"/><ellipse cx="612.09" cy="819.65" rx="1.67" ry="2.78" transform="translate(-242.92 258.01) rotate(-19.95)" style="fill:#f2f2f2"/><ellipse cx="567.51" cy="834.85" rx="1.67" ry="2.78" transform="translate(-402.77 556.29) rotate(-39.78)" style="fill:#f2f2f2"/><ellipse cx="608.41" cy="849.26" rx="1.67" ry="2.78" transform="translate(-369.26 481.06) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="617.6" cy="836.51" rx="1.67" ry="2.78" transform="translate(-360.63 484.02) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="610.8" cy="785.73" rx="1.67" ry="2.78" transform="translate(-179.99 181.49) rotate(-14.76)" style="fill:#f2f2f2"/><ellipse cx="588.49" cy="842.18" rx="1.67" ry="2.78" transform="translate(-368.68 468.8) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="593.28" cy="858.1" rx="1.67" ry="2.78" transform="translate(-447.07 780.66) rotate(-51.08)" style="fill:#f2f2f2"/><ellipse cx="572.55" cy="852.83" rx="1.67" ry="2.78" transform="translate(-377.28 461.74) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="543.69" cy="845.85" rx="1.67" ry="2.78" transform="translate(-415.33 543.6) rotate(-39.78)" style="fill:#f2f2f2"/><ellipse cx="548.88" cy="831.49" rx="1.67" ry="2.78" transform="translate(-369.42 445) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="558.5" cy="848.34" rx="1.67" ry="2.78" transform="translate(-377.16 453.18) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="503.76" cy="790.33" rx="1.67" ry="2.78" transform="translate(-354.16 413) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="525.89" cy="788.74" rx="1.67" ry="2.78" transform="translate(-349.54 425.02) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="505.62" cy="807.8" rx="1.67" ry="2.78" transform="translate(-363.55 416.98) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="527.19" cy="810.29" rx="1.67" ry="2.78" transform="translate(-361.29 429.38) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="510.13" cy="825.53" rx="1.67" ry="2.78" transform="translate(-443.76 647.13) rotate(-47.69)" style="fill:#f2f2f2"/><ellipse cx="529.85" cy="826.82" rx="1.67" ry="2.78" transform="translate(-446.57 722.03) rotate(-51.22)" style="fill:#f2f2f2"/><ellipse cx="469.29" cy="762.36" rx="1.67" ry="2.78" transform="translate(-344.42 389.14) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="488.02" cy="766.76" rx="1.67" ry="2.78" transform="translate(-343.72 400.28) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="468.28" cy="785.85" rx="1.67" ry="2.78" transform="translate(-357.64 392.54) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="485.86" cy="787.16" rx="1.67" ry="2.78" transform="translate(-355.41 402.52) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="467.74" cy="801.88" rx="1.67" ry="2.78" transform="translate(-366.64 394.94) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="484.19" cy="804.37" rx="1.67" ry="2.78" transform="translate(-365.25 404.49) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="455.29" cy="781.2" rx="1.67" ry="2.78" transform="translate(-357.25 384.54) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="489.4" cy="823.18" rx="1.67" ry="2.78" transform="translate(-374.82 410.55) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="471.63" cy="817.82" rx="1.67" ry="2.78" transform="translate(-450.64 616.14) rotate(-47.69)" style="fill:#f2f2f2"/><ellipse cx="518.03" cy="836.92" rx="1.67" ry="2.78" transform="translate(-458.86 716.58) rotate(-51.22)" style="fill:#f2f2f2"/><ellipse cx="579.88" cy="729.74" rx="1.67" ry="2.78" transform="matrix(0.83, -0.56, 0.56, 0.83, -307.67, 445.08)" style="fill:#f2f2f2"/><ellipse cx="594.86" cy="738.06" rx="1.67" ry="2.78" transform="translate(-309.77 454.8) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="606.45" cy="755.4" rx="1.67" ry="2.78" transform="translate(-317.45 464.16) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="456.32" cy="758.18" rx="1.67" ry="2.78" transform="translate(-344.29 381.23) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="472.4" cy="739.35" rx="1.67" ry="2.78" transform="translate(-331.12 386.99) rotate(-33.75)" style="fill:#f2f2f2"/><ellipse cx="488.96" cy="742.58" rx="1.67" ry="2.78" transform="translate(-330.12 396.73) rotate(-33.75)" style="fill:#f2f2f2"/></g><path d="M631,837.33s-5.31-14-15.81-4.68-3.9,13.59-15.8,15.69-13,.65-21.65,8.81-17.26-4.78-19.21-8.81-12.46-10.15-21.79-6.06-26.45-.85-28.83-4.95-5.88-16.68-18.13-16.8-20-.21-25.77-7.75-10.69-12.81-20.6-10.47,14.29,58.28,14.29,58.28l124.54,19,45.21-23Z" style="fill:#fff"/></g><g id="BlockA"><polygon points="378.57 531.66 484.48 592.35 661.34 490.76 555.27 429.65 378.57 531.66" style="fill:#fff"/><path d="M535.23,663.33c14.79,1.11,7.63-23.09,22-26.71,8.18-2,10.55,9,18.86,7.53,15.81-2.88,11-48.18,27.1-48.32,4.95,0,4.95,7.92,9.89,8.12,9.12.38,10.23-15.11,19.35-15.3,5.88-.12,7.1,4.79,12.88,3.7,11.44-2.15,3.25-25.11,13.55-30.53,1.41-.74,1.09-11.79,2.5-12.53l0-58.53L484.48,592.35v94.2C498.11,693.66,510.53,661.47,535.23,663.33Z" style="fill:#ded6bf"/><path d="M535.23,663.33c14.79,1.11,7.63-23.09,22-26.71,8.18-2,10.55,9,18.86,7.53,15.81-2.88,11-48.18,27.1-48.32,4.95,0,4.95,7.92,9.89,8.12,9.12.38,10.23-15.11,19.35-15.3,5.88-.12,7.1,4.79,12.88,3.7,11.44-2.15,3.25-25.11,13.55-30.53,1.3-.67,1.14-10,2.18-12.13-1.49,1.85-8,9.86-17,19.07-9.22,9.53-36.81,8.65-45.45,14-13.09,8-31.89,41.07-62.59,36.28s-40.29,32.33-51.44,38.67a.37.37,0,0,0-.12.13c.12-.13,0,28.76,0,28.76C492.45,699.69,510.53,661.47,535.23,663.33Z" style="fill:#cc1e33"/><path d="M378.57,531.66l0,85.07c7.06,2.45,4.42-9.29,11.7-7.63,8.91,2,6.18,16.72,14.77,19.86,7.52,2.75,1.56-17.1,8.83-13.73,10.21,4.72,10,32.58,19,39.28,7.66,5.67,22.87-5.15,31.26-.63,9.62,5.17,16.16,29.29,20.35,32.67v-94.2Z" style="fill:#fff6db"/><path d="M378.53,616.73c7.06,2.45,4.42-9.29,11.7-7.63,8.91,2,6.18,16.72,14.77,19.86,7.52,2.75,1.56-17.1,8.83-13.73,10.21,4.72,10,32.58,19,39.28,7.66,5.67,22.87-5.15,31.26-.63,9.62,5.17,16.16,29.29,20.35,32.67V657.79c-6.65,3.26-12-10.15-17.55-13.8-9.46-6.17-24.36-1-28.75-15.69-2-6.63-11-26.52-25.57-23.69-13.19,2.57-33.79-12.8-34.06-17.84Z" style="fill:#e7223a"/></g><g id="bottlev2"><path d="M683.72,191.75s27.41-30.25,29.5-35.65,30.48-27.86,46-36.91c18.31-10.37,25.27-39.65-6.91-72.67-32.43-28.06-50.19-16.75-58.37-12.05s-18.8,21.06-18.8,21.06-22.07,30.29-35,34c-21.42,13.22-26.64,21.58-30.3,25.41s62.31,76.86,62.31,76.86Z" style="fill:#6f1811"/><path d="M683.72,191.75s27.41-30.25,29.5-35.65,30.48-27.86,46-36.91c18.31-10.37,25.27-39.65-6.91-72.67-32.43-28.06-50.19-16.75-58.37-12.05s-18.8,21.06-18.8,21.06-22.07,30.29-35,34c-21.42,13.22-26.64,21.58-30.3,25.41s62.31,76.86,62.31,76.86Z" style="fill:#f2f2f2;stroke:#000;stroke-miterlimit:10;opacity:0.2"/><path id="label" d="M634.26,230.61l49.46-38.86s11.16-38.81-24.73-64.63-50-14-50-14-34.08,31.35-38.82,46.28C567.06,182.37,587,225.13,634.26,230.61Z" style="fill:#e7223a"/><path id="above_label_cola" data-name="above label cola" d="M528.11,260.21l17.21,17.64s16.21-15.15,25.53-18.21,63-20.58,64.11-30.87c4.17-10.43,6.25-28-21.7-54.79-22.17-21.3-38.13-17.56-43.78-15.1l-1.5,2.78s-12.86,34.22-15,57.11C551.89,230.33,539.81,246.77,528.11,260.21Z" style="fill:#851d14"/><path id="above-label_bottle" data-name="above-label bottle" d="M613.26,174c-28-26.84-46-13.91-46-13.91s-23.22,29.8-33.1,64c-6.57,12.25-13.9,19.25-17.06,21.93,14.31,0,24.93,13.91,28.12,21.41a13.55,13.55,0,0,1,.12,10.44h0s16.21-15.15,25.53-18.21,63-20.58,64.11-30.87C639.13,218.34,641.21,200.82,613.26,174Z" style="fill:#f2f2f2;opacity:0.2"/><path id="above-label_bottle_outline" data-name="above-label bottle outline" d="M613.26,174c-28-26.84-46-13.91-46-13.91s-23.22,29.8-33.1,64c-6.57,12.25-13.9,19.25-17.06,21.93,14.31,0,24.93,13.91,28.12,21.41a13.55,13.55,0,0,1,.12,10.44h0s16.21-15.15,25.53-18.21,63-20.58,64.11-30.87C639.13,218.34,641.21,200.82,613.26,174Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.25px"/><path d="M543.86,272.61a10.92,10.92,0,0,1-.92,2.78A12.85,12.85,0,0,1,543.86,272.61Z"/><ellipse cx="510.96" cy="279.72" rx="7.83" ry="15.81" transform="translate(-44.18 456.2) rotate(-46.33)" style="fill:#f2f2f2;opacity:0.2"/><g id="lines" style="opacity:0.67"><path d="M578.14,228.51s34.64-26.07,34.64-27.33" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.75px;opacity:0.67"/><path d="M544.26,208.87s15-32.12,22.8-40.56" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.75px;opacity:0.67"/><line x1="562.9" y1="208.87" x2="586.96" y2="179.27" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.75px;opacity:0.67"/></g><path d="M583.18,248.36s32.39-14.8,40.33-19.85c1.56-1.06,2.26.16,1,1-.94,1.75-38.26,20.32-40,20.16C582.62,250.52,582.1,249.17,583.18,248.36Z" style="fill:#fff"/><g id="bottom_lines" data-name="bottom lines" style="opacity:0.67"><path d="M692.18,125.86s16.57-20.06,29.51-27.16c12.43-6.17,40.5-34,40.54-40.47" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.75px;opacity:0.67"/><path d="M657.79,105.8s34.39-28.34,37.27-32.73c2.42-4.91,37.27-37.48,37.27-37.48" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.75px;opacity:0.67"/><path d="M650.59,84c13.78-9.41,23.64-18.92,29.2-27,4.13-9,23-27,23-27" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.75px;opacity:0.67"/></g><path d="M530.35,290.7s3.66-5.59,8.38-6.41,9.89-8.8,6.46-16.89a41.9,41.9,0,0,0-11-14.46c-6.18,7.66-12.82,14.86-18.15,20.36Z" style="fill:#851d14"/><path d="M528.05,293.64c5.88-5,4.42-16.39-3.27-25.44-.63-.74-1.28-1.42-1.95-2.08-9.37,10.22-17.29,17.57-17.29,17.57l2.19,6.77C514.83,296.23,523.19,297.77,528.05,293.64Z" style="fill:#851d14"/><path d="M545.19,267.4c-3.44-8.08-15.48-23.56-31.49-21.17a25.72,25.72,0,0,0-8.92,12.53c6-1.13,14,2.39,20,9.44,6.43,7.57,8.48,16.75,5.56,22.48v0s3.66-5.59,8.38-6.41S548.62,275.49,545.19,267.4Z" style="fill:#f2f2f2;stroke:#000;stroke-miterlimit:10;opacity:0.2"/><ellipse cx="514.13" cy="277.25" rx="13.98" ry="21.5" transform="translate(-57.18 398.9) rotate(-40.36)" style="fill:#f2f2f2;opacity:0.47"/><path d="M522.4,290.64c3-3.13.29-10.55-6-16.58-.18-.18-.37-.34-.56-.51-6,6.17-10.27,10.14-10.27,10.14l.77,2.39C512.46,291.59,519.53,293.65,522.4,290.64Z" style="fill:#851d14"/><path id="opening-shadow" d="M507.41,268.22c-3.35-1.21-6.28-1.12-7.89.56-2.5,2.62-1,8.24,3.25,13.54C502.72,282,501,271.36,507.41,268.22Z" style="opacity:0.22"/><path d="M752.28,46.51c-9.53-8.24-17.78-13.08-24.91-15.69,1,.5,32.42,16.67,42.49,45.43,10.23,29.23-36.53,41.16-46.52,53.1S693.2,166.9,693.2,166.9s-3.53,6.23-5.88-2.36-5.65-16.23-16.71-24.7-12.82,30-12.82,30l14.57,14.93L637.2,212.94c-1-9-6-20.38-19.52-34.53,1.47,1.87,19.55,24.87,17.89,32.17,0,1.3,0,2.53,0,3.65,0,5.45-.63,8.32-3.67,3.77a31.42,31.42,0,0,1-5,4.43c-8.82,6.83-27,18.6-39.94,21.87-5.64,2.92-2.59,3.31-8.82,6.46-3.65,1.57-25.35,11.42-32.24,18.78a13.08,13.08,0,0,0-.71-2.14c-2.61-6.14-10.19-16.54-20.7-20.14.83.46,21.91,12.4,19.37,25.35a10.92,10.92,0,0,1-.92,2.78h0a13.13,13.13,0,0,1-.74,1.37l-6.82,4.67c-1.81.34-3.79-2.21-5.53-5a30.93,30.93,0,0,0-5.07-8.22c-7.69-9.05-18.69-12.33-24.57-7.34a10.11,10.11,0,0,0-.93.92c.54-.42,8.25-6.21,19.47,3.5,11.63,10.07,11,17.59,10.14,23s-5,6.78-10.14,6.34c-3.52-.3-10.21-3.76-14.36-7.27,7.63,8.27,18,11.12,23.66,6.31a9.64,9.64,0,0,0,2.3-2.93v0c.22-.33,3.8-5.61,8.37-6.39,2.53-.44,5.2-3,6.59-6.44h0c.49-.46,16.35-15.19,25.52-18.2,8.79-2.88,57-18.62,63.41-29l49.46-38.86s27.41-30.24,29.5-35.64,30.48-27.86,46-36.92C777.5,108.81,784.46,79.54,752.28,46.51Zm-220.63,238c0-.44,0-.89-.07-1.34l.29.65Z" style="opacity:0.22"/></g>
                    <g id="pouring_cola" data-name="pouring cola"><polygon points="523.53 286.84 525.54 430.74 505.54 419.19 505.79 284.46 523.53 286.84" style="fill:#851d14"/></g>
                    <g id="pouring_cola_render"></g>
                    <g id="donut2"><path d="M174.12,637.86a93.3,93.3,0,0,0-1.49,17.1c0,23.77,7.69,50,20.33,74l4.27,2.5L223,715.64c-6.37-12.17-10.25-25.45-10.25-37.5,0-26.58,18.84-37.46,41.86-24.17s41.87,45.93,41.87,72.52c0,21.54-12.37,32.77-29.31,29.18l.17.12s-3.77,8.58-8.27,11l46,26.55,27.52-16.65a83.82,83.82,0,0,0,4.06-27c0-52.09-36.91-116-82-142.06C235,596.28,217,593.91,202.8,599.13l0,0s-25.35,10.08-34,17.85c-3.12,5.17-.05,24.18-.05,24.18Z" style="fill:#f4bc5e"/><path d="M197.23,731.43h0c-6.87-12.59-11.09-26.51-11.09-39.08,0-26.59,18.84-37.46,41.86-24.17s41.87,45.93,41.87,72.51c0,12.38-4.09,21.35-10.77,26.06h0l46,26.55c3.19-8.25,4.94-18.11,4.94-29.43,0-52.09-36.91-116-82-142.07s-82-4.73-82,47.36a137,137,0,0,0,4.93,35.13Z" style="fill:#ff4fff"/><path d="M166.4,618.6s11.48-11.31,20.32-10.52,14.95-1.75,19.26-.66c6.63,1.68,5.69,7.13,12,7s7.39-1.81,12.14.81,3.07,10.57,10.33,12,11.57,3.07,14.35,6.84c2.33,3.15,3.53,12.1,9.78,17.66,6.1,5.44,16.9,12,21.62,18.19,5.1,6.65-1.83,13.24,4.77,18.12s4.66,14,7.54,21.31c2.51,6.38,12.61,12.58,12.61,16.11,0,7-3.79,7.81-3.53,14.62.21,5.41,6.45,12.16,6.12,17.36-.28,4.55-4.4,19-5.37,23.35-1.12,5,4.52,7.79,4.52,7.79l-7.8,4.71-5.65-39.39-21.38-60.19L253,654.51,219.06,632l-35.5-10.43Z" style="fill:#ff4fff"/><polygon points="168.68 645.31 171.06 645.8 171.97 640.68 169.44 640.12 168.68 645.31" style="fill:#fff"/><polygon points="177.92 645.06 180.69 645.06 180.69 638.81 177.33 638.81 177.92 645.06" style="fill:#fff"/><polygon points="154.19 669.74 156.39 668.72 154.09 664.07 151.73 665.11 154.19 669.74" style="fill:#fff"/><polygon points="164.69 662.65 166.92 661.01 163.2 655.98 160.5 657.97 164.69 662.65" style="fill:#fff"/><polygon points="153.1 682.16 154.22 680.01 149.55 677.73 148.32 680.01 153.1 682.16" style="fill:#fff"/><polygon points="194.46 644.5 194.81 642.1 189.65 641.48 189.24 644.03 194.46 644.5" style="fill:#fff"/><polygon points="193.68 635.28 193.52 632.52 187.28 632.88 187.47 636.24 193.68 635.28" style="fill:#fff"/><polygon points="201.27 644.15 203.48 643.14 201.19 638.48 198.82 639.52 201.27 644.15" style="fill:#fff"/><polygon points="208.58 638.47 210.8 636.84 207.1 631.8 204.39 633.79 208.58 638.47" style="fill:#fff"/><polygon points="222.26 649.6 223.74 647.67 219.53 644.63 217.93 646.66 222.26 649.6" style="fill:#fff"/><polygon points="226.06 641.16 227.25 638.67 221.62 635.96 220.16 638.98 226.06 641.16" style="fill:#fff"/><polygon points="185.09 650.63 185.35 653.04 190.5 652.34 190.26 649.76 185.09 650.63" style="fill:#fff"/><polygon points="188.17 659.35 189.02 661.98 194.97 660.06 193.93 656.86 188.17 659.35" style="fill:#fff"/><polygon points="170.67 655.08 171.66 657.3 176.35 655.07 175.34 652.7 170.67 655.08" style="fill:#fff"/><polygon points="176.24 662.47 177.85 664.72 182.94 661.08 180.99 658.35 176.24 662.47" style="fill:#fff"/><polygon points="237.8 660.23 240.01 659.21 237.71 654.55 235.35 655.6 237.8 660.23" style="fill:#fff"/><polygon points="252.21 654.57 254.44 652.92 250.72 647.89 248.02 649.88 252.21 654.57" style="fill:#fff"/><polygon points="264.81 673.17 266.78 671.74 263.62 667.62 261.5 669.1 264.81 673.17" style="fill:#fff"/><polygon points="270.87 666.18 272.74 664.14 268.12 659.92 265.86 662.4 270.87 666.18" style="fill:#fff"/><polygon points="264.18 675.07 264.44 677.49 269.59 676.78 269.35 674.21 264.18 675.07" style="fill:#fff"/><polygon points="267.26 683.8 268.11 686.43 274.06 684.5 273.02 681.31 267.26 683.8" style="fill:#fff"/><polygon points="250.4 668.16 251.38 670.38 256.08 668.15 255.07 665.77 250.4 668.16" style="fill:#fff"/><polygon points="255.97 675.54 257.58 677.79 262.67 674.16 260.72 671.43 255.97 675.54" style="fill:#fff"/><polygon points="289.51 735.72 287.08 735.77 287.33 740.96 289.91 740.95 289.51 735.72" style="fill:#fff"/><polygon points="277.05 738.01 274.35 738.63 275.74 744.73 279.01 743.98 277.05 738.01" style="fill:#fff"/><polygon points="278.71 702.77 276.52 703.82 278.89 708.44 281.23 707.36 278.71 702.77" style="fill:#fff"/><polygon points="271.5 708.56 269.29 710.23 273.08 715.21 275.75 713.18 271.5 708.56" style="fill:#fff"/><polygon points="277.47 698.76 279.54 697.49 276.71 693.14 274.49 694.45 277.47 698.76" style="fill:#fff"/><polygon points="284.05 692.26 286.07 690.37 281.79 685.8 279.34 688.1 284.05 692.26" style="fill:#fff"/><polygon points="285.76 723.02 287.36 721.18 283.34 717.88 281.62 719.81 285.76 723.02" style="fill:#fff"/><polygon points="290.07 714.83 291.42 712.42 285.97 709.36 284.33 712.29 290.07 714.83" style="fill:#fff"/><polygon points="303.16 781.9 301.3 780.33 298.06 784.4 300.02 786.09 303.16 781.9" style="fill:#fff"/><polygon points="292.95 771.86 290.25 772.45 291.59 778.56 294.87 777.84 292.95 771.86" style="fill:#fff"/><polygon points="286.39 753.78 284.2 754.83 286.57 759.45 288.92 758.37 286.39 753.78" style="fill:#fff"/><polygon points="279.18 759.57 276.98 761.24 280.76 766.22 283.43 764.19 279.18 759.57" style="fill:#fff"/><polygon points="294.94 741.01 297.01 739.73 294.18 735.38 291.95 736.7 294.94 741.01" style="fill:#fff"/><polygon points="301.51 734.5 303.53 732.61 299.25 728.05 296.81 730.35 301.51 734.5" style="fill:#fff"/><polygon points="293.16 761.11 294.75 759.27 290.73 755.98 289.01 757.91 293.16 761.11" style="fill:#fff"/><polygon points="297.46 752.92 298.81 750.51 293.36 747.46 291.72 750.38 297.46 752.92" style="fill:#fff"/><polygon points="175.54 675.5 173.84 673.76 170.23 677.5 172 679.37 175.54 675.5" style="fill:#fff"/><polygon points="179.25 673.59 181.05 671.5 176.31 667.42 174.12 669.96 179.25 673.59" style="fill:#fff"/><polygon points="175.7 713.96 177.62 712.48 174.34 708.45 172.27 709.99 175.7 713.96" style="fill:#fff"/><polygon points="181.55 706.79 183.35 704.7 178.62 700.62 176.43 703.16 181.55 706.79" style="fill:#fff"/><polygon points="169.81 686.69 168.1 684.96 164.5 688.7 166.28 690.57 169.81 686.69" style="fill:#fff"/><polygon points="164.95 673.17 163.26 670.98 158.31 674.79 160.35 677.45 164.95 673.17" style="fill:#fff"/><polygon points="157.13 705.18 159.06 703.7 155.78 699.67 153.71 701.21 157.13 705.18" style="fill:#fff"/><polygon points="162.98 698.02 164.79 695.92 160.05 691.84 157.86 694.38 162.98 698.02" style="fill:#fff"/><polygon points="246.36 645.46 244.59 643.79 241.14 647.67 242.99 649.47 246.36 645.46" style="fill:#fff"/><polygon points="238.35 640.83 236 639.38 232.73 644.71 235.59 646.46 238.35 640.83" style="fill:#fff"/><polygon points="232.82 651.83 233.8 654.05 238.49 651.82 237.48 649.45 232.82 651.83" style="fill:#fff"/><polygon points="247.88 662.87 248.79 660.26 242.88 658.2 241.78 661.37 247.88 662.87" style="fill:#fff"/><polygon points="215.41 656.7 215.39 654.27 210.2 654.44 210.18 657.02 215.41 656.7" style="fill:#fff"/><polygon points="213.25 647.7 212.67 645 206.55 646.3 207.25 649.59 213.25 647.7" style="fill:#fff"/></g><g id="lollitree"><polygon points="454.82 157 465.95 164.19 354.77 382.96 343.03 377 454.82 157" style="fill:#fff;stroke:#000;stroke-miterlimit:10;stroke-width:0.5px"/><circle cx="350.13" cy="379.65" r="58.92" style="fill:#ed1c24"/><rect x="287.48" y="377.45" width="124.62" height="9.03" transform="translate(488.77 880.89) rotate(-153.08)" style="fill:#d41920"/><path d="M415.13,410.19s-4.69-13.74-19.86-5.45-25.19,9.16-31.74,5.45-21.37-13.21-30.53-3-29.38,9.34-31.94,5.11-9.87,3-9.87,3L319,461,412,434.39Z" style="fill:#fff"/></g><g id="vonschee"><path id="neck" d="M92.07,680.73a15.23,15.23,0,0,1-.62-3.3l-5.13-.4s.73,3,0,3.9l2.87,1.15Z" style="fill:#d6a793"/><path id="shirt" d="M89.42,681.32,93,680l2.68,5c-1,7.72,3.29,16.3.89,19.84C94.2,706.6,83,704,80.2,702c.84-5.23,4.5-12.41,4.64-22Z" style="fill:#78c0b3"/><path id="left-hand" d="M106,701.47l.28.22,2.34.14,2.85-.18V702l-2.52.29,3.51.41v.33l-3.67-.14,4.19.78v.46l-4.11-.58,3.71,1.73-.24.34-3.62-1.31-1.51.31s1,1.85.81,2.3l-.34.11-2.24-2.3-1-.17-2-3.51,2-1.34Z" style="fill:#efbaa4"/><path id="left-arm-sleeve" d="M93,680s4.58-.49,6.82,9.17c1.81,5.2,6.1,11.11,6.1,11.11s-1.33,3.5-2.8,3.57c-.81-.34-6.35-12.33-6.35-12.33s-1.21-2.82-2.17-2.87S90.4,682.51,93,680" style="fill:#78c0b3"/><path id="right-upper-leg" d="M84.6,708.49s-3.49,3.06-4.61,4.12c-1.51.44-6.32-1-5.51-3.1s4.4-3.65,5.7-3.91S84.6,708.49,84.6,708.49Z" style="fill:#81cfc1"/><g id="right-leg"><polygon id="right-leg-2" data-name="right-leg" points="80.19 712.22 76.98 723.14 70.91 721.94 74.5 709.98 80.19 712.22" style="fill:#81cfc1"/><path id="right-bootie" d="M71,721.67l6.07,1.2s1.57,5.18-2.09,6.07a41.48,41.48,0,0,1-8-.6s-2.19-2.77.41-4.32C68.79,723.57,70.82,723,71,721.67Z" style="fill:#212121"/></g><path id="left-upper-leg" d="M92.24,712.21s-3.49,3.06-4.6,4.12c-1.52.44-6.32-1-5.52-3.1s4.4-3.65,5.7-3.91S92.24,712.21,92.24,712.21Z" style="fill:#78c0b3"/><g id="left-leg"><polygon id="left-leg-2" data-name="left-leg" points="87.93 715.13 84.71 726.05 78.64 724.85 82.24 712.89 87.93 715.13" style="fill:#78c0b3"/><path id="left-bootie" d="M78.72,724.58l6.07,1.2s1.57,5.17-2.08,6.07a41.64,41.64,0,0,1-8-.6s-2.19-2.77.42-4.33C76.52,726.48,78.55,725.87,78.72,724.58Z" style="fill:#111118"/></g><path id="skirt" d="M96.58,704.8s2.39,8.12-4.22,11.33L90.91,714l-2.16,1.31-1.7-2.45H85l-2.58-1.62-1.32.71-2.43-2.68-2.2.31-1.35-2.09H72.89S78.77,699,81.06,700s15.52,4.79,15.52,4.79" style="fill:#4c3e36"/><path id="bottom_hair" data-name="bottom hair" d="M110,663.42s.72,2.19,1.29,2.32a.52.52,0,0,1-.65.07s-.12,1.28,2.13.35c0,0-.24.72-.43.78s.33.2.43.1,0,.35-.38.4.23.16.49,0-.71,1.08-1,1.11,3.32,2.9-1.25,4.37c0,0,.26-.31.25-.46s-.53-.23-.58-.09.18-.3.18-.3,2.44-.74-1.29-2.43a41,41,0,0,1-6.47-3.66l1.84-4.22Z" style="fill:#06060d"/><path id="face" d="M106.19,663.38c4.24.94,4.49,3,2.82,6.3-1.92,3.43-6.72,3-6.72,3-2.32,3.56-3.9,3.34-5,4.24s-7.5,2.3-7.5,2.3c-1.35.31-4.15-.57-7.62-2.16s-2.61-4.55-3.48-4.79a3.46,3.46,0,0,1-1.94-1.55c-.78-.44-1.5-3.68-1.21-5.67s1.21-1.35,1.21-1.35l.39-1.55,5-10.39,15.75-1,6.17,12.59" style="fill:#efbaa4"/><path id="hair" d="M85.92,653.89s1.66,8,5.29,8.91c0,0-3.71-4.46-3.28-6.38,0,0,3.62,5.5,5.32,5.77,0,0-3.31-3.15-3.66-4.72,0,0,9,10.39,9.38,9.08,0,0-2.27-2.18-1.83-3l2.71,3.17a19.92,19.92,0,0,0,1,3.46c.26.13,1.26.26.91,2.57s-1.44,6.86-1.44,6.86,1.23-.53,3.1-9.39V667.9a17.81,17.81,0,0,1,.88-4l1.58-.8,4.13.31s-.85-5.54,1.44-9.55,3.65-10.74,2.06-12.56-3.29-7.81-11.88-5c-2.52,2.41-1.86,4.61-1.86,4.61a5,5,0,0,0-2.2,2.94,7.16,7.16,0,0,1-2.1,3.37,4.75,4.75,0,0,1-2.69-1.08c-.86-.93-3.95-1.4-7.6.66-2.07.45-3.27.55-5.89,4-1.34,2.8-.58,2.69-.71,3.71s-3.08,5.42-1.24,11c.11.45-.42,7.49-.42,7.49a2.81,2.81,0,0,1,.19,1.75,5.38,5.38,0,0,0,.51-1.13,5.74,5.74,0,0,1,.12,1.5l.51-6.15.25,4.39a6.1,6.1,0,0,0,.09,1.85,3.8,3.8,0,0,1,.23,2.18s.25-.62.54-1.16l0,1.79.57-2.88a9.65,9.65,0,0,1-1.11-2.6,15.21,15.21,0,0,0,.16-6.41c-.7-2.93-1-4.44,1.37-6.63a31.31,31.31,0,0,0,4.44-4.73,4.9,4.9,0,0,1-1.39,2.86S85.87,655.35,85.92,653.89Z" style="fill:#06060d"/><path id="scrunchie" d="M95.36,647.05s6-.39,6.73,3.06c1.55.43,3.79-1.25,1.9-3.71a6.78,6.78,0,0,0-7.73-2C93.72,645.36,93.63,646.57,95.36,647.05Z" style="fill:#c02452"/><path id="right-shirt-sleeve" d="M84.84,680a2.3,2.3,0,0,0-3.12.55c-1.11,1.76-.7,8.28,2,10.67-.49.35.51-1.18,1.56-1.6-1.72-1.73-2.15-.83,0-2.33Z" style="fill:#78c0b3"/><path id="hoodie-left" d="M89,681.71s1.48-2.42,3-2.43,1.88.48,2.1.87a4.35,4.35,0,0,0-1.11-.2,4.38,4.38,0,0,0-2.25,1.37C90.19,682.2,89.51,681.21,89,681.71Z" style="fill:#49887a"/><path id="right-hoodie" d="M89,681.71s-3.22-4-4.6-2.15c0,0,.16.6.58.72A13.61,13.61,0,0,1,89,681.71Z" style="fill:#49887a"/><path d="M96.7,644.52s.32-2.34.51-3-1-2.43,1.29-3.35c1.87-.5,1,0,2.78,0s.94,1.29,0,2-1.42,2-1.23,2.14-1.47,1.5-1,2.23S96.7,644.52,96.7,644.52Z" style="fill:#c02452"/><path d="M96.7,644.52a7.88,7.88,0,0,1,0-2.42c.24-.61.49-4.28-2.51-5.28-1.45.86-2.39,3.41-2.12,3.62s2.15,1.13,2.12,1.69-.92,2,.37,2.71c.55.47.51.75.51.75l1.63-1.07" style="fill:#c02452"/><path d="M103.71,652.33c-.35-.33-1.1-1.74-.56-2.05s.83.16,1.33,1.46c.38.8.27.94,0,1A1.13,1.13,0,0,1,103.71,652.33Z" style="fill:#ffccfa"/><path d="M84.66,685.22l-1.33,5.49s.26-.06.28-.19S84.93,686.16,84.66,685.22Z" style="fill:#49887a"/><path d="M95.64,689.38s-.7-2.75-1.19-3c0,0,1.74,9.28,1.19,9.84,0,0,1.68,4.7,1.68,5a60.65,60.65,0,0,0-1.14-7.32c-.11-.37-.09-.77-.16-1.07C95.71,691.31,95.82,690.53,95.64,689.38Z" style="fill:#49887a"/></g></svg>
        </div>
        </div>
    
              
            
!

CSS

              
                
body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: rgb(255, 204, 250);
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.svg-wrapper {
    width: 500px;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(50, 50, 50, 1.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-height: 800px) {
    .svg-wrapper {
        width: auto;
        height: calc(100vh - 32px);
        margin: 0px;
    }

    .svg-wrapper svg {
        height: 100%;
        width: auto;
    }
}


@media (max-width: 500px) {
    .svg-wrapper {
        width: 100%;
        margin: 16px;
    }
}

              
            
!

JS

              
                const llg = document.getElementById('left-leg');
const rlg = document.getElementById('right-leg');

let legAnimationT = 0;
let legAnimationT2 = 0;
function animateLegs() {
    const legAngle = Math.max(Math.sin(legAnimationT) * 30, 0) - 10;
    const legAngleR = Math.max(Math.sin(legAnimationT2) * 30, 0) - 10;
    llg.style.transform = `translate(85.127px, 714.025px) rotate(${legAngle}deg) translate(-85.127px, -714.025px)`;
    rlg.style.transform = `translate(77.392px, 711.116px) rotate(${legAngleR}deg) translate(-77.392px, -711.116px)`;
    legAnimationT += 0.1;
    legAnimationT2 = legAnimationT + 0.8;
    if (legAnimationT === 0) {
        setTimeout(animateLegs, 200);
    } else {
        setTimeout(animateLegs, 35);
    }
}

animateLegs();

class Point {
    constructor(x = 0, y = 0) { this.x = x; this.y = y; }
    toString() { return `${this.x},${this.y}`; }
    copy() { return new Point(this.x, this.y); }
    add(o) { return new Point(this.x + o.x, this.y + o.y); }
    sub(o) { return new Point(this.x - o.x, this.y - o.y); }
    scale(s) { return new Point(this.x * s, this.y * s); }
    mag() { return Math.sqrt(this.x**2 + this.y**2); }
    getUnit() {
        const m = this.mag();
        if (m === 0) return new Point();
        return new Point(this.x / m, this.y / m);
    }
}
var COLA_COLORS = [
    '#f04848',
    '#b78f55',
    '#f7d8aa',
    'white',
    'white',
    'white',
];

function randomColaColor() {
    return COLA_COLORS[Math.floor(Math.random() * COLA_COLORS.length)];
}

class Splasher {
    constructor(N, p1, p2, output) {
        this.output = output;
        this.N = N;
        this.p1 = p1;
        this.p2 = p2;
        this.splashes = [];
        this.init();
        this.gravity = new Point(0, 0);
    }

    randomSplash() {
        const dir = this.p2.sub(this.p1);
        const L = dir.mag();
        const v = dir.getUnit();
        const va = new Point(-v.y, v.x);
        const p = v.scale(Math.random() * L).add(this.p1);
        let angle = Math.random() * 90;
        let velocity = new Point(
            Math.random() * va.x,
            Math.sin(angle / 57.3),
        );
        //.add(va.scale(Math.cos(angle / 57.3)));
        // angle = Math.random() * 360 / 57.3;
        // velocity = new Point(
        //     Math.cos(angle),
        //     Math.sin(angle),
        // );
        velocity = new Point(
            -Math.random(),
            Math.random() - 0.5,
        );
        return {
            p,
            v: velocity.scale(Math.random() * 3 + 0.5),
            t: Math.floor(Math.random() * 20 + 5),
        };
    }

    updateSplash(s, e) {
        e.setAttribute('cx', s.p.x);
        e.setAttribute('cy', s.p.y);
        e.style.opacity = Math.min(s.t/10, 1);
    }

    init() {
        for(let i = 0; i < this.N; i++) {
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            const s = this.randomSplash();
            circle.setAttribute('cx', s.p.x);
            circle.setAttribute('cy', s.p.y);
            circle.setAttribute('r', 0.8);
            circle.style.fill = 'white';
            this.output.appendChild(circle);
            this.splashes.push({
                e: circle,
                s,
            });
        }
    }

    step() {
        this.splashes.forEach(splash => {
            const { s, e } = splash;
            s.p = s.p.add(s.v.add(this.gravity));
            this.updateSplash(s, e);
            s.t--;
            if (s.t < 0) {
                splash.s = this.randomSplash();
            }
        });
    }

}

class Sparkle {
    constructor(id, startingPoint, dir, dirLen, element, t, opacityOffset, color = randomColaColor()) {
        this.id = id;
        this.startingPoint = startingPoint;
        this.dir = dir;
        this.dirLen = dirLen;
        this.element = element;
        this.t = t || 0;
        this.opacityOffset = opacityOffset !== undefined ? opacityOffset : Math.random() * 100;
        this.color = color;
    }

    getMoveTo(newElement, dir, dirLen) {
        return new Sparkle(
            this.id,
            this.startingPoint.add(this.dir.scale(this.dirLen)),
            dir,
            dirLen,
            newElement, 
            0,
            this.opacityOffset,
            this.color,
        );
    }

    step(stepSpeed = 0.01) {
        const p = this.currentPoint;
        this.element.setAttribute('cx', p.x);
        this.element.setAttribute('cy', p.y);
        const o = this.currentOpacity;
        this.element.setAttribute('r', o * 1.2);
        this.element.setAttribute('fill', this.color);
        // this.element.style.opacity = this.currentOpacity;
        this.t += stepSpeed;
    }

    get currentOpacity() {
        const sss = this.opacityOffset;
        const o = (Math.sin((this.t + this.opacityOffset) / (Math.PI * 2 / sss)) + 1) / 2;
        return o;
        return o < 0.5 ? 0 : 1;
    }

    get currentPoint() {
        return this.startingPoint.add(this.dir.scale(this.t * this.dirLen));
    }
}

class SvgDrawer {
    constructor(pathElement, outputElement, pathInfo, speed = 0.1) {
        this.pathElement = pathElement;
        this.outputElement = outputElement;
        this.pathInfo = pathInfo;
        this.sparkles = [];
        this.next = null;
        this.speed = speed;
    }

    setNext(n) {
        this.next = n;
    }

    getRandomSparkleStartingPosition() {
        const scalar = Math.random() * 0.75 + 0.125;
        const s = scalar * this.pathInfo.starterLength;
        return this.pathInfo.starterVec.scale(s).add(this.pathInfo.startingPointFrom);
    }

    createSparkle() {
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        this.outputElement.appendChild(circle);
        const startingPosition = this.getRandomSparkleStartingPosition();
        const sparkle = new Sparkle(Math.random(), startingPosition, this.pathInfo.directionVector, this.pathInfo.directionLength, circle);
        this.sparkles.push(sparkle);
        return sparkle;
    }

    createCircle() {
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        this.outputElement.appendChild(circle);
        return circle;
    }

    step(recreate = false) {
        this.sparkles.forEach(s => s.step(this.speed));
        const L = this.sparkles.length;
        this.sparkles = this.sparkles.filter(s => {
            if (s.t > 1) {
                this.outputElement.removeChild(s.element);
                if (this.next) {
                    const next = this.next;
                    const circle = next.createCircle();
                    const sparkle = s.getMoveTo(circle, next.pathInfo.directionVector, next.pathInfo.directionLength);
                    sparkle.step(0);
                    next.sparkles.push(sparkle);
                }
                return false;
            }
            return true;
        });
        const numNewSparkles = L - this.sparkles.length;
        if (recreate) for(let i = 0; i < numNewSparkles; i++) this.createSparkle();
    }

    static computePathData(element, indexables = [0,1,2,3]) {
        let points = [];
        {
            const p = SvgDrawer.elementToPoints(element);
            points = indexables.map(i => p[i]);
        }
        return SvgDrawer.computePathDataFromPoints(points);
    }

    static elementToPoints(element) {
        const points =[];
        const d = element.getAttribute('points').split(' ').map(Number);
        for(let i = 0; i < 4; i++) points.push(new Point(d.shift(), d.shift()));
        return points;
    }

    static computePathDataFromPoints(points) {
        const direction = points[2].sub(points[1]);
        const starterDir = points[1].sub(points[0]);
        return {
            points,
            directionVector: direction.getUnit(),
            directionLength: direction.mag(),
            startingPointTo: points[1],
            startingPointFrom: points[0],
            starterVec: starterDir.getUnit(),
            starterLength: starterDir.mag(),
        };
    }
}

const drawers = [];
let funnel;
{
    const SODA_FALL_A_PARENT_ID = 'SodaFall_A';
    const parent = document.getElementById(SODA_FALL_A_PARENT_ID);
    const outputElement = document.getElementById('sodaFall_A_render');
    const part1 = parent.querySelector('polygon');
    const part2 = parent.querySelector('polyline');
    const drawer = new SvgDrawer(part1, outputElement, SvgDrawer.computePathData(part1, [2,3,0,1]), 0.005);
    const drawer2 = new SvgDrawer(part2, outputElement, SvgDrawer.computePathData(part2, [1, 2, 3, 0]), 0.04);
    drawer.setNext(drawer2);
    drawers.push(drawer);
    drawers.push(drawer2);
    
    
    const parent2 = document.getElementById('sf_Abottom');
    const part3 = parent2.querySelector('polygon');
    const outputElement2 = document.getElementById('sf_Abottom_render');
    const drawer3 = new SvgDrawer(part3, outputElement2, SvgDrawer.computePathData(part3, [3,0,1,2]), 0.1);
    drawers.push(drawer3);
    drawer2.setNext(drawer3);
    drawers.push(new Splasher(200, drawer3.pathInfo.points[2], drawer3.pathInfo.points[3], outputElement2));

    const [part5, part4] = document.getElementById('SodaFall_B').querySelectorAll('polygon');
    const output3 = document.getElementById('SodaFall_B_render');
    let drawer4;
    {
        const points = SvgDrawer.elementToPoints(part4);
        const d3points = drawer3.pathInfo.points;
        const d = SvgDrawer.computePathDataFromPoints(points);
        const offset = new Point();
        const pnts = [
            d3points[1].add(offset), d3points[2].add(offset),
            points[1], points[0],
        ];
        drawer4 = new SvgDrawer(part4, output3, SvgDrawer.computePathDataFromPoints(pnts), 0.01);
    }
    drawers.push(drawer4);
    drawer3.setNext(drawer4);
    let drawer5;
    {
        const pts = SvgDrawer.elementToPoints(part5);
        const points = [
            pts[3],
            pts[0],
            pts[1],
            pts[2],
        ];
        drawer5 = new SvgDrawer(part5, output3, SvgDrawer.computePathDataFromPoints(points), 0.01);
    }
    drawers.push(drawer5);
    drawer4.setNext(drawer5);

    {
        const pouringCola = document.getElementById('pouring_cola');
        const part = pouringCola.querySelector('polygon')
        const points = SvgDrawer.elementToPoints(part);
        const out = document.getElementById('pouring_cola_render');
        funnel = new SvgDrawer(part, out, SvgDrawer.computePathDataFromPoints([
            points[3],
            points[0],
            points[1],
            points[2],
        ]), 0.02);
        drawers.push(funnel);

        drawers.push(new Splasher(100, points[1], points[2], out));
    }

}



function addSparkles(N, X = drawers[0]) {
    for(let i = 0; i < N; i++) {
        const s = X.createSparkle();
        s.t = 0;
    }
}
function getIntervalAddAmount(PC = 0.5) {
    return Math.random() < PC ? 1 : 0;
}
// addSparkles(20);

for(let i = 0; i < 400; i++) {
    drawers.forEach((d, i) => d.step());
    addSparkles(getIntervalAddAmount());
    addSparkles(getIntervalAddAmount(0.2), funnel);
}


setInterval(() => {
    drawers.forEach((d, i) =>d.step());
    addSparkles(getIntervalAddAmount());
    addSparkles(getIntervalAddAmount(0.2), funnel);
}, 30);



              
            
!
999px

Console