Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 625.26 658.08"><title>Hir-2</title><g id="pie-half"><g id="yellow1"><path d="M959.11,492.59l7.51-64.48c44.7,2.67,88.59,10.82,128.4,24.49L1034.39,507A315.08,315.08,0,0,0,959.11,492.59Z" transform="translate(-624.02 -66.92)" fill="#d4ecff"/><path d="M959.11,468.39l7.51-64.48c44.7,2.67,88.59,10.82,128.4,24.48l-60.63,54.36A314.59,314.59,0,0,0,959.11,468.39Z" transform="translate(-624.02 -66.92)" fill="#f9bf30"/><polygon points="335.09 264.78 408.87 268.08 410.37 279.14 410.37 415.82 352.96 394.11 335.09 401.46 335.09 264.78" fill="#f9bf30"/><polygon points="471 224.79 471 361.47 410.37 415.82 410.37 279.14 471 224.79" fill="#e8a200"/><path d="M959.11,331.7l7.51-64.47c44.7,2.66,88.59,10.81,128.4,24.48l-60.63,54.35A315.08,315.08,0,0,0,959.11,331.7Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/><path d="M1034.39,349a314.75,314.75,0,0,0-75.05-14.34l-.23,2A315.08,315.08,0,0,1,1034.39,351L1095,296.66v-2Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/></g><g id="pink1"><path d="M936.23,491.32C887,491,837.61,501,798.5,521.16L719.41,475.5c63-33.84,144-50,224.33-48.62Z" transform="translate(-624.02 -66.92)" fill="#d4ecff"/><path d="M936.23,467.49c-49.24-.3-98.62,9.64-137.73,29.84l-79.09-45.66c63-33.84,144-50,224.33-48.62Z" transform="translate(-624.02 -66.92)" fill="#d3008d"/><polygon points="312.21 400.57 312.21 353.39 319.72 288.94 319.72 336.13 312.21 400.57" fill="#cc0293"/><polygon points="174.47 383.23 262.57 304.03 312.21 353.39 312.21 400.57 184.09 399.75 174.47 430.41 174.47 383.23" fill="#d3008d"/><polygon points="95.39 337.56 95.39 384.75 174.47 430.41 174.47 383.23 95.39 337.56" fill="#d3008d"/><path d="M936.23,420.31C887,420,837.61,429.94,798.5,450.15l-79.09-45.67c63-33.83,144-50,224.33-48.62Z" transform="translate(-624.02 -66.92)" fill="#ff2c9c"/><path d="M936.23,422.88c-49.24-.31-98.62,9.63-137.73,29.84L719.41,407v1.38l79.09,45.66c39.11-20.2,88.49-30.14,137.73-29.84l7.51-64.44h-.16Z" transform="translate(-624.02 -66.92)" fill="#ff2c9c"/></g><g id="purple1"><path d="M1107.32,669.69c48.36-45.28,38.59-105.39-29.4-144.65a215.8,215.8,0,0,0-24.24-12l60.56-54.3A338.94,338.94,0,0,1,1157,479.4c106.9,61.72,120.92,156.71,42.2,227.21Z" transform="translate(-624.02 -66.92)" fill="#d4ecff"/><path d="M1107.32,646.52c48.36-45.28,38.59-105.39-29.4-144.65a214.11,214.11,0,0,0-24.24-12l60.56-54.3A338.94,338.94,0,0,1,1157,456.23c106.9,61.72,120.92,156.71,42.2,227.21Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/><path d="M1053.68,405.91v84l53.64,19.93s69.66-38,69.66-38.92-11.76-81.42-20.36-85S1053.68,405.91,1053.68,405.91Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/><polygon points="483.3 579.6 483.3 495.6 575.16 532.52 575.16 616.51 483.3 579.6" fill="#983be9"/><path d="M1199.18,546.75V683.44s47.94-40.42,50.1-94.05l-.11-87.74-55.79-8.07Z" transform="translate(-624.02 -66.92)" fill="#721bd5"/><path d="M1107.32,562.53c48.36-45.29,38.59-105.4-29.4-144.65a215.85,215.85,0,0,0-24.24-12l60.56-54.3A338.94,338.94,0,0,1,1157,372.23C1263.88,434,1277.9,529,1199.18,599.44Z" transform="translate(-624.02 -66.92)" fill="#8a2ae3"/><path d="M1199.18,602.68l-91.86-36.93v2.18l91.86,36.92c33.67-30.15,50.36-64.79,50.09-99.38C1248.84,539.34,1232.15,573.15,1199.18,602.68Z" transform="translate(-624.02 -66.92)" fill="#8a2ae3"/><path d="M1137.45,506c.85-30.68-19-61.51-59.53-84.93a244.57,244.57,0,0,0-24.24-11.92v2.13a217.53,217.53,0,0,1,24.24,12C1117.52,446.15,1137.33,476.08,1137.45,506Z" transform="translate(-624.02 -66.92)" fill="#8a2ae3"/></g></g><g id="Women-standing-topper"><ellipse cx="394" cy="236.35" rx="27.69" ry="15.99" fill="#f9bf30"/><path d="M1035.51,86.75s-.79,16.4-2,27.43-27.8-8.47-27.8-8.47V93.16Z" transform="translate(-624.02 -66.92)" fill="#6614cf"/><path d="M1021.37,290.87c-.4,1-7.28,9.37-14.16,11.47a15.74,15.74,0,0,1-6.32.87,2.08,2.08,0,0,1-1.69-2.78,26.07,26.07,0,0,1,13.2-14.54C1024.06,280.1,1021.37,290.87,1021.37,290.87Z" transform="translate(-624.02 -66.92)" fill="#173d7a"/><path d="M1023.66,294.09a57,57,0,0,0-3.39,11.17c-.48,3.1,1.22,7.13,2.62,9.8a2.86,2.86,0,0,0,4.46.77,16.56,16.56,0,0,0,5.59-10.67c.79-8.58,0-10.07,0-10.07Z" transform="translate(-624.02 -66.92)" fill="#173d7a"/><path d="M1040.24,190.44a162.74,162.74,0,0,1,0,22.79c-.9,12-4.11,67.92-4.71,81.38,0,0,.3,4.08-7.59,3.18s-7.26-5.42-7.26-5.42-11.08-.15-11.42-6.68-11.35-78-11.35-103.69Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/><polygon points="377.7 67.69 371.31 106.77 365.5 106.67 366.03 70.85 377.7 67.69" fill="#ffc2b0"/><path d="M1004.4,100s-8.63-.22-11.63,12.24-5.35,28.07-2.74,29.37c7.84,3.89,12.8-.67,12.8-.67Z" transform="translate(-624.02 -66.92)" fill="#8a2ae3"/><path d="M1001.82,100.53a7.07,7.07,0,0,1,4.65-.26c7.35,2.11,35,10.22,39.53,14.11,5.26,4.5-7.89,29.76-7.7,38.05s1.12,18,1.85,27,1.72,13.94-5.64,17.77-19.94,4-29.35-3.17-7.71-12.08-7.32-17.29,3.6-27.72,3.32-34.12a24,24,0,0,1-5.77-6.63c-2.46-4.19,1.88-11.89,3.68-16.9s-1-10.73-.46-14.82A4.65,4.65,0,0,1,1001.82,100.53Z" transform="translate(-624.02 -66.92)" fill="#983be9"/><ellipse cx="1021.03" cy="110.47" rx="8.31" ry="10.46" transform="translate(157.71 1042.27) rotate(-82.7)" fill="#fff"/><path d="M1013.61,109.52c-.42,3.25,2.57,6.32,6.66,6.84s7.76-1.69,8.17-4.94-2.56-6.31-6.66-6.84S1014,106.27,1013.61,109.52Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1017.68,98.84s5-4.1,6-2,1.78,11,1.78,11l-9.9,2.66,1.5-9S1015.05,99.76,1017.68,98.84Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><circle cx="1016.96" cy="88.2" r="14.79" transform="translate(-547.14 419.08) rotate(-27.89)" fill="#ffc2b0"/><path d="M1024.34,99.4c.09.47.17,1,.25,1.48-1,5.14-8.69,7.39-8.69,7.39l1.13-6.83s-.93-.79-.67-1.58C1019.41,98.9,1023.24,98.05,1024.34,99.4Z" transform="translate(-624.02 -66.92)" fill="#ea9c92"/><circle cx="1016.96" cy="88.2" r="14.79" transform="translate(-547.14 419.08) rotate(-27.89)" fill="#ffc2b0"/><polygon points="429.37 83.87 427.72 123.44 421.93 124.04 418.17 88.42 429.37 83.87" fill="#ffc2b0"/><path d="M1034.38,147.49c1.92-8.45,5.7-27.12,5.7-27.12l1.62,18.57c-1.87,5.5-3.47,10.56-3.4,13.49.11,4.86.48,10.23.91,15.66v0S1032.47,155.93,1034.38,147.49Z" transform="translate(-624.02 -66.92)" fill="#8a2ae3"/><path d="M1044.89,113.57s4.63,1.77,7.24,16,4.58,28.44-.09,30.27-8.56,3.21-9.94-.59-2.22-22.11-2.39-28.69S1039.29,114.87,1044.89,113.57Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/><path d="M1020.68,292.37a22.49,22.49,0,0,1-3.16-.33h0l-2.17-87Z" transform="translate(-624.02 -66.92)" fill="#d8892b"/><path d="M1029.06,245.38l3.08-4,32.36-18.74a4.5,4.5,0,0,0,1.88-3.59l0-26.5,1.86-2.43-1.75-1h0a1.18,1.18,0,0,0-1.27.07l-36.68,21.24a4.5,4.5,0,0,0-1.88,3.59l0,28.86a1.66,1.66,0,0,0,.69,1.54h0Z" transform="translate(-624.02 -66.92)" fill="#983be9"/><path d="M1051.44,230.18l2.3-1.33,12.62-21.92v-14.4l1.86-2.43-1.75-1h0a1.18,1.18,0,0,0-1.27.07l-36.68,21.24a3.81,3.81,0,0,0-1.38,1.61Z" transform="translate(-624.02 -66.92)" fill="#d29fff"/><path d="M1067.39,191.18l.82-1.08-1.75-1h0a1.18,1.18,0,0,0-1.27.07l-.64.37Z" transform="translate(-624.02 -66.92)" fill="#d29fff"/><path d="M1028.18,210.63a4.72,4.72,0,0,0-1.54,3.09l3.59,2.07,1.72-3Z" transform="translate(-624.02 -66.92)" fill="#983be9"/><path d="M1030.26,211.41l36.68-21.24c1-.6,1.88,0,1.88,1.42l0,28.86a4.52,4.52,0,0,1-1.87,3.6l-36.69,21.23c-1,.6-1.88,0-1.88-1.42l0-28.86A4.5,4.5,0,0,1,1030.26,211.41Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/><path d="M1053,217.16a6.14,6.14,0,0,1-2.78,4.81c-1.54.89-2.78.17-2.78-1.6a6.15,6.15,0,0,1,2.78-4.82C1051.76,214.67,1053,215.39,1053,217.16Z" transform="translate(-624.02 -66.92)" fill="#d29fff"/><path d="M1051.69,190s1.53,9.24,1.3,12.19-1.81,7.84-3,7.74,0-11.9-2.15-10.72-2.33,3.19-3.29,2.47,1.67-10.79,1-15.16S1051.69,190,1051.69,190Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M989.52,173.59s-1.53,9.23-1.3,12.19,1.81,7.84,3,7.74,0-11.9,2.15-10.72,2.33,3.19,3.29,2.47-1.67-10.79-1-15.16S989.52,173.59,989.52,173.59Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1011.29,89.5c-7.42,2.63-8.87,1-8.94.94-.06-.45-.12-.9-.15-1.36a14.82,14.82,0,0,1,.5-4.73l19.24-2.6S1018.9,86.79,1011.29,89.5Z" transform="translate(-624.02 -66.92)" fill="#ea9c92"/><path d="M1001.67,74.34c1.75-1.49,8.06-8.9,19.36-7.15,7.06,1.09,13,5.91,14.33,16.9a25.28,25.28,0,0,1-6.83,20.09,6,6,0,0,1-.8-.41c-2.83-1.86-3.14-2.89-3.14-2.9l-.62-5.6a1.56,1.56,0,0,1,1.41-1.56,2.82,2.82,0,0,0,2.07-1.26c1.62-2.12.87-5.43-2.38-5.56a2.48,2.48,0,0,1-2.59-1.84,1.32,1.32,0,0,0-1.73-.9c-3.69,1.33-12.79,4.22-18.65,2.56C994.61,84.58,999.92,75.84,1001.67,74.34Z" transform="translate(-624.02 -66.92)" fill="#6614cf"/><path d="M1010.1,96.17l-4.53-1.24s2.16,3.4,5.32,4.26,3.64-1.8,3.64-1.8Z" transform="translate(-624.02 -66.92)" fill="#fff"/><polygon points="419.98 134.51 423.84 132.3 422.39 134.66 420.44 135.38 419.98 134.51" fill="#d29fff"/></g>
<!--   <g id="Man-sitting"><path d="M1123.84,509.84s-4.66-2.35-7.52,1.15-7,11.76-7.08,17.35,4.42,5.2,7.12,3.88,10.59-12.77,11.07-15-.56-5.28-1.32-5.87S1123.84,509.84,1123.84,509.84Z" transform="translate(-624.02 -66.92)" fill="#173d7a"/><path d="M1124.86,508.71l.22,4.83a2.75,2.75,0,0,1-1.37,2.52,5.42,5.42,0,0,1-3.59.56c-3.52-.57-3.83-1.57-4.08-6.4S1124.86,508.71,1124.86,508.71Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><path d="M1106.78,500.55s-4.66-2.35-7.53,1.15-7,11.77-7.08,17.35,4.42,5.21,7.12,3.89,10.6-12.78,11.08-15-.57-5.28-1.33-5.87S1106.78,500.55,1106.78,500.55Z" transform="translate(-624.02 -66.92)" fill="#173d7a"/><path d="M1107.8,499.43l.21,4.83a2.74,2.74,0,0,1-1.36,2.51,5.39,5.39,0,0,1-3.6.56c-3.51-.56-3.82-1.57-4.08-6.4S1107.8,499.43,1107.8,499.43Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><path d="M1149.39,410.76c-1.38-22.45-24.31,3.3-24.31,3.3l-15.7,15.38L1095.25,445a13.94,13.94,0,0,0-3.51,11.19l5.72,43.54a4.27,4.27,0,0,0,4.29,3.72,14.79,14.79,0,0,0,2.12-.19,5.31,5.31,0,0,0,4.72-5.64l-1-40.72L1137.23,439S1150.77,433.21,1149.39,410.76Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/><path d="M1166.46,419.31c-1.38-22.45-24.31,3.3-24.31,3.3L1126.45,438l-14.13,15.52a14,14,0,0,0-3.52,11.2l5.72,43.53a4.27,4.27,0,0,0,4.29,3.72,14.42,14.42,0,0,0,2.12-.18,5.33,5.33,0,0,0,4.73-5.65l-1.05-40.72,29.68-17.89S1167.84,441.76,1166.46,419.31Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/><path d="M1152.89,347.24c17.39,7.21,17,17.49,17,17.49s-3.41,37.68-2.24,62.84c.48,10.52-55.89,11.32-47.49-16.74,9.92-33.09,6.2-59.88,10.84-63.92S1148.39,345.38,1152.89,347.24Z" transform="translate(-624.02 -66.92)" fill="#983be9"/><path d="M1158.49,356.36c-.91,3.53-5.54,5.39-10.34,4.15s-7.94-5.1-7-8.63,5.53-5.39,10.33-4.15S1159.39,352.83,1158.49,356.36Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1151.12,361.73a12.89,12.89,0,0,1-3.17-.41,11.56,11.56,0,0,1-6.1-3.74,6.28,6.28,0,0,1,2.67-10.33,11.58,11.58,0,0,1,7.14-.33c5.23,1.35,8.65,5.68,7.63,9.64a6.64,6.64,0,0,1-4.2,4.43A10.62,10.62,0,0,1,1151.12,361.73Zm-2.64-13.56a8.9,8.9,0,0,0-3.34.62,4.63,4.63,0,0,0-2,7.74,10.52,10.52,0,0,0,11.33,2.92,5,5,0,0,0,3.21-3.3h0c.79-3.08-2.1-6.5-6.44-7.62A11.07,11.07,0,0,0,1148.48,348.17Z" transform="translate(-624.02 -66.92)" fill="#fff"/><path d="M1145.92,346.46a43,43,0,0,1-.15,6.21c-.1,1.73,6,3.35,7.54,1.78s.94-3.2,1.31-9.09S1145.92,346.46,1145.92,346.46Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1154.62,345.36s-1.49,5.46-8.85,7.56l.11-5Z" transform="translate(-624.02 -66.92)" fill="#ea9c92"/><path d="M1159.29,331.47a13.39,13.39,0,1,1-16.31-9.61A13.39,13.39,0,0,1,1159.29,331.47Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1149.41,335.31s-7.37,3.16-12.48,3.19-4-4.23-4-4.23l15.14-2.19Z" transform="translate(-624.02 -66.92)" fill="#ea9c92"/><path d="M1135.41,336.14s6.42-2.72,12-1.59a5.94,5.94,0,0,1,3.41,2,2,2,0,0,0,1,.74c1,.23,2.63-3.92,4.57-4s3.24,1.28,1.64,3.83-1,5.4-.32,5.8,8.5-5.53,1.65-19.11-24.25-6.26-27-3.51c0,0-2.85,2.49-5.17.28C1127.31,320.6,1124.71,340.07,1135.41,336.14Z" transform="translate(-624.02 -66.92)" fill="#ff2c9c"/><path d="M1122.54,344.16l-9.35-4a4.16,4.16,0,0,1-2.28-2.46l-9.23-26.75-4.28.74,7.46,33.29a5.61,5.61,0,0,0,2.73,3.67l15.57,8.74Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1219.81,348.51l2.14-1a17.13,17.13,0,0,0,4.93-3.41l1.49-1.47a2.89,2.89,0,0,0,.63-3.18h0a1.6,1.6,0,0,0-2.19-.81l-4.48,2.27s.7-2,.37-2.5-3.81,3.31-5.41,6S1219.81,348.51,1219.81,348.51Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1182.49,359.21l8-.89a14.24,14.24,0,0,0,5.38-1.74l21.42-12.13,2.52,4.06-21.91,16.91a9.69,9.69,0,0,1-2.2,1.29l-13.06,5.59Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1097.4,311.66l-.82-.94a7.51,7.51,0,0,1-1.76-3.83l-.57-3.91a3.35,3.35,0,0,1,1.29-3.17l.11-.08a2,2,0,0,1,3,1l1.92,4.65s-.61-2.4.17-2.67c.57-.2,1.65,2.79,1,4.45a7,7,0,0,0,0,3.8Z" transform="translate(-624.02 -66.92)" fill="#ffc2b0"/><path d="M1141,344l-3.45-.95a8.34,8.34,0,0,0,4,3.26c2.41.66,2.79-1.38,2.79-1.38Z" transform="translate(-624.02 -66.92)" fill="#fff"/><path d="M1135.84,345s-15.62-3.09-20.39-4.54-6.76,11.65-6.4,15,16.61,7,18.54,12.72S1135.84,345,1135.84,345Z" transform="translate(-624.02 -66.92)" fill="#983be9"/><path d="M1159.72,350.74s11.41,4.9,30.51,7.28a2,2,0,0,1,1.7,1.35,22.46,22.46,0,0,1,1,11.48,4.2,4.2,0,0,1-4.17,3.32c-6,0-18.85.54-20.94,6.13C1165.09,387.62,1159.72,350.74,1159.72,350.74Z" transform="translate(-624.02 -66.92)" fill="#983be9"/></g> -->
  <g id="man-standing"><path d="M906.57,598.28c18.77,10.84,49.22,10.84,68,0s18.78-28.42,0-39.26-49.22-10.85-68,0S887.79,587.44,906.57,598.28Z" transform="translate(-624.02 -66.92)" fill="#d4ecff"/></g>
  <g id="trophy"><g id="trophy-bottom"><path d="M966.66,567.56l-6.31,0c-.46-.31-.94-.62-1.45-.91-10.34-6-27.1-6-37.44,0-.64.37-1.25.76-1.82,1.16l-5.93,0v9.61h0c0,3.91,2.59,7.82,7.76,10.8,10.33,6,27.1,6,37.43,0,5.17-3,7.76-6.89,7.76-10.8h0Z" transform="translate(-624.02 -66.92)" fill="#721bd5"/><path d="M939.3,562.22c-6.48.13-12.89,1.61-17.84,4.47-.64.37-1.25.76-1.82,1.16l-5.93,0v9.61c0,3.91,2.59,7.82,7.76,10.8,4.94,2.86,11.35,4.34,17.83,4.47Z" transform="translate(-624.02 -66.92)" fill="#983be9"/><path d="M917.35,567.87l-3.64,0v9.61a10.87,10.87,0,0,0,3.64,7.73Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/>
  <ellipse cx="316.16" cy="500.64" rx="26.47" ry="15.28" fill="#8a2ae3"/>
  <path d="M958.9,578.37c-10.33,6-27.1,6-37.43,0-4.91-2.84-7.49-6.51-7.73-10.22-.28,4.11,2.3,8.26,7.73,11.4,10.33,6,27.1,6,37.43,0,5.43-3.13,8-7.29,7.73-11.4C966.39,571.87,963.81,575.54,958.9,578.37Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/><path d="M959.39,563.37l-4.57,0c-.34-.22-.68-.44-1.05-.66-7.51-4.33-19.67-4.33-27.17,0-.47.27-.91.56-1.32.85l-4.3,0v3.31h0c0,2.84,1.87,5.68,5.62,7.84,7.5,4.33,19.67,4.33,27.17,0,3.75-2.16,5.62-5,5.62-7.84h0Z" transform="translate(-624.02 -66.92)" fill="#721bd5"/><path d="M939.54,559.49a27.46,27.46,0,0,0-12.94,3.24c-.47.27-.91.56-1.32.85l-4.3,0v3.31c0,2.84,1.87,5.68,5.62,7.84A27.46,27.46,0,0,0,939.54,578Z" transform="translate(-624.02 -66.92)" fill="#983be9"/><path d="M923.62,563.59H921v3.31a7.92,7.92,0,0,0,2.64,5.62Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/><path d="M953.77,571.21c-7.5,4.33-19.67,4.33-27.17,0s-7.5-11.35,0-15.68,19.66-4.34,27.17,0S961.27,566.88,953.77,571.21Z" transform="translate(-624.02 -66.92)" fill="#8a2ae3"/></g>
  <g id="trophy-2" data-name="trophy"><path d="M905.09,529.93a18.45,18.45,0,0,1-15.73-8.86l-10.07-16.69a6.36,6.36,0,0,1,5.45-9.65h19.89v5.18H884.74a1.14,1.14,0,0,0-1,.6,1.16,1.16,0,0,0,0,1.19l10.07,16.69a13.17,13.17,0,0,0,11.48,6.36l17.31-.26.08,5.18-17.31.26Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/><path d="M975.28,529.93H975l-17.31-.26.08-5.18,17.31.26a13.16,13.16,0,0,0,11.48-6.36l10.07-16.69a1.16,1.16,0,0,0,0-1.19,1.14,1.14,0,0,0-1-.6H975.74v-5.18h19.89a6.35,6.35,0,0,1,5.44,9.65L991,521.06A18.45,18.45,0,0,1,975.28,529.93Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/><path d="M991.38,510.42l-4.81,8a13.16,13.16,0,0,1-11.48,6.36l-17.31-.26-.08,5.18,17.31.26h.27a18.44,18.44,0,0,0,14.66-7.31C992.22,516.77,991.86,512.54,991.38,510.42Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><path d="M929.9,554.32c5.68,3.28,14.89,3.28,20.57,0s5.68-8.6,0-11.88-14.89-3.28-20.57,0S924.22,551,929.9,554.32Z" transform="translate(-624.02 -66.92)" fill="#fff"/><path d="M923.2,556.78c3.06-2.28,2.47-4.5,2.47-4.5l2.32,2.8c7-3.41,17.35-3.41,24.39,0l2.32-2.8s-.59,2.22,2.48,4.5,2.06,6.74,2.06,6.74h0c0,2.82-1.85,5.64-5.57,7.79-7.44,4.29-19.51,4.29-26.95,0-3.72-2.15-5.58-5-5.58-7.78C921.13,563.52,920.13,559.05,923.2,556.78Z" transform="translate(-624.02 -66.92)" fill="#f9bf30"/><path d="M950.83,557.45s-5.51-3.26-5.51-4a1.24,1.24,0,0,1,.3-.51,25.78,25.78,0,0,1,6.76,2.09l2.32-2.8s-.59,2.22,2.48,4.5,2.06,6.74,2.06,6.74h0a7.31,7.31,0,0,1-1.67,4.5c.05-.35.63-5-2.83-6.46S950.83,557.45,950.83,557.45Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><path d="M929.9,557.66c5.68,3.28,14.89,3.28,20.57,0s5.68-8.6,0-11.88-14.89-3.28-20.57,0S924.22,554.38,929.9,557.66Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><path d="M978.24,495c-.39,21.21-11.32,23.77-17.17,31.71-5.46,7.41-4.84,18.13-4.73,19.52,0,.05,0,.11,0,.16h0c0,2.39-1.58,4.78-4.73,6.6-6.32,3.64-16.56,3.65-22.87,0-3-1.71-4.51-3.92-4.7-6.15h0v-.45h0s0-.1,0-.15c.1-1.39.73-12.11-4.73-19.53-5.85-7.94-16.79-10.5-17.17-31.71Z" transform="translate(-624.02 -66.92)" fill="#f9bf30"/><path d="M950.44,518.13s-.89,2.53-3.65,9.78-1.47,25.59-1.47,25.59l4.7.33c.55-.25,1.09-.51,1.6-.8,3.15-1.82,4.73-4.21,4.73-6.6h0s0-.11,0-.16c-.11-1.39-.73-12.11,4.73-19.52,5.85-7.94,16.78-10.5,17.17-31.71h-4.17Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><ellipse cx="316.16" cy="428.12" rx="38.05" ry="21.97" fill="#fdd762"/><path d="M913.28,510.57c14.86,8.58,39,8.58,53.81,0,7-4,10.71-9.27,11.11-14.57.45,5.94-3.25,12-11.11,16.5-14.86,8.58-39,8.58-53.81,0-7.86-4.53-11.56-10.56-11.11-16.5C902.57,501.3,906.27,506.53,913.28,510.57Z" transform="translate(-624.02 -66.92)" fill="#fff"/><ellipse cx="316.16" cy="428.12" rx="31.94" ry="18.44" fill="#f2b42a"/><path d="M917.6,508.07a44.1,44.1,0,0,0,18.63,5.25,4.41,4.41,0,0,0,1-4.32c-3.31-9.94-2-30.53-2-30.53l-6-.72A39.62,39.62,0,0,0,917.6,482C905.13,489.2,905.13,500.87,917.6,508.07Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><path d="M962.77,483.64c-12.47-7.21-32.7-7.21-45.17,0-5.87,3.39-9,7.77-9.32,12.22-.38-5,2.72-10.05,9.32-13.86,12.47-7.2,32.7-7.2,45.17,0,6.59,3.81,9.7,8.87,9.32,13.85C971.75,491.41,968.64,487,962.77,483.64Z" transform="translate(-624.02 -66.92)" fill="#fff"/><path d="M955.82,511.11a52.92,52.92,0,0,1-31.27,0c.33-.22.67-.44,1-.65,8.06-4.65,21.13-4.65,29.19,0C955.15,510.67,955.49,510.89,955.82,511.11Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><path d="M924,546.28c0-.17,0-.48.05-.89.24,2.18,1.78,4.32,4.67,6,6.31,3.65,16.55,3.65,22.87,0,2.82-1.63,4.38-3.72,4.68-5.85,0,.34,0,.6,0,.74s0,.11,0,.16h0c0,2.39-1.58,4.78-4.73,6.6-6.32,3.64-16.56,3.64-22.87,0-3-1.71-4.51-3.92-4.7-6.15h0v-.45h0S924,546.33,924,546.28Z" transform="translate(-624.02 -66.92)" fill="#fff"/></g></g><g id="small-box"><polygon points="589.98 452.6 566.36 438.97 542.75 452.6 566.36 466.24 589.98 452.6" fill="#721bd5"/><polygon points="566.36 453.59 566.36 438.23 594.58 421.94 594.58 437.3 566.36 453.59" fill="#e8a200"/><polygon points="566.36 438.23 538.15 421.94 538.15 437.3 566.36 453.59 566.36 438.23" fill="#f9bf30"/><polygon points="594.58 421.94 566.36 405.65 538.15 421.94 566.36 438.23 594.58 421.94" fill="#fdd762"/></g><g id="bar-chart"><g id="bar-chart-violet"><polygon points="95.39 556.95 63.59 538.6 31.8 556.95 63.59 575.31 95.39 556.95" fill="#d4ecff"/><polygon points="63.59 538.6 31.8 520.24 0 538.6 31.8 556.95 63.59 538.6" fill="#d4ecff"/><polygon points="68.38 523 68.38 468.03 95.39 452.43 95.39 507.41 68.38 523" fill="#721bd5"/><polygon points="68.38 468.03 41.37 452.43 41.37 507.41 68.38 523 68.38 468.03" fill="#b45ef4"/><polygon points="95.39 452.43 68.38 436.84 41.37 452.43 68.38 468.03 95.39 452.43" fill="#8a2ae3"/></g><g id="bar-chart-pink"><polygon points="41.37 538.6 41.37 455.44 68.38 439.84 68.38 523 41.37 538.6" fill="#c13d1a"/><polygon points="41.37 455.44 14.36 439.84 14.36 523 41.37 538.6 41.37 455.44" fill="#db5126"/><polygon points="68.38 439.84 41.37 424.25 14.36 439.84 41.37 455.44 68.38 439.84" fill="#ef602e"/><polygon points="41.37 538.6 41.37 455.44 68.38 439.84 68.38 523 41.37 538.6" fill="#d3008d"/><polygon points="41.37 455.44 14.36 439.84 14.36 523 41.37 538.6 41.37 455.44" fill="#d3008d"/><polygon points="68.38 439.84 41.37 424.25 14.36 439.84 41.37 455.44 68.38 439.84" fill="#ff2c9c"/></g><g id="bar-chart-yellow"><polygon points="68.38 554.19 68.38 507.41 95.39 491.82 95.39 538.6 68.38 554.19" fill="#e8a200"/><polygon points="68.38 507.41 41.37 491.82 41.37 538.6 68.38 554.19 68.38 507.41" fill="#f9bf30"/><polygon points="95.39 491.82 68.38 476.23 41.37 491.82 68.38 507.41 95.39 491.82" fill="#fdd762"/></g></g><g id="Pie-chart-small"><path id="Pie-chart-small-shadow" d="M884,677.09c-19-11-49.77-11-68.75,0s-19,28.73,0,39.69,49.76,11,68.75,0S903,688.05,884,677.09Zm-18.58,29c-8.72,5-22.87,5-31.6,0s-8.73-13.21,0-18.25,22.88-5,31.6,0S874.18,701,865.45,706.06Z" transform="translate(-624.02 -66.92)" fill="#d4ecff"/><g id="Pie-chart-small-1"><path d="M808.1,662l17.35.27a18.4,18.4,0,0,1,5.47-4.61c9.54-5.5,24.53-5.93,34.92-1.28l10.31-9.69L892,647c-.78-.52-1.58-1-2.43-1.51-22.05-12.73-57.8-12.73-79.85,0a41.93,41.93,0,0,0-9.93,7.73Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><polygon points="267.99 554.86 267.99 580.04 252.13 579.8 252.13 554.62 267.99 554.86" fill="#f9bf30"/><polygon points="241.82 564.31 241.82 589.49 252.13 579.8 252.13 554.62 241.82 564.31" fill="#e8a200"/><path d="M825.45,637.12V662.3l22.81-18.59,17.58,12.7V631.23l-16.19-7.86s-22.29,6.83-23.45,7.12S825.45,637.12,825.45,637.12Z" transform="translate(-624.02 -66.92)" fill="#e8a200"/><polygon points="184.08 569.93 184.08 595.11 201.43 595.38 201.43 570.2 184.08 569.93" fill="#e8a200"/><polygon points="175.78 561.08 175.78 586.26 184.08 595.11 184.08 569.93 175.78 561.08" fill="#f9bf30"/><path d="M808.1,636.85l17.35.27a18.4,18.4,0,0,1,5.47-4.61c9.54-5.5,24.53-5.93,34.92-1.28l10.31-9.69,15.86.24c-.78-.51-1.58-1-2.43-1.51-22.05-12.73-57.8-12.73-79.85,0A42.19,42.19,0,0,0,799.8,628Z" transform="translate(-624.02 -66.92)" fill="#fdd762"/><path d="M871.07,634.32v23.15l15-3.59s-.88-13.55-1.2-13.91S871.07,634.32,871.07,634.32Z" transform="translate(-624.02 -66.92)" fill="#d3008d"/><path d="M859.71,657.47v25.19l1.62,1.72,10.58-6.1s-1.64-19.22-1.83-19.61S859.71,657.47,859.71,657.47Z" transform="translate(-624.02 -66.92)" fill="#d3008d"/><path d="M880.14,651l-9.07,8.54c7.56,6,6.66,14.41-2.69,19.81a32.36,32.36,0,0,1-8.67,3.34l9.38,10-8.31,7.82c10.55-1.22,20.62-4.19,28.8-8.91,18.95-10.95,21.6-27.73,8-40.32Z" transform="translate(-624.02 -66.92)" fill="#d3008d"/><polygon points="236.75 608.36 236.75 633.54 257.33 625.6 282.08 601.99 281.99 575.25 255.81 596 236.75 608.36" fill="#d3008d"/><path d="M880.14,625.79l-9.07,8.53c7.56,6,6.66,14.42-2.69,19.82a32,32,0,0,1-8.67,3.33l9.38,10-8.31,7.81c10.55-1.21,20.62-4.18,28.8-8.9,18.95-11,21.6-27.73,8-40.32Z" transform="translate(-624.02 -66.92)" fill="#ff2c9c"/><path d="M860.71,692.52l-8.27-8.81c-7.67.47-15.63-1-21.52-4.39-6.07-3.51-8.57-8.3-7.51-12.86l-19.69-.31-7.57-8.06c-6.62,11.36-2.1,24.41,13.58,33.47,11.52,6.65,26.78,9.82,41.88,9.52Z" transform="translate(-624.02 -66.92)" fill="#b45ef4"/><polygon points="227.59 608.98 227.59 634.16 169.18 601.79 169.18 576.6 177.71 580.04 227.59 608.98" fill="#b45ef4"/><polygon points="236.69 600.42 236.69 625.6 227.59 634.16 227.59 608.98 236.69 600.42" fill="#983be9"/><path d="M860.71,667.34l-8.27-8.81c-7.67.47-15.63-1-21.52-4.39-6.07-3.51-8.57-8.3-7.51-12.86L803.72,641l-7.57-8.07c-6.62,11.37-2.1,24.42,13.58,33.47,11.52,6.66,26.78,9.83,41.88,9.53Z" transform="translate(-624.02 -66.92)" fill="#8a2ae3"/></g></g></svg>


