Pen Settings

HTML

CSS

CSS Base

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

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.

Vue

              
                <!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div class="landscape">
      <!-- sky starts here -->
      <svg id="sky" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#9bdaff"
          fill-opacity="1"
          d="M0,160L30,176C60,192,120,224,180,218.7C240,213,300,171,360,170.7C420,171,480,213,540,213.3C600,213,660,171,720,133.3C780,96,840,64,900,74.7C960,85,1020,139,1080,165.3C1140,192,1200,192,1260,202.7C1320,213,1380,235,1410,245.3L1440,256L1440,0L1410,0C1380,0,1320,0,1260,0C1200,0,1140,0,1080,0C1020,0,960,0,900,0C840,0,780,0,720,0C660,0,600,0,540,0C480,0,420,0,360,0C300,0,240,0,180,0C120,0,60,0,30,0L0,0Z"
        ></path>
      </svg>
      <!-- sky ends here -->
    </div>
    <!-- bee starts here -->
    <svg
      id="busy-bee"
      xmlns="http://www.w3.org/2000/svg"
      width="166.997"
      height="171.979"
      viewBox="0 0 166.997 171.979"
    >
      <g
        id="bee"
        transform="matrix(0.921, -0.391, 0.391, 0.921, -185.727, -15.352)"
      >
        <g id="Group_3" data-name="Group 3" transform="translate(-60 58)">
          <path
            id="Path_1"
            data-name="left"
            d="M253.8,66c-58.5,11.4-9.6,68.9,5.7,85.2a14.12,14.12,0,0,0,10,4.5h0a14.353,14.353,0,0,0,14.1-9.8C292.2,120.2,308.8,55.3,253.8,66Z"
            fill="#e6f6ff"
          />
          <path
            id="Path_2"
            data-name="Path 2"
            d="M305.2,153.2c21,28.8,38.3,26.4,22.7,28.2a99.945,99.945,0,0,0-32.1,9.5c-55.5,26.9-115.9-15.7-108.1-47C195.5,112.5,268.9,103.4,305.2,153.2Z"
            fill="#ffd000"
          />
          <g id="Group_2" data-name="Group 2">
            <g id="Group_1" data-name="Group 1">
              <path
                id="Path_3"
                data-name="Path 3"
                d="M305.2,153.2a108.751,108.751,0,0,0,10.4,12.3h0c15.5,15.7,25.1,14.4,12.3,15.9a107.874,107.874,0,0,0-16.9,3.5h0a116.575,116.575,0,0,0-15.2,5.9c-2.2,1.1-4.4,2-6.6,2.9,13.6-16.4,14.1-33.5,10.9-46.9C301.8,148.8,303.5,150.9,305.2,153.2Z"
              />
              <path
                id="Path_4"
                data-name="Path 4"
                d="M272.2,126.2a86.212,86.212,0,0,1,17,10.4c5.8,15.5,8.7,39.6-14.2,61.2a83.84,83.84,0,0,1-19.8,1.5C288.9,173,279.8,141.5,272.2,126.2Z"
              />
              <path
                id="Path_5"
                data-name="Path 5"
                d="M249.2,119.2a91.9,91.9,0,0,1,14,3.4c7.8,14.9,18.9,48.4-17.7,75.7a90.7,90.7,0,0,1-14.1-3.4C268,167.6,257,134.2,249.2,119.2Z"
              />
              <path
                id="Path_6"
                data-name="Path 6"
                d="M229.2,118.4a85.506,85.506,0,0,1,12.4,0c7.6,15.4,17,47.3-17.5,73.8a96.954,96.954,0,0,1-11.1-5.8C241.7,162.2,236.1,134.2,229.2,118.4Z"
              />
            </g>
            <path
              id="Path_7"
              data-name="Path 7"
              d="M208,138.3a8,8,0,0,0,13.7,3.2c1.3-1.4,3.3.8,2.1,2.2.7.4,1.3.9,2,1.3,1.6,1.1,0,3.6-1.6,2.5-.9-.6-1.8-1.2-2.8-1.8l-.1-.1c-.3.2-.6.3-.9.5.4.8.7,1.7,1.1,2.5a1.555,1.555,0,0,1-.6,2,1.462,1.462,0,0,1-2-.6c-.4-1-.9-2-1.3-3a11.078,11.078,0,0,1-12.5-8.1C204.5,137.1,207.4,136.4,208,138.3Z"
            />
          </g>
          <path
            id="right"
            data-name="Path 8"
            d="M328.8,89.6c46.3,37.6-23.9,65.3-45.1,72.5a14.225,14.225,0,0,1-10.9-.7h0a14.492,14.492,0,0,1-7.9-15.3C269.4,119.4,285.3,54.3,328.8,89.6Z"
            fill="#d9e8f0"
          />
        </g>
      </g>
    </svg>
    <!-- bee ends here -->
    <!-- cloud is here -->
    <svg id="cloud" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <path
        fill="#edf2f7"
        d="M15.4,-32.7C22,-22.9,30.8,-22.9,36.3,-19C41.8,-15.2,44.1,-7.6,48.9,2.8C53.7,13.2,61.1,26.4,59.7,37.3C58.3,48.3,48.1,57,36.7,52.6C25.3,48.2,12.6,30.7,3.3,25.1C-6.1,19.4,-12.2,25.5,-23.2,29.7C-34.3,33.9,-50.4,36.1,-58.2,30.9C-65.9,25.6,-65.3,12.8,-59.8,3.2C-54.3,-6.4,-43.8,-12.8,-40,-24.9C-36.2,-37,-39.1,-54.8,-33.5,-65.2C-27.9,-75.6,-14,-78.7,-4.8,-70.4C4.4,-62.1,8.9,-42.6,15.4,-32.7Z"
        transform="translate(100 100)"
      />
    </svg>
    <svg
      id="second-cloud"
      viewBox="0 0 200 200"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill="#f5f5f5"
        d="M18.5,-33.3C25.7,-27.9,34.4,-26.4,43.9,-21.5C53.4,-16.6,63.6,-8.3,61.8,-1C60.1,6.3,46.4,12.6,38.6,20.4C30.8,28.2,28.9,37.5,23.5,39.3C18,41,9,35.3,0.2,34.9C-8.6,34.5,-17.2,39.6,-24.4,38.8C-31.7,38.1,-37.6,31.6,-39,24.2C-40.5,16.7,-37.6,8.4,-41.4,-2.2C-45.2,-12.8,-55.8,-25.5,-55.3,-34.8C-54.9,-44.1,-43.5,-49.9,-32.5,-53.1C-21.4,-56.3,-10.7,-56.9,-2.5,-52.5C5.7,-48.2,11.3,-38.8,18.5,-33.3Z"
        transform="translate(100 100)"
      />
    </svg>
    <!-- lavanda starts here -->
    <svg
      id="lavanda"
      xmlns="http://www.w3.org/2000/svg"
      width="249.377"
      height="388.875"
      viewBox="0 0 249.377 388.875"
    >
      <g id="lavanda" transform="translate(-750.029 -417.764)">
        <path
          id="Path_9"
          data-name="Path 9"
          d="M735.252,620.348s51.195,132.619,46.632,182.435"
          transform="translate(127.865 2.147)"
          fill="none"
          stroke="#bacd50"
          stroke-linecap="round"
          stroke-width="2"
        />
        <path
          id="Path_10"
          data-name="Path 10"
          d="M753.831,585.062s22.792,135.869,11.314,187.747"
          transform="translate(139.836 -20.589)"
          fill="none"
          stroke="#b9cf4a"
          stroke-width="2"
        />
        <path
          id="Path_11"
          data-name="Path 11"
          d="M816.618,616.175s-16.72,127.5-52.491,177.964"
          transform="translate(146.47 -0.542)"
          fill="none"
          stroke="#bbce5f"
          stroke-linecap="round"
          stroke-width="2"
        />
        <path
          id="Path_12"
          data-name="Path 12"
          d="M763.092,702.536s-1.88-90.21,22.162-107.264c10.627-7.538-2,16.183-8.86,41.279C767.947,667.468,763.092,702.536,763.092,702.536Z"
          transform="translate(144.137 -9.993)"
          fill="#b9cc5b"
          stroke="#bbcf59"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_13"
          data-name="Path 13"
          d="M47.8,122.194S51.233,20.786,7.3,1.614c-19.418-8.474,4.649,17.829,17.18,46.04C39.918,82.409,47.8,122.194,47.8,122.194Z"
          transform="matrix(0.788, 0.616, -0.616, 0.788, 941.844, 628.986)"
          fill="#b9cc5b"
          stroke="#bbcf59"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_16"
          data-name="Path 16"
          d="M786.724,699.255s42.428-78.119,42.129-80.241,6.229,2.223,0,20.066S786.724,699.255,786.724,699.255Z"
          transform="translate(159.386 2.614)"
          fill="#b9cc58"
          stroke="#b9cc5b"
          stroke-width="1"
        />
        <path
          id="Path_17"
          data-name="Path 17"
          d="M764.957,760.672s35.532-50.162,38.408-55.387,19.523-33.327,19.523-38.038,5.592,13.448-15.945,50.068S764.957,760.672,764.957,760.672Z"
          transform="translate(145.36 33.538)"
          fill="#b9ce4f"
          stroke="#b9ce4f"
          stroke-width="1"
        />
        <path
          id="Path_18"
          data-name="Path 18"
          d="M713.9,623.509s-3.638,7.868,0,14.086,54.618,53.259,62.492,58.223c4.212,2.655-13.266-14.164-31.4-34.514C729.822,644.28,713.9,623.509,713.9,623.509Z"
          transform="translate(114.712 14.05)"
          fill="#b9d044"
          stroke="#b9d044"
          stroke-width="1"
        />
        <path
          id="Path_19"
          data-name="Path 19"
          d="M721.517,651.814a24.791,24.791,0,0,0,4.925,21.989c8.6,10.332,37.6,36.362,41.882,39.961s16.469,12.886,16.469,12.886l-34.341-38.4Z"
          transform="translate(120.158 32.288)"
          fill="#b9d044"
          stroke="#b9d044"
          stroke-width="1"
        />
        <path
          id="Path_20"
          data-name="Path 20"
          d="M718.268,671.175s-1.857,19.71,17.357,42.984,56.84,47.3,56.84,47.3-29.331-27.334-47.88-49.9S718.268,671.175,718.268,671.175Z"
          transform="translate(118.535 44.762)"
          fill="#b9d044"
          stroke="#b9d044"
          stroke-width="1"
        />
        <path
          id="Path_29"
          data-name="Path 29"
          d="M6.221.1S-.346-.294.014,9.915,3.84,26.569,3.84,26.569s4.771-7.647,5.525-9.756S13.324,7.165,11.22,3.153,6.221.1,6.221.1Z"
          transform="matrix(0.839, 0.545, -0.545, 0.839, 979.704, 581.587)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_30"
          data-name="Path 30"
          d="M7.068.114S-.393-.334.016,11.265s4.346,18.92,4.346,18.92S9.783,21.5,10.639,19.1s4.5-10.962,2.107-15.519S7.068.114,7.068.114Z"
          transform="matrix(0.799, -0.602, 0.602, 0.799, 938.403, 587.31)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_31"
          data-name="Path 31"
          d="M8.543.138S-.475-.4.02,13.617s5.16,22.644,5.16,22.644,6.646-10.275,7.681-13.172S18.3,9.839,15.408,4.329,8.543.138,8.543.138Z"
          transform="translate(988.191 587.501) rotate(50)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_32"
          data-name="Path 32"
          d="M6.937,29.794S-.386,30.254.016,18.34,4.89,0,4.89,0,9.6,7.829,10.443,10.29s4.415,11.26,2.068,15.942S6.937,29.794,6.937,29.794Z"
          transform="translate(965.048 611.235) rotate(135)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_33"
          data-name="Path 33"
          d="M802.669,593.625s-10.428-.541-9.855,13.479,6.525,22.421,6.525,22.421,7.125-10.052,8.322-12.949,6.286-13.25,2.945-18.76S802.669,593.625,802.669,593.625Z"
          transform="translate(163.295 -15.16)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_37"
          data-name="Path 37"
          d="M7.543.1S-.42-.294.017,9.915A35.6,35.6,0,0,0,4.656,26.569s5.785-7.647,6.7-9.756,4.8-9.649,2.249-13.661S7.543.1,7.543.1Z"
          transform="matrix(0.839, 0.545, -0.545, 0.839, 981.348, 545.412)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_38"
          data-name="Path 38"
          d="M7.971.129S-.444-.376.018,12.7s4.9,21.339,4.9,21.339,6.114-9.8,7.079-12.5,5.073-12.363,2.377-17.5S7.971.129,7.971.129Z"
          transform="translate(946.74 549.401) rotate(-30)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_39"
          data-name="Path 39"
          d="M6.918,0s-7.3-.438-6.9,10.914S4.271,29.435,4.271,29.435s5.828-4.2,8.518-10.151,4.581-9.205,2.241-13.667S6.918,0,6.918,0Z"
          transform="translate(987.966 555.411) rotate(50)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_40"
          data-name="Path 40"
          d="M6.679,32.86S-.439,31.083.021,19.169,4.839,0,4.839,0s7.1,8.228,8.065,10.689S18.168,24.5,15.48,29.179,6.679,32.86,6.679,32.86Z"
          transform="matrix(-0.799, 0.602, -0.602, -0.799, 971.218, 574.449)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_41"
          data-name="Path 41"
          d="M800.748,593.606s-8.4-.468-7.939,11.656S797.7,625.04,797.7,625.04s6.1-9.082,7.067-11.586,5.064-11.459,2.372-16.224S800.748,593.606,800.748,593.606Z"
          transform="translate(170.398 -48.047)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_47"
          data-name="Path 47"
          d="M6.354.085S-.354-.247.015,8.352A29.984,29.984,0,0,0,3.922,22.381s4.873-6.441,5.642-8.218,4.043-8.127,1.894-11.507S6.354.085,6.354.085Z"
          transform="matrix(0.914, 0.407, -0.407, 0.914, 980.173, 515.72)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_48"
          data-name="Path 48"
          d="M6.715.109S-.374-.317.015,10.7,4.145,28.677,4.145,28.677s5.15-8.254,5.963-10.53,4.273-10.414,2-14.744S6.715.109,6.715.109Z"
          transform="translate(951.906 523.599) rotate(-39)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_49"
          data-name="Path 49"
          d="M5.827,0S-.324-.368.013,9.2A38.493,38.493,0,0,0,3.6,24.795a24.726,24.726,0,0,0,7.175-8.551c2.266-5.016,3.859-7.754,1.888-11.512S5.827,0,5.827,0Z"
          transform="translate(986.997 523.167) rotate(41)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_50"
          data-name="Path 50"
          d="M5.626,27.679s-6-1.5-5.608-11.533S4.076,0,4.076,0s5.983,6.931,6.793,9S15.3,20.635,13.04,24.579,5.626,27.679,5.626,27.679Z"
          transform="matrix(-0.695, 0.719, -0.719, -0.695, 975.572, 541.213)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_51"
          data-name="Path 51"
          d="M6.7.1S-.373-.294.016,9.919s4.122,16.66,4.122,16.66,5.14-7.65,5.952-9.76,4.266-9.652,2-13.666S6.7.1,6.7.1Z"
          transform="translate(965.069 518.136) rotate(-9)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_57"
          data-name="Path 57"
          d="M4.677.07S-.26-.2.011,6.864a26.7,26.7,0,0,0,2.876,11.53A72.691,72.691,0,0,0,7.041,11.64c.566-1.46,2.976-6.68,1.394-9.457S4.677.07,4.677.07Z"
          transform="translate(976.61 493.457) rotate(16)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_58"
          data-name="Path 58"
          d="M4.943.087S-.275-.254.011,8.57a38.011,38.011,0,0,0,3.04,14.395A94.836,94.836,0,0,0,7.44,14.532c.6-1.823,3.146-8.34,1.474-11.807S4.943.087,4.943.087Z"
          transform="translate(954.925 502.676) rotate(-47)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_59"
          data-name="Path 59"
          d="M4.289,0S-.239-.364.01,9.118A48.967,48.967,0,0,0,2.648,24.587a23.683,23.683,0,0,0,5.281-8.479C9.6,11.134,10.77,8.419,9.319,4.692A8.12,8.12,0,0,0,4.289,0Z"
          transform="matrix(0.839, 0.545, -0.545, 0.839, 985.268, 494.718)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_60"
          data-name="Path 60"
          d="M4.417,22.133s-4.707-1.2-4.4-9.222A29.56,29.56,0,0,1,3.2,0S7.9,5.542,8.534,7.2s3.482,9.3,1.7,12.453S4.417,22.133,4.417,22.133Z"
          transform="matrix(-0.588, 0.809, -0.809, -0.588, 975.338, 514.357)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_61"
          data-name="Path 61"
          d="M4.934.08S-.275-.233.011,7.883A32.739,32.739,0,0,0,3.046,21.124a85.138,85.138,0,0,0,4.381-7.757c.6-1.677,3.14-7.671,1.471-10.861S4.934.08,4.934.08Z"
          transform="translate(964.863 497.12) rotate(-17)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_67"
          data-name="Path 67"
          d="M4.517.067S-.252-.2.01,6.629A25.786,25.786,0,0,0,2.788,17.763,70.2,70.2,0,0,0,6.8,11.241c.547-1.41,2.874-6.451,1.347-9.133S4.517.067,4.517.067Z"
          transform="matrix(0.891, 0.454, -0.454, 0.891, 978.333, 473.036)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_68"
          data-name="Path 68"
          d="M4.773.084S-.266-.245.011,8.277a36.707,36.707,0,0,0,2.935,13.9,91.585,91.585,0,0,0,4.239-8.144c.578-1.761,3.038-8.054,1.423-11.4S4.773.084,4.773.084Z"
          transform="matrix(0.809, -0.588, 0.588, 0.809, 956.078, 477.78)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_69"
          data-name="Path 69"
          d="M3.662,0S-.2-.352.008,8.806A52.775,52.775,0,0,0,2.26,23.744a23.306,23.306,0,0,0,4.509-8.188c1.424-4.8,2.425-7.426,1.186-11.024A7.222,7.222,0,0,0,3.662,0Z"
          transform="matrix(0.719, 0.695, -0.695, 0.719, 986.308, 475.827)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_70"
          data-name="Path 70"
          d="M4.266,21.374S-.28,20.218.014,12.468A28.546,28.546,0,0,1,3.09,0S7.626,5.352,8.241,6.953,11.6,15.934,9.887,18.979,4.266,21.374,4.266,21.374Z"
          transform="translate(973.276 492.614) rotate(137)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_71"
          data-name="Path 71"
          d="M4.765.08S-.265-.235.011,7.924a33.968,33.968,0,0,0,2.93,13.308,86.565,86.565,0,0,0,4.231-7.8C7.75,11.75,10.2,5.725,8.593,2.519S4.765.08,4.765.08Z"
          transform="matrix(0.995, -0.105, 0.105, 0.995, 966.435, 473.516)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_77"
          data-name="Path 77"
          d="M6.182.072S-.344-.209.014,7.061a23.1,23.1,0,0,0,3.8,11.86s4.741-5.446,5.49-6.948S13.24,5.1,11.149,2.245A4.987,4.987,0,0,0,6.182.072Z"
          transform="translate(977.927 453.943) rotate(29)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_78"
          data-name="Path 78"
          d="M3.731.063S-.208-.184.009,6.205A26.6,26.6,0,0,0,2.3,16.627a67.79,67.79,0,0,0,3.314-6.105C6.069,9.2,7.992,4.484,6.729,1.973S3.731.063,3.731.063Z"
          transform="matrix(0.309, -0.951, 0.951, 0.309, 954.033, 469.346)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_79"
          data-name="Path 79"
          d="M4.059.065S-.226-.191.009,6.449a26.659,26.659,0,0,0,2.5,10.831,69.538,69.538,0,0,0,3.6-6.345C6.6,9.563,8.694,4.66,7.321,2.05S4.059.065,4.059.065Z"
          transform="matrix(0.819, -0.574, 0.574, 0.819, 958.636, 458.822)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_80"
          data-name="Path 80"
          d="M4.059.065S-.226-.191.009,6.449a26.659,26.659,0,0,0,2.5,10.831,69.538,69.538,0,0,0,3.6-6.345C6.6,9.563,8.694,4.66,7.321,2.05S4.059.065,4.059.065Z"
          transform="translate(973.806 452.624) rotate(17)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_81"
          data-name="Path 81"
          d="M4.237.071S-.236-.209.01,7.047A30.209,30.209,0,0,0,2.616,18.882a76.986,76.986,0,0,0,3.763-6.933c.513-1.5,2.7-6.857,1.263-9.708S4.237.071,4.237.071Z"
          transform="translate(964.597 454.466) rotate(-14)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_82"
          data-name="Path 82"
          d="M6.685.093S-.372-.273.015,9.215A34.222,34.222,0,0,0,4.127,24.693s5.127-7.107,5.937-9.067,4.254-8.967,1.993-12.7S6.685.093,6.685.093Z"
          transform="translate(975.907 518.949) rotate(17)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_83"
          data-name="Path 83"
          d="M5.585,26.463S-.367,25.032.018,15.437,4.046,0,4.046,0s5.94,6.626,6.745,8.608,4.4,11.119,2.155,14.89S5.585,26.463,5.585,26.463Z"
          transform="matrix(-0.978, 0.208, -0.208, -0.978, 971.587, 576.897)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_84"
          data-name="Path 84"
          d="M6.221.1S-.346-.294.014,9.915,3.84,26.569,3.84,26.569s4.771-7.647,5.525-9.756S13.324,7.164,11.22,3.153,6.221.1,6.221.1Z"
          transform="matrix(0.985, 0.174, -0.174, 0.985, 898.707, 535.179)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_85"
          data-name="Path 85"
          d="M7.068.114S-.393-.334.016,11.265s4.347,18.92,4.347,18.92S9.783,21.5,10.639,19.1s4.5-10.962,2.107-15.519S7.068.114,7.068.114Z"
          transform="translate(862.925 556.585) rotate(-60)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_86"
          data-name="Path 86"
          d="M8.543.138S-.476-.4.02,13.617s5.16,22.644,5.16,22.644,6.646-10.275,7.681-13.172S18.3,9.839,15.408,4.329,8.543.138,8.543.138Z"
          transform="matrix(0.891, 0.454, -0.454, 0.891, 908.83, 537.307)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_87"
          data-name="Path 87"
          d="M6.937,29.794S-.386,30.254.016,18.34,4.89,0,4.89,0,9.6,7.829,10.443,10.29s4.415,11.26,2.068,15.942S6.937,29.794,6.937,29.794Z"
          transform="translate(896.8 568.196) rotate(112)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_88"
          data-name="Path 88"
          d="M9.878.138S-.55-.4.023,13.617,6.548,36.038,6.548,36.038s7.125-10.052,8.322-12.949,6.286-13.25,2.945-18.76S9.878.138,9.878.138Z"
          transform="matrix(0.921, -0.391, 0.391, 0.921, 875.692, 541.406)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_89"
          data-name="Path 89"
          d="M7.543.1S-.42-.294.017,9.915A35.6,35.6,0,0,0,4.656,26.569s5.785-7.647,6.7-9.756,4.8-9.649,2.249-13.661S7.543.1,7.543.1Z"
          transform="matrix(0.985, 0.174, -0.174, 0.985, 886.085, 501.237)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_90"
          data-name="Path 90"
          d="M7.971.129S-.444-.376.018,12.705s4.9,21.339,4.9,21.339,6.114-9.8,7.079-12.5S17.073,9.18,14.376,4.04,7.971.129,7.971.129Z"
          transform="matrix(0.602, -0.799, 0.799, 0.602, 855.787, 518.432)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_91"
          data-name="Path 91"
          d="M6.918,0s-7.3-.438-6.9,10.914S4.27,29.435,4.27,29.435s5.828-4.2,8.518-10.151,4.581-9.205,2.241-13.667S6.918,0,6.918,0Z"
          transform="matrix(0.891, 0.454, -0.454, 0.891, 896.084, 507.855)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_92"
          data-name="Path 92"
          d="M6.679,32.86S-.439,31.083.021,19.169,4.839,0,4.839,0s7.1,8.228,8.065,10.689S18.168,24.5,15.481,29.179,6.679,32.86,6.679,32.86Z"
          transform="translate(888.106 531.925) rotate(120)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_93"
          data-name="Path 93"
          d="M7.957.119S-.443-.349.018,11.776,4.912,31.554,4.912,31.554s6.1-9.082,7.067-11.586S17.042,8.509,14.351,3.744,7.957.119,7.957.119Z"
          transform="matrix(0.921, -0.391, 0.391, 0.921, 869.381, 508.358)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_94"
          data-name="Path 94"
          d="M6.354.085S-.354-.247.015,8.352A29.984,29.984,0,0,0,3.922,22.381s4.873-6.441,5.642-8.218,4.043-8.127,1.894-11.507S6.354.085,6.354.085Z"
          transform="translate(873.402 474.365) rotate(1)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_95"
          data-name="Path 95"
          d="M6.715.109S-.374-.317.015,10.7,4.145,28.677,4.145,28.677s5.15-8.254,5.963-10.53,4.273-10.414,2-14.744S6.715.109,6.715.109Z"
          transform="matrix(0.469, -0.883, 0.883, 0.469, 850.461, 492.663)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_96"
          data-name="Path 96"
          d="M5.827,0S-.324-.368.013,9.2A38.493,38.493,0,0,0,3.6,24.795a24.726,24.726,0,0,0,7.175-8.551c2.266-5.016,3.859-7.754,1.888-11.512S5.827,0,5.827,0Z"
          transform="matrix(0.951, 0.309, -0.309, 0.951, 882.593, 478.553)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_97"
          data-name="Path 97"
          d="M5.626,27.679s-6-1.5-5.608-11.533S4.076,0,4.076,0s5.983,6.931,6.793,9S15.3,20.635,13.04,24.579,5.626,27.679,5.626,27.679Z"
          transform="matrix(-0.358, 0.934, -0.934, -0.358, 879.128, 499.629)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_98"
          data-name="Path 98"
          d="M6.7.1S-.373-.294.015,9.919s4.122,16.66,4.122,16.66,5.14-7.65,5.952-9.76,4.266-9.652,2-13.666S6.7.1,6.7.1Z"
          transform="matrix(0.848, -0.53, 0.53, 0.848, 860.443, 482.49)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_99"
          data-name="Path 99"
          d="M4.677.07S-.26-.2.011,6.864a26.7,26.7,0,0,0,2.876,11.53A72.691,72.691,0,0,0,7.041,11.64c.566-1.46,2.976-6.68,1.394-9.457S4.677.07,4.677.07Z"
          transform="translate(861.424 455.264) rotate(-7)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_100"
          data-name="Path 100"
          d="M4.943.087S-.275-.254.011,8.57a38.011,38.011,0,0,0,3.04,14.395A94.836,94.836,0,0,0,7.44,14.532c.6-1.823,3.146-8.34,1.474-11.807S4.943.087,4.943.087Z"
          transform="translate(845.065 472.223) rotate(-70)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_101"
          data-name="Path 101"
          d="M4.289,0S-.239-.364.01,9.118A48.967,48.967,0,0,0,2.648,24.587a23.683,23.683,0,0,0,5.281-8.479C9.6,11.134,10.77,8.419,9.319,4.692A8.12,8.12,0,0,0,4.289,0Z"
          transform="matrix(0.985, 0.174, -0.174, 0.985, 869.886, 453.042)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_102"
          data-name="Path 102"
          d="M4.417,22.133s-4.707-1.2-4.4-9.222A29.56,29.56,0,0,1,3.2,0S7.9,5.542,8.534,7.2s3.482,9.3,1.7,12.453S4.417,22.133,4.417,22.133Z"
          transform="translate(868.419 474.999) rotate(103)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_103"
          data-name="Path 103"
          d="M4.934.08S-.275-.233.011,7.883A32.739,32.739,0,0,0,3.046,21.124a85.138,85.138,0,0,0,4.381-7.757c.6-1.677,3.14-7.671,1.471-10.861S4.934.08,4.934.08Z"
          transform="matrix(0.766, -0.643, 0.643, 0.766, 852.041, 463.226)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_104"
          data-name="Path 104"
          d="M4.517.067S-.252-.2.01,6.629A25.786,25.786,0,0,0,2.788,17.763,70.2,70.2,0,0,0,6.8,11.241c.547-1.41,2.874-6.451,1.347-9.133S4.517.067,4.517.067Z"
          transform="matrix(0.998, 0.07, -0.07, 0.998, 855.031, 435.793)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_105"
          data-name="Path 105"
          d="M4.773.084S-.266-.245.011,8.277a36.707,36.707,0,0,0,2.935,13.9,91.585,91.585,0,0,0,4.239-8.144c.578-1.761,3.038-8.054,1.423-11.4S4.773.084,4.773.084Z"
          transform="translate(836.398 448.855) rotate(-59)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_106"
          data-name="Path 106"
          d="M3.662,0S-.2-.352.008,8.806A52.775,52.775,0,0,0,2.26,23.744a23.306,23.306,0,0,0,4.509-8.188c1.424-4.8,2.425-7.426,1.186-11.024A7.222,7.222,0,0,0,3.662,0Z"
          transform="matrix(0.934, 0.358, -0.358, 0.934, 863.462, 435.246)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_107"
          data-name="Path 107"
          d="M4.266,21.374S-.28,20.218.014,12.468A28.546,28.546,0,0,1,3.09,0S7.626,5.352,8.241,6.953,11.6,15.934,9.887,18.979,4.266,21.374,4.266,21.374Z"
          transform="translate(858.026 455.79) rotate(114)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_108"
          data-name="Path 108"
          d="M4.765.08S-.265-.235.011,7.924a33.968,33.968,0,0,0,2.93,13.308,86.565,86.565,0,0,0,4.231-7.8C7.75,11.75,10.2,5.725,8.593,2.519S4.765.08,4.765.08Z"
          transform="translate(844.266 440.884) rotate(-29)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_109"
          data-name="Path 109"
          d="M6.182.072S-.344-.209.014,7.061a23.1,23.1,0,0,0,3.8,11.86s4.741-5.446,5.49-6.948S13.24,5.1,11.149,2.245A4.987,4.987,0,0,0,6.182.072Z"
          transform="matrix(0.995, 0.105, -0.105, 0.995, 847.196, 418.377)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_110"
          data-name="Path 110"
          d="M3.731.063S-.208-.184.009,6.205A26.6,26.6,0,0,0,2.3,16.627a67.79,67.79,0,0,0,3.314-6.105C6.069,9.2,7.992,4.484,6.729,1.973S3.731.063,3.731.063Z"
          transform="matrix(-0.087, -0.996, 0.996, -0.087, 831.221, 441.891)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_111"
          data-name="Path 111"
          d="M4.059.065S-.226-.191.009,6.449a26.659,26.659,0,0,0,2.5,10.831,69.538,69.538,0,0,0,3.6-6.345C6.6,9.563,8.694,4.66,7.321,2.05S4.059.065,4.059.065Z"
          transform="matrix(0.53, -0.848, 0.848, 0.53, 831.345, 430.406)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_113"
          data-name="Path 113"
          d="M4.237.071S-.236-.209.01,7.047A30.209,30.209,0,0,0,2.616,18.882a76.986,76.986,0,0,0,3.763-6.933c.513-1.5,2.7-6.857,1.263-9.708S4.237.071,4.237.071Z"
          transform="matrix(0.799, -0.602, 0.602, 0.799, 835.131, 424.066)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_114"
          data-name="Path 114"
          d="M6.685.093S-.372-.273.015,9.215A34.22,34.22,0,0,0,4.127,24.693s5.127-7.107,5.937-9.067,4.254-8.967,1.993-12.7S6.685.093,6.685.093Z"
          transform="matrix(0.995, -0.105, 0.105, 0.995, 870.737, 479.004)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_115"
          data-name="Path 115"
          d="M5.585,26.463S-.367,25.032.018,15.437,4.046,0,4.046,0s5.94,6.626,6.745,8.608,4.4,11.119,2.155,14.89S5.585,26.463,5.585,26.463Z"
          transform="matrix(-0.819, 0.574, -0.574, -0.819, 889.403, 534.033)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_116"
          data-name="Path 116"
          d="M6.766.109S-.377-.32.016,10.784,4.177,28.9,4.177,28.9s5.189-8.316,6.008-10.61S14.491,7.792,12.2,3.429,6.766.109,6.766.109Z"
          transform="matrix(0.995, 0.105, -0.105, 0.995, 864.681, 582.086)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_117"
          data-name="Path 117"
          d="M7.686.124S-.428-.363.018,12.251,4.745,32.827,4.745,32.827s5.9-9.448,6.826-12.054S16.462,8.852,13.863,3.9,7.686.124,7.686.124Z"
          transform="matrix(0.438, -0.899, 0.899, 0.438, 827.485, 608.024)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_118"
          data-name="Path 118"
          d="M9.291.15S-.517-.439.021,14.809,5.633,39.436,5.633,39.436s7.228-11.175,8.354-14.325,5.913-14.41,2.77-20.4S9.291.15,9.291.15Z"
          transform="matrix(0.921, 0.391, -0.391, 0.921, 875.825, 583.626)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_119"
          data-name="Path 119"
          d="M7.545,32.4S-.42,32.9.017,19.946,5.318,0,5.318,0s5.125,8.514,6.039,11.191,4.8,12.246,2.249,17.338S7.545,32.4,7.545,32.4Z"
          transform="translate(865.117 618.051) rotate(108)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_120"
          data-name="Path 120"
          d="M10.743.15S-.6-.439.025,14.809s7.1,24.384,7.1,24.384,7.749-10.932,9.051-14.082,6.837-14.41,3.2-20.4S10.743.15,10.743.15Z"
          transform="matrix(0.891, -0.454, 0.454, 0.891, 840.184, 590.587)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_121"
          data-name="Path 121"
          d="M8.2.109S-.457-.32.019,10.784,5.064,28.9,5.064,28.9s6.291-8.316,7.285-10.61,5.22-10.494,2.446-14.857S8.2.109,8.2.109Z"
          transform="matrix(0.995, 0.105, -0.105, 0.995, 848.413, 546.22)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_122"
          data-name="Path 122"
          d="M8.669.14S-.483-.409.02,13.817,5.351,37.025,5.351,37.025,12,26.369,13.05,23.43,18.568,9.984,15.635,4.393,8.669.14,8.669.14Z"
          transform="matrix(0.545, -0.839, 0.839, 0.545, 816.846, 567.173)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_123"
          data-name="Path 123"
          d="M7.524,0S-.419-.474.017,11.872,4.644,32.013,4.644,32.013s6.338-4.564,9.264-11.04S18.89,10.961,16.345,6.11,7.524,0,7.524,0Z"
          transform="matrix(0.921, 0.391, -0.391, 0.921, 859.762, 552.641)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_124"
          data-name="Path 124"
          d="M7.263,35.737S-.478,33.8.023,20.847,5.262,0,5.262,0s7.724,8.948,8.771,11.625,5.726,15.016,2.8,20.108S7.263,35.737,7.263,35.737Z"
          transform="matrix(-0.438, 0.899, -0.899, -0.438, 852.933, 579.359)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_125"
          data-name="Path 125"
          d="M8.654.13S-.482-.379.02,12.807s5.322,21.51,5.322,21.51,6.637-9.877,7.685-12.6,5.507-12.462,2.58-17.644S8.654.13,8.654.13Z"
          transform="matrix(0.891, -0.454, 0.454, 0.891, 830.83, 555.212)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_126"
          data-name="Path 126"
          d="M6.91.092S-.385-.269.016,9.084A32.609,32.609,0,0,0,4.266,24.34s5.3-7.005,6.136-8.938,4.4-8.839,2.06-12.515S6.91.092,6.91.092Z"
          transform="matrix(0.966, -0.259, 0.259, 0.966, 823.454, 521.704)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_127"
          data-name="Path 127"
          d="M7.3.118S-.407-.345.017,11.639,4.508,31.188,4.508,31.188s5.6-8.976,6.485-11.452S15.64,8.41,13.17,3.7,7.3.118,7.3.118Z"
          transform="matrix(0.208, -0.978, 0.978, 0.208, 804.955, 547.711)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_128"
          data-name="Path 128"
          d="M6.337,0S-.353-.4.015,10s3.9,16.965,3.9,16.965,5.339-3.845,7.8-9.3,4.2-8.433,2.053-12.52S6.337,0,6.337,0Z"
          transform="matrix(0.999, 0.035, -0.035, 0.999, 834.318, 523.328)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_129"
          data-name="Path 129"
          d="M6.118,30.1S-.4,28.475.02,17.56,4.433,0,4.433,0s6.506,7.538,7.388,9.793,4.823,12.649,2.361,16.938S6.118,30.1,6.118,30.1Z"
          transform="matrix(-0.087, 0.996, -0.996, -0.087, 837.013, 546.401)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_130"
          data-name="Path 130"
          d="M7.29.109S-.406-.319.017,10.788,4.5,28.907,4.5,28.907s5.59-8.32,6.473-10.614,4.639-10.5,2.173-14.862S7.29.109,7.29.109Z"
          transform="translate(812.341 534.084) rotate(-48)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_131"
          data-name="Path 131"
          d="M5.086.076s-5.37-.3-5.075,7.39A29.04,29.04,0,0,0,3.14,20a79.056,79.056,0,0,0,4.517-7.346c.616-1.588,3.237-7.265,1.516-10.285S5.086.076,5.086.076Z"
          transform="translate(805.129 505.039) rotate(-17)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_132"
          data-name="Path 132"
          d="M5.375.095S-.3-.276.012,9.321A41.339,41.339,0,0,0,3.318,24.976S7.441,17.788,8.092,15.8s3.421-9.07,1.6-12.841S5.375.095,5.375.095Z"
          transform="matrix(0.174, -0.985, 0.985, 0.174, 790.811, 526.292)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_133"
          data-name="Path 133"
          d="M4.665,0S-.26-.4.011,9.917A53.255,53.255,0,0,0,2.88,26.74a25.756,25.756,0,0,0,5.744-9.222c1.814-5.409,3.089-8.362,1.511-12.415A8.831,8.831,0,0,0,4.665,0Z"
          transform="translate(813.773 501.061)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_134"
          data-name="Path 134"
          d="M4.8,24.071s-5.12-1.3-4.788-10.029S3.48,0,3.48,0s5.108,6.027,5.8,7.83,3.787,10.114,1.854,13.544S4.8,24.071,4.8,24.071Z"
          transform="matrix(-0.052, 0.999, -0.999, -0.052, 816.348, 524.855)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_135"
          data-name="Path 135"
          d="M5.366.087S-.3-.254.012,8.574a35.6,35.6,0,0,0,3.3,14.4s4.115-6.612,4.765-8.436S11.492,6.2,9.677,2.726,5.366.087,5.366.087Z"
          transform="matrix(0.643, -0.766, 0.766, 0.643, 796.583, 515.338)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_136"
          data-name="Path 136"
          d="M4.912.073S-.274-.214.011,7.21A28.044,28.044,0,0,0,3.032,19.319a76.345,76.345,0,0,0,4.362-7.094c.595-1.534,3.126-7.016,1.464-9.933S4.912.073,4.912.073Z"
          transform="translate(789.797 487.492) rotate(-13)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_137"
          data-name="Path 137"
          d="M5.191.091S-.289-.267.012,9A39.921,39.921,0,0,0,3.2,24.12s3.981-6.942,4.61-8.857,3.3-8.759,1.548-12.4S5.191.091,5.191.091Z"
          transform="translate(774.572 507.002) rotate(-76)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_138"
          data-name="Path 138"
          d="M3.982,0S-.222-.383.009,9.577A57.4,57.4,0,0,0,2.458,25.823a25.347,25.347,0,0,0,4.9-8.905C8.91,11.694,10,8.842,8.652,4.928A7.854,7.854,0,0,0,3.982,0Z"
          transform="matrix(0.998, 0.07, -0.07, 0.998, 798.393, 484.242)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_139"
          data-name="Path 139"
          d="M4.639,23.245S-.305,21.988.015,13.56A31.046,31.046,0,0,1,3.361,0s4.933,5.82,5.6,7.562,3.657,9.767,1.79,13.079S4.639,23.245,4.639,23.245Z"
          transform="translate(799.271 507.338) rotate(97)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_140"
          data-name="Path 140"
          d="M5.182.087S-.288-.255.012,8.617A36.943,36.943,0,0,0,3.2,23.091s3.974-6.646,4.6-8.479S11.1,6.227,9.345,2.74,5.182.087,5.182.087Z"
          transform="matrix(0.695, -0.719, 0.719, 0.695, 780.221, 496.21)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_141"
          data-name="Path 141"
          d="M6.723.078S-.374-.227.015,7.68a25.117,25.117,0,0,0,4.135,12.9s5.156-5.923,5.971-7.556,4.279-7.473,2-10.58A5.424,5.424,0,0,0,6.723.078Z"
          transform="translate(780.203 470.784) rotate(2)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_142"
          data-name="Path 142"
          d="M4.058.068S-.226-.2.009,6.748a28.93,28.93,0,0,0,2.5,11.334,73.725,73.725,0,0,0,3.6-6.64c.492-1.435,2.583-6.567,1.21-9.3S4.058.068,4.058.068Z"
          transform="translate(764.655 497.507) rotate(-99)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_143"
          data-name="Path 143"
          d="M4.415.071S-.246-.208.01,7.013A28.993,28.993,0,0,0,2.725,18.793a75.626,75.626,0,0,0,3.92-6.9C7.181,10.4,9.455,5.068,7.962,2.23S4.415.071,4.415.071Z"
          transform="matrix(0.469, -0.883, 0.883, 0.469, 763.919, 485.036)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_144"
          data-name="Path 144"
          d="M4.415.071S-.246-.208.01,7.013A28.993,28.993,0,0,0,2.725,18.793a75.626,75.626,0,0,0,3.92-6.9C7.181,10.4,9.455,5.068,7.962,2.23S4.415.071,4.415.071Z"
          transform="translate(775.559 471.54) rotate(-10)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_145"
          data-name="Path 145"
          d="M4.608.078s-4.865-.3-4.6,7.586A32.855,32.855,0,0,0,2.845,20.536a83.727,83.727,0,0,0,4.093-7.541C7.5,11.365,9.87,5.538,8.311,2.437S4.608.078,4.608.078Z"
          transform="translate(767.545 477.871) rotate(-41)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_146"
          data-name="Path 146"
          d="M7.27.1S-.4-.3.017,10.022A37.217,37.217,0,0,0,4.488,26.856s5.576-7.729,6.456-9.861,4.627-9.753,2.168-13.808S7.27.1,7.27.1Z"
          transform="matrix(0.927, -0.375, 0.375, 0.927, 822.058, 527.353)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_147"
          data-name="Path 147"
          d="M6.074,28.78S-.4,27.224.019,16.789,4.4,0,4.4,0s6.46,7.206,7.335,9.362,4.788,12.093,2.344,16.194S6.074,28.78,6.074,28.78Z"
          transform="translate(854.5 581.548) rotate(141)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_148"
          data-name="Path 148"
          d="M4.415.071S-.246-.208.01,7.013A28.993,28.993,0,0,0,2.725,18.793a75.626,75.626,0,0,0,3.92-6.9C7.181,10.4,9.455,5.068,7.962,2.23S4.415.071,4.415.071Z"
          transform="matrix(0.469, -0.883, 0.883, 0.469, 750.765, 468.593)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_149"
          data-name="Path 149"
          d="M4.415.071S-.246-.208.01,7.013A28.993,28.993,0,0,0,2.725,18.793a75.626,75.626,0,0,0,3.92-6.9C7.181,10.4,9.455,5.068,7.962,2.23S4.415.071,4.415.071Z"
          transform="translate(764.048 456.741) rotate(-10)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
        <path
          id="Path_150"
          data-name="Path 150"
          d="M4.608.078s-4.865-.3-4.6,7.586A32.855,32.855,0,0,0,2.845,20.536a83.727,83.727,0,0,0,4.093-7.541C7.5,11.365,9.87,5.538,8.311,2.437S4.608.078,4.608.078Z"
          transform="translate(754.39 461.428) rotate(-41)"
          fill="#c9b5e0"
          stroke="#573486"
          stroke-linecap="round"
          stroke-width="1"
        />
      </g>
    </svg>
    <!--lavanda ends here -->
    <svg
      id="petalo-1"
      xmlns="http://www.w3.org/2000/svg"
      width="38.999"
      height="41.592"
      viewBox="0 0 38.999 41.592"
    >
      <path
        d="M9.878.138S-.55-.4.023,13.617,6.548,36.038,6.548,36.038s7.125-10.052,8.322-12.949,6.286-13.25,2.945-18.76S9.878.138,9.878.138Z"
        transform="translate(23.613 0.719) rotate(39)"
        fill="#c9b5e0"
        stroke="#573486"
        stroke-linecap="round"
        stroke-width="1"
      />
    </svg>
    <!-- petalo-2 starts here -->
    <svg
      id="petalo-2"
      xmlns="http://www.w3.org/2000/svg"
      width="30.867"
      height="29.239"
      viewBox="0 0 30.867 29.239"
    >
      <path
        d="M5.585,26.463S-.367,25.032.018,15.437,4.046,0,4.046,0s5.94,6.626,6.745,8.608,4.4,11.119,2.155,14.89S5.585,26.463,5.585,26.463Z"
        transform="translate(9.78 28.323) rotate(-130)"
        fill="#c9b5e0"
        stroke="#573486"
        stroke-linecap="round"
        stroke-width="1"
      />
    </svg>
    <!-- petalo-3 starts here -->
    <svg
      id="petalo-3"
      xmlns="http://www.w3.org/2000/svg"
      width="42.374"
      height="35.12"
      viewBox="0 0 42.374 35.12"
    >
      <path
        d="M802.669,593.625s-10.428-.541-9.855,13.479,6.525,22.421,6.525,22.421,7.125-10.052,8.322-12.949,6.286-13.25,2.945-18.76S802.669,593.625,802.669,593.625Z"
        transform="matrix(0.469, 0.883, -0.883, 0.469, 184.643, -977.932)"
        fill="#c9b5e0"
        stroke="#573486"
        stroke-linecap="round"
        stroke-width="1"
      />
    </svg>
    <!-- petalo-4 starts here -->
    <svg
      id="petalo-4"
      xmlns="http://www.w3.org/2000/svg"
      width="17.205"
      height="20.655"
      viewBox="0 0 17.205 20.655"
    >
      <path
        d="M4.059.065S-.226-.191.009,6.449a26.659,26.659,0,0,0,2.5,10.831,69.537,69.537,0,0,0,3.6-6.345C6.6,9.563,8.694,4.66,7.321,2.05S4.059.065,4.059.065Z"
        transform="translate(16.487 15.921) rotate(149)"
        fill="#c9b5e0"
        stroke="#573486"
        stroke-linecap="round"
        stroke-width="1"
      />
    </svg>
  </div>
