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

              
                <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224.67 243.91">
  <path id="base" d="M43.37,228.5v-18c0-1.14,1.19-2.24,2.1-2.92,3.44-2.56,9.91-4.57,15.28-5.21.43,0,.82-.26,1.25-.34,5.08-.9,25.32-2.15,49.93-2.15,25.76,0,47,1.3,49.58,3,5.37,1.07,11.61,2.68,15.18,4.75a4.06,4.06,0,0,1,2,3.51V228.5a3.7,3.7,0,0,1-3.69,3.7H47.08A3.72,3.72,0,0,1,43.37,228.5Z" fill="#b2a9a6"/>
  <path id="bowl" d="M218.65,115c0,59.76-48.25,108.21-107.77,108.21C52,223.17,4.08,175.69,3.14,116.76c0-.49,0-1,0-1.49v-.44A110.64,110.64,0,0,1,4.34,98.54c.22-1.43.47-2.85.75-4.27a108.21,108.21,0,0,1,48.63-71l.05,0A106.62,106.62,0,0,1,103.5,7c2.44-.18,4.9-.26,7.38-.26C170.4,6.75,218.65,55.19,218.65,115Z" fill="#eeefed"/>
  <ellipse id="opening" cx="166.76" cy="32.93" rx="9.65" ry="48.98" transform="translate(45.02 151.55) rotate(-55.43)" fill="#cdcfca"/>
  <path id="base-2" data-name="base" d="M178.76,211.05v18a3.63,3.63,0,0,1-1.39,2.93c-3.44,2.56-10.62,4.57-16,5.21-.44.05-.83.26-1.26.33-5.07.9-25.33,2.15-50,2.15-25.78,0-47-1.3-49.62-3-5.37-1.06-11.61-2.68-15.18-4.74a4.08,4.08,0,0,1-2-3.52V211.05a3.72,3.72,0,0,1,3.7-3.7h128A3.72,3.72,0,0,1,178.76,211.05Z" fill="#c5bdba"/>
  <g id="curly-plant">
    <path d="M137.67,74.29s-1.9.87-4.39,7.27a184.17,184.17,0,0,0-9.54,29.57c-3.66,15.46-14.61,42.65-14.61,42.65l.88,1.66,11.52-26a203.38,203.38,0,0,0,6.13-21.09c1.94-9.24,4.41-16.84,5.4-18.61S138,79.34,137.67,74.29Z" fill="#3b411d"/>
    <path d="M107.4,155s3.4-15.14-7.14-43.65S82.47,75.52,78.2,73.76s-6.66,1-10.2,7.41-14.79,27.39-7.69,27.77,15.3,4.33,16.93,6.28,4.25,5,1.12,11.36-2.66,8.29-2.14,10.67c0,0-3.39-.69,1.29-14.18,0,0,2-4.56-9.06-8.22s-12.67-1.32-14.24-10.76S67.77,70.67,69.67,69.45,76.19,65.17,83.78,71s12,14.22,13.79,18.19,25.77,66.21,25.77,66.21Z" fill="#4a5537"/>
    <path d="M120.75,140.52s-1.83-27.13-6.91-43.84S103.44,71,96,65.33s-12.41-9-22.21-5.24-12,18.18-12,18.18-1.08,13.11,3.58,20.1S74.72,112.86,81.51,113s18.72-3.57,30.13-20.29c0,0-9.27,5.75-12.76,9.13s-11.46,8.27-15.71,7.87-10.91-3.92-13.29-9.39-6.25-14.52-5.17-21S70,66.15,75.62,64.37s13.85,2.87,14.7,4S105,78.8,109,105.54a239.47,239.47,0,0,1,2,50.05Z" fill="#443e32"/>
    <path d="M197.72,10s-9.72.22-12.13,8.62-1.59,23.5-4,28.63-3.78,16.28-10,24.72a363.17,363.17,0,0,1-28.84,34.39c-12.43,13-24.36,36.76-24.36,36.76l7.71,4S150.41,105.69,164,90.67a89.68,89.68,0,0,0,18.39-30.93,95.42,95.42,0,0,0,4.6-23c.91-12.77-2.09-14.07.66-18.47S197.72,10,197.72,10Z" fill="#4a5537"/>
    <path d="M117.73,34.54s9.17,7.09,9.36,17.56-12.07,9.18-15,6.17-6.45-6.37-6.74-14.43,6.16-15.1,10.09-17.07S125.29,23,130,24s11.94,3.32,16.9,8.54,10.43,11.53,13,21.67,3.46,19,1.82,29.92-6,10.88-18.55,26.8C122.63,137,125.62,142.06,123.43,148s-6.7,1-6.7,1,1.59-14.61,19.42-39.84c5.68-8,16.49-14.9,19.76-25.78S155.13,60.3,152.35,51s-10-19.4-22.27-22.33S109.66,35.7,108.77,41.1s.41,11.49,5.33,14.36,9.08,2.53,10.31-3.89S117.73,34.54,117.73,34.54Z" fill="#65793c"/>
  </g>
  <g id="tree2">
    <path d="M178.48,115s2.51,1,7.27,10.3,9.14,20.8,9.14,20.8l2.29-.8s-6.69-16.43-9.48-21.21-6.49-8.17-6.55-10.21S178.48,115,178.48,115Z" fill="#76411f"/>
    <path d="M181.62,114.08s5.93-3.28,5.21-4.87-1.78-2.18-2.49-.73S182.12,113.92,181.62,114.08Z" fill="#7f310d"/>
    <path d="M182,113.8s-5.37,3.1-9.9.19C172.14,114,178.25,110.22,182,113.8Z" fill="#7f310d"/>
    <path d="M181.88,113.23s.11-8.07,3.39-11.09,2.34,3,2.34,3S187.31,108.37,181.88,113.23Z" fill="#dd611c"/>
    <path d="M180.52,113.61s-5.45-4.75-8.63-5.39-3,1-2.8,1.63.37,2,4.5,3.47A10.2,10.2,0,0,0,180.52,113.61Z" fill="#cc5d32"/>
    <path d="M180.06,114.16s-3.22-7.6-4.76-9-2.35-1.69-3.61-1.14-1.47,1.87-.57,3.33S180.06,114.16,180.06,114.16Z" fill="#efc468"/>
    <path d="M180.82,113.79s4.41-8.72,3.55-11.86-3-2.1-3.53-1.76-2.74,3-.08,13.4" fill="#d9a46e"/>
    <path d="M180.21,114.12s-4.08-5.3-4-10.47,3.74-2.5,4-2.11,3.27,4.92.06,12.73Z" fill="#d3bd50"/>
    <path d="M178.27,115.16s-6.77-3.12-1.45-5.79,6.49.8,6.2,1.34-.29,2.6-1.61,3.43A8.28,8.28,0,0,1,178.27,115.16Z" fill="#97681a"/>
  </g>
  <g id="tree1">
    <path d="M193.23,97.35s-.7,3.31,2,12.71,6.69,22.61,7,30.68l-3.77.37s.06-10.56-5.24-30.56c0,0-2.72-11.26-3.45-12s-2.71-.61-2.71-.61Z" fill="#76411f"/>
    <path d="M192.15,98s-16.74,2.24-20.72-6.64c0,0,2.24-3,9.15,2.43S192.15,98,192.15,98Z" fill="#ba602c"/>
    <path d="M192.4,98.47s10.17-8.38,11.49-17.16-4.86,1.32-5.36,3.41A57.46,57.46,0,0,1,192.4,98.47Z" fill="#733111"/>
    <path d="M192.52,97.16s4.08-9.46,2.17-15-6.59,2.16-6.83,4.33S188.41,94.1,192.52,97.16Z" fill="#c49047"/>
    <path d="M187.83,91.43s-3.48-9-9-11-2.51,5.41-2.51,5.41S180.7,91.9,187.83,91.43Z" fill="#edc870"/>
    <path d="M189.36,94.42a71.59,71.59,0,0,1-4.69-17.88s.35-4.5,4-4.11S192,88.6,189.36,94.42Z" fill="#f3b763"/>
    <path d="M192,98.46S182,96,174.52,85.13c0,0-1-1.58-.22-2.29s8.19,3.34,9.49,5S192,98.46,192,98.46Z" fill="#bf5130"/>
    <path d="M192.81,98.43s3.88-7.07-1.48-8-6.84.74-7.16,2.67S184.09,98.54,192.81,98.43Z" fill="#a93516"/>
  </g>
  <g>
    <path d="M217.31,132.56c-.27,1.66-.58,3.3-.93,4.93s-.67,3-1,4.52-.84,3.13-1.32,4.67a107.87,107.87,0,0,1-17.87,34.53c-8.8,1.58-60.21,9.74-95.89-8.85a70.48,70.48,0,0,1-10.33-6.52l0,0a84.74,84.74,0,0,0-7.32-5q-1.95-1.22-3.93-2.29s30.69-21,82-16.63C192.36,144.59,209.13,138,217.31,132.56Z" fill="#7a5a40"/>
    <path d="M216.38,137.49c-.31,1.52-.67,3-1,4.52s-.84,3.13-1.32,4.67a107.87,107.87,0,0,1-17.87,34.53c-.59.76-1.19,1.52-1.8,2.27s-1.37,1.65-2.07,2.46c-.29.34-.58.67-.89,1a6.14,6.14,0,0,1-.42.47c-13.86,2.18-57,7.24-89.25-7.68,0,0,0,0-.06,0a73.09,73.09,0,0,1-13.72-8.19,89.33,89.33,0,0,0-11.29-7.32,59.08,59.08,0,0,1,5.93-3.38c11.23-5.75,38-16.5,76.07-13.25C191.81,150.38,208.63,143,216.38,137.49Z" fill="#a8a19b"/>
    <path d="M215.33,142c-.4,1.57-.84,3.13-1.32,4.67a107.87,107.87,0,0,1-17.87,34.53c-.59.76-1.19,1.52-1.8,2.27s-1.37,1.65-2.07,2.46c-.29.34-.58.67-.89,1-13.64,1.84-61.55,6.43-91.13-14.58q-1.48-1.05-2.91-2.19a79.59,79.59,0,0,0-6.6-4.76c-1.17-.76-2.34-1.48-3.53-2.17,0,0,28.47-18.47,75.19-13.33C192.63,153.23,208.15,146.89,215.33,142Z" fill="#7c7772"/>
    <path d="M214,146.68a107.87,107.87,0,0,1-17.87,34.53c-.59.76-1.19,1.52-1.8,2.27s-1.37,1.65-2.07,2.46c-.29.34-.58.67-.89,1a6.14,6.14,0,0,1-.42.47l-.28.32c-.62.69-1.25,1.36-1.88,2s-1.11,1.15-1.68,1.72l-1,1c-16.21,1.86-56.81,4.34-84.39-12.75,0,0,0,0-.06,0a61.87,61.87,0,0,1-6.26-4.41,80.83,80.83,0,0,0-10.13-6.93,51.67,51.67,0,0,1,4.63-2.54l.85-.41c10.38-5,35-14.2,69.71-10.38C191.61,158.45,207.13,151.62,214,146.68Z" fill="#7a5a40"/>
  </g>
  <g id="bee">
    <path d="M48.66,125.75a.23.23,0,0,0,0-.3,2.73,2.73,0,0,1-.41-2.87,0,0,0,0,0,0-.06,0,0,0,0,0-.05,0,2.73,2.73,0,0,0,.13,3.23.25.25,0,0,0,.34,0l0,0Z" fill="#2b313f"/>
    <circle cx="48.06" cy="122.89" r="0.53" fill="#2b313f"/>
    <path d="M45.07,136.94a6.22,6.22,0,0,0,2.07,3,10.65,10.65,0,0,0,.4-3.29Z" fill="#dbeefc"/>
    <path d="M49.72,128.58s1.73,6.63-2.59,8.72a2.7,2.7,0,0,1-3.24-.65,2.31,2.31,0,0,1-.45-2.11c.59-2.46,4.13-6.83,4.13-6.83Z" fill="#ffb345"/>
    <path d="M47.54,136.61l-2.47.33a6.83,6.83,0,0,0,.59,1.29h.26a3.39,3.39,0,0,0,1.5-.34l.11-.06a5.62,5.62,0,0,0,0-1.23Z" fill="#a7cad8"/>
    <path d="M46.65,128.9a3.23,3.23,0,0,0,1.38.89,6,6,0,0,0,1.88.27H50a12.39,12.39,0,0,0-.26-1.48l-2.15-.87s-.38.47-.92,1.19Z" fill="#e87a28"/>
    <path d="M46.55,126.66a2.27,2.27,0,0,0,.08.86,2.41,2.41,0,0,0,1.61,1.63,6.37,6.37,0,0,0,3.25.09s.7-4.47-2.72-4.48A2.19,2.19,0,0,0,46.55,126.66Z" fill="#ffb345"/>
    <path d="M50.05,131.09A6,6,0,0,1,46,129.83c-.41.6-.86,1.26-1.26,1.94a6.19,6.19,0,0,0,5.11,1.94,10,10,0,0,0,.22-2.62Z" fill="#2b313f"/>
    <path d="M43.74,133.65a7.16,7.16,0,0,0-.3.89,2.31,2.31,0,0,0,.45,2.11,2.7,2.7,0,0,0,3.24.65A4.71,4.71,0,0,0,48.78,136a5.82,5.82,0,0,1-5-2.33Z" fill="#2b313f"/>
    <path d="M41.06,131.65a5,5,0,0,0-.38,1.19,2.32,2.32,0,0,0,3.91,2.07,3.5,3.5,0,0,0,.85-3.39Z" fill="#dbeefc"/>
    <path d="M42.71,133.53a9.65,9.65,0,0,0,2.79-.47,5,5,0,0,0-.06-1.54l-4.38.14a4.79,4.79,0,0,0-.38,1.18l0,.27a4.73,4.73,0,0,0,2.06.42Z" fill="#a7cad8"/>
    <path d="M46.74,130.74a.88.88,0,0,1-.5,1.11c-1.84.74-6.5,2.15-6.85-2.45,0,0-.44-3,2.59-3C44.83,126.38,46.22,129.3,46.74,130.74Z" fill="#dbeefc"/>
    <path d="M47.93,126.14a.26.26,0,0,0-.09-.33,3,3,0,0,1-1.09-3,.06.06,0,0,0,0-.06s-.05,0-.05,0a3,3,0,0,0,.88,3.48.27.27,0,0,0,.37,0l0,0Z" fill="#2b313f"/>
    <circle cx="46.59" cy="123.15" r="0.56" fill="#2b313f"/>
    <path d="M48.91,127h-.09l-.08,0-.08,0-.06,0-.06-.07s0,0,0-.08a.24.24,0,0,1,0-.08.28.28,0,0,1,0-.09.4.4,0,0,1,.13-.31l.06-.06.08,0,.08,0a.28.28,0,0,1,.18,0l.08,0,.08,0,.07.06a.18.18,0,0,1,.05.07.16.16,0,0,1,0,.07l0,.09s0,0,0,.08,0,.06,0,.09l0,.08a.3.3,0,0,1,0,.08l-.05.07-.07,0-.08,0L49,127Z" fill="#2b313f"/>
  </g>
  <g id="green-plant">
    <path d="M89.65,133.46a2.18,2.18,0,0,0-2-2.15c-14.93-1.43-23.56,6.16-28.18,12.77A41.91,41.91,0,0,0,53.1,158.7a2.17,2.17,0,0,0,.47,1.8,2.12,2.12,0,0,0,1,.67,2.24,2.24,0,0,0,.73.12c11.52,0,20.43-3.15,26.49-9.28A28.18,28.18,0,0,0,89.65,133.46Z" fill="#a6ca3c"/>
    <path d="M57.46,131.25A28.16,28.16,0,0,0,43.82,116.4a2.19,2.19,0,0,0-2.78.91c-7.45,13-4.1,24,0,30.95A42,42,0,0,0,51.75,160.1a1.9,1.9,0,0,0,.53.27,2.14,2.14,0,0,0,1.3,0A2.2,2.2,0,0,0,55,159.21C59.72,148.7,60.54,139.3,57.46,131.25Z" fill="#90bd0b"/>
    <path d="M90.77,157.32a2.19,2.19,0,0,0-.41-2,18.25,18.25,0,0,0-13.85-5.91c-8.65.21-17.55,6.33-26.46,18.18a2.17,2.17,0,0,0,1,3.36l.07,0c.71.22,17.41,5.41,29.38-.88A20.54,20.54,0,0,0,90.77,157.32Z" fill="#d3e49e"/>
    <path d="M53,169.81c1.7-13.14-.36-23.06-6.12-29.46a21.91,21.91,0,0,0-15.7-7.11,2.18,2.18,0,0,0-2.1,1.86c-2.16,14.33,3.68,23.5,9,28.68a35.86,35.86,0,0,0,12,7.8h0a2.15,2.15,0,0,0,1.86-.21A2.18,2.18,0,0,0,53,169.81Z" fill="#bcd76d"/>
    <path d="M67.93,143.73a39,39,0,0,0-3.22-15.31,2.22,2.22,0,0,0-1.39-1.17,2.18,2.18,0,0,0-1.79.29c-9.52,6.34-15.14,13.83-16.69,22.27a29,29,0,0,0,4.35,20.62,2.07,2.07,0,0,0,1,.79,2.16,2.16,0,0,0,1.88-.2C65.23,162.87,68,151.68,67.93,143.73Z" fill="#8fa346"/>
  </g>
  <g>
    <path d="M194.34,183.48q-1,1.25-2.07,2.46c-.52.6-1.05,1.2-1.59,1.79s-1.25,1.36-1.88,2-1.11,1.15-1.68,1.72A107.58,107.58,0,0,1,9.28,150.8c-.19-.55-.38-1.1-.56-1.65-.24-.71-.47-1.43-.69-2.15s-.36-1.18-.53-1.77c-.26-.89-.5-1.78-.73-2.67,17.32-1.09,46.64-.16,72.8,14.08a97.73,97.73,0,0,1,12.41,8C122.1,187.63,169.73,186.16,194.34,183.48Z" fill="#916d4c"/>
    <path d="M192.27,185.94c-.52.6-1.05,1.2-1.59,1.79s-1.25,1.36-1.88,2-1.11,1.15-1.68,1.72A107.58,107.58,0,0,1,9.28,150.8c-.19-.55-.38-1.1-.56-1.65-.24-.71-.47-1.43-.69-2.15s-.36-1.18-.53-1.77c16.34-1.38,45.91-1.14,72,13.54a94.23,94.23,0,0,1,11.84,7.91C121.11,190.09,169.48,188.36,192.27,185.94Z" fill="#d8d5d2"/>
    <path d="M190.68,187.73c-.62.69-1.25,1.36-1.88,2s-1.11,1.15-1.68,1.72A107.58,107.58,0,0,1,9.28,150.8c-.19-.55-.38-1.1-.56-1.65-.24-.71-.47-1.43-.69-2.15,15.73-1.11,45.62-.69,71.87,14.1a91.62,91.62,0,0,1,11.61,7.75C120.8,191.86,168.39,190.11,190.68,187.73Z" fill="#a8a19b"/>
    <path d="M188.8,189.76c-.55.58-1.11,1.15-1.68,1.72A107.58,107.58,0,0,1,9.28,150.8c-.19-.55-.38-1.1-.56-1.65,14.89-1.38,45.15-1.7,71.45,13.51a89.58,89.58,0,0,1,11.24,7.69C120.11,193.41,167.42,191.88,188.8,189.76Z" fill="#7c7772"/>
    <path d="M187.12,191.48A107.58,107.58,0,0,1,9.28,150.8c14.14-1.11,44.75-1.24,71.26,14.08a88.32,88.32,0,0,1,11,7.54C119.73,195.06,166.16,193.55,187.12,191.48Z" fill="#916d4c"/>
  </g>
  <path id="shadow" d="M131.4,221.3A107.38,107.38,0,0,1,111,223.25c-58.92,0-106.8-47.48-107.74-106.41,0-.49,0-1,0-1.49v-.44A110.64,110.64,0,0,1,4.43,98.62c.22-1.43.47-2.85.75-4.27a108.21,108.21,0,0,1,48.63-71l0,0A106.62,106.62,0,0,1,103.59,7.09c2.44-.18,4.9-.26,7.38-.26a107.06,107.06,0,0,1,19.74,1.82A106.61,106.61,0,0,0,94,23.13l0,0A108.21,108.21,0,0,0,45.35,94.22c-.28,1.42-.53,2.84-.75,4.27a110.64,110.64,0,0,0-1.23,16.29v.44c0,.5,0,1,0,1.49A108.08,108.08,0,0,0,131.4,221.3Z" fill="#cdcfca" opacity="0.3"/>
  <g id="red-plant">
    <path d="M197.53,129.35s1.42-6.93-3.87-8.42c0,0-4.77,2.38-.79,8.74S197.53,129.35,197.53,129.35Z" fill="#ff5358"/>
    <path d="M195.9,124.09s1.18-3.48,3-4.88c0,0,1.83.63,1.21,6.35a18.89,18.89,0,0,1-4.74,9.95S194.14,128.17,195.9,124.09Z" fill="#d31c26"/>
    <path d="M192.63,123.21a11.25,11.25,0,0,0-4.84-2.79c-2.46-.44-1.21,3.89-1.21,4.22a25.58,25.58,0,0,0,6.42,9.29C196.82,137.09,192.63,123.21,192.63,123.21Z" fill="#ff6e79"/>
    <path d="M196.65,134A30.23,30.23,0,0,1,202,122.41S204.2,128.88,196.65,134Z" fill="#c4313b"/>
    <path d="M200.89,127.76a16.25,16.25,0,0,1,3.6-5.35s1.28,2.75-.63,7.08-6.64,8-6.64,8S199.91,129.74,200.89,127.76Z" fill="#a7323d"/>
    <path d="M201.92,131.07a26.79,26.79,0,0,0,5.87-6.46s1.25,1.72-.26,6.46-10.64,8.4-10.64,8.4Z" fill="#871d1f"/>
    <path d="M198.62,139.14s3.7,4.66,8.4-.62c0,0,.84-1.77,0-7.67,0,0-3.14,4.58-6,6.13s-2.45,2.49-2.45,2.49" fill="#6e110c"/>
    <path d="M201.41,141.49s6.05,2.2,9.5-2,3.05-6.2,3.05-6.2a21.9,21.9,0,0,1-6.56,3.48C203.83,137.82,200.3,140.65,201.41,141.49Z" fill="#761816"/>
    <path d="M191.29,131.11s-7.64-6.37-9-6.92-1.83,6.43-.81,7.85,6.12,6.3,9.38,7.43S191.29,131.11,191.29,131.11Z" fill="#c12930"/>
    <path d="M196.39,140.85s4.83-.66,5.73-3.77-3.24-6.71-4.19-6.88-7.4,2.42-8.23,4.38S188.84,141.71,196.39,140.85Z" fill="#4f130b"/>
    <path d="M187.39,136.79s-3.48,1.6-11.32-3.52c0,0-.7,3.81,7.77,9.53s9.67-3.33,9.67-3.33Z" fill="#b24c62"/>
    <path d="M189.7,141.7s1.54,2.57,4.07,2.57a5,5,0,0,0,4.25-3.41c-.08-.55-3.41-3.7-5.06-3.85S187.43,137.67,189.7,141.7Z" fill="#a52d2f"/>
    <path d="M195,143.09s1,2.06,4.25,1.51a3.72,3.72,0,0,0,3.12-3.88,6.16,6.16,0,0,0-2.53-2.42S194.86,141.76,195,143.09Z" fill="#a3323a"/>
  </g>
</svg>

              
            
!

CSS

              
                svg {
  max-width: 100vw;
  max-height: 100vh;
  display: block;
  margin: 0 auto;
}

              
            
!

JS

              
                const bee = document.getElementById('bee'); 
const greenPlant = document.getElementById('green-plant');
let beegone = false;

var tlPlant = new TimelineMax({repeat: -1});
tlPlant.to(greenPlant, 0.25, {x:0.5})
  .to(greenPlant, 0.25, {x:0})

greenPlant.addEventListener("mouseover", function() {
  if (!beegone) {
    tlPlant.pause();
    beeFly();
    beegone = true;
  }
})

function beeFly() {
  var tl = new TimelineMax({});
  tl.to(bee, 7, {x:125,  y:-25})
    .to(bee, 2, {x:125,  y:-25})  
    .to(bee, 7, {x:175,  y:-150})
}

              
            
!
999px

Console