<!-- <button class="play"> Play Now </button> -->
              
            
!

CSS

              
                #Layer_1{
  display: block;
  margin: 0 auto;
}
#leaf {
  position: relative;
  width: 60px;
  height: 5px;
  text-align: center;
  line-height: 100px;
}
              
            
!

JS

              
                // var t1 = new TimelineMax()
var repeat = $('#Layer_1');
var t1 = new TimelineMax({ repeat: -1 , repeatDelay:0.6});

// $('.play').click(function(){
  t1.from('#pink1', 0.5, {scaleY: 0, scaleX: 0,transformOrigin: "bottom", ease:  Power2.easeOut})
  .from('#yellow1', 0.5, {scaleY: 0, scaleX: 0, transformOrigin: "bottom", ease:  Power2.easeOut})
  .from('#purple1', 0.5, {scaleY: 0, scaleX: 0, transformOrigin: "bottom", ease:  Power2.easeOut})
  .staggerFrom( ['#small-box', '#Pie-chart-small', '#bar-chart'], 0.6, {opacity: 0,scale: 0.10,transformOrigin:"center center", ease:Elastic.easeOut.config(1, 0.5)}, 0.15)
  .from('#trophy', 0.5, {scaleY: 0, scaleX: 0, transformOrigin: "bottom", ease: SlowMo.ease.config(0.7, 0.5, false)})
  
  .from('#Women-standing-topper', 5, {delay:0.20, opacity:0, left:"300px"});
  TweenMax.fromTo('#man-standing', 1.4, {scale: 1}, {scale: 1.5, repeat: -1, repeatDelay:0.2, yoyo: true, transformOrigin: 'center center'})
// .staggerFrom('#color-paper', 0.6, {opacity: 0,scale: 0.10,transformOrigin:"center center", ease:Elastic.easeOut.config(1, 0.5)}, 0.15)
  
 

// .to(color-paper, 2, {y:-180})
// var leaf = document.getElementById('color-paper');
// var tl = new TimelineMax({opacity:0, delay:3 });
// tl.set(leaf, { rotation: 0 });


// swingLeaf();
// swingLeaf();

// function swingLeaf() {
//   tl.add([
//     TweenMax.to(leaf, 1.5, {
//       left: 300,
//       rotation: -5,
//       ease: Power1.easeInOut
//     }),
//     TweenMax.to(leaf, 1.5, {
//       top: "+=50",
//       ease: Power1.easeOut
//     })
//   ]).add([
//     TweenMax.to(leaf, 1.5, {
//       left: 0,
//       rotation: 5,
//       ease: Power1.easeInOut
//     }),
//     TweenMax.to(leaf, 1.5, {
//       top: "+=50",
//       ease: Power1.easeOut
//     })
//   ]);
// }
  
  // })
              
            
!
999px

Console