</template>

<script>
export default {
  mounted() {
    let flowersTimeLine = new TimelineMax({
      repeat: -1,
      repeatDelay: 1
    });
    let beeTimeLine = new TimelineMax({
      repeat: -1
    });

    let cloudsTimeLine = new TimelineMax({
      ease: Bounce.easeOut
    })
      .to("#cloud", 5, { x: "-30%", repeat: -1, yoyo: true }, 0)
      .to("#second-cloud", 5, { x: "-30%", repeat: -1, yoyo: true }, 0)
      .to("#cloud", 1, { y: +5, repeat: -1, yoyo: true }, 0);

    // let tl = gsap.timeline({repeat: 100});
    beeTimeLine.to(
      "#right",
      0.1,
      { rotate: 10, x: "+=2", yoyo: true, repeat: 5 },
      "-=1.0"
    );
    beeTimeLine.to("#busy-bee", 2, { visibility: "visible", x: -300, y: -100 });
    beeTimeLine.to("#busy-bee", 2, { rotationY: "+=180" });
    beeTimeLine.to("#busy-bee", 2, { x: 5, y: 50, rotation: 5 });
    // beeTimeLine.to(
    // "#lavanda",
    // 0.1,
    //  { x: "+=2", yoyo: true, repeat: 2 }
    // );
    // beeTimeLine.to(
    //   "#lavanda",
    //   0.1,
    //   { x: "-=2", yoyo: true, repeat: 1 }
    // );
    beeTimeLine.to("#right", 0.1, { rotate: 5, yoyo: true, repeat: 5 });
    beeTimeLine.to("#busy-bee", 1, { x: 5, y: 20 });
    beeTimeLine.to("#busy-bee", 2, { x: -10, y: 50, rotation: -20 });
    beeTimeLine.to(
      "#left",
      0.1,
      { rotate: 20, x: "+=5", yoyo: true, repeat: 2 },
      "-=1.0"
    );
    beeTimeLine.to("#busy-bee", 2, { x: 300, y: 100 });
    flowersTimeLine.to(
      "#petalo-1",
      2,
      {
        x: 50,
        y: 80,
        rotate: 180,
        opacity: 1,
        ease: "slow"
      },
      "+=2"
    );
    flowersTimeLine.to(
      "#petalo-1",
      5,
      {
        x: 30,
        y: 300,
        rotate: 120,
        ease: "slow(0.5, 0.8)"
      },
      "-=1.75"
    );
    flowersTimeLine.to(
      "#petalo-2",
      2,
      {
        x: 60,
        y: 80,
        rotate: 180,
        opacity: 1,
        ease: "slow"
      },
      "+=2"
    );
    flowersTimeLine.to(
      "#petalo-2",
      5,
      {
        x: 80,
        y: 300,
        rotate: 50,
        ease: "slow(0.5, 0.8)"
      },
      "-=1.75"
    );
  }
};
</script>

<style>
body {
  background-color: #edf2f7;
  display: grid;
  place-items: center;
  height: 100vh;
}
#app {
  height: 400px;
  width: 400px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: #93c01f;
  position: relative;
  z-index: -1;
  border: 1rem solid white;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
#sky {
  position: absolute;
  z-index: -1;
  height: 100vh;
  left: 0;
  right: 0;
  top: 0;
}
#cloud {
  width: 100px;
  position: absolute;
  z-index: -1;
  left: 0;
  transform: rotate(90deg);
}
#second-cloud {
  width: 200px;
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
}
#busy-bee {
  visibility: hidden;
}
#lavanda {
  position: absolute;
  z-index: 2;
  height: 60%;
  bottom: 0;
  left: auto;
  right: auto;
}
#petalo-1 {
  position: absolute;
  opacity: 0;
}
#petalo-2 {
  position: absolute;
  opacity: 0;
}
#petalo-4 {
  position: absolute;
  z-index: 2;
  bottom: 0;
}
</style>

              
            
!
999px

Console