Create droplet fill animation

I added two ways to do this: one is with translation, but this lets the svg [bleed on the bottom and top of the mask as described here: https://stackoverflow.com/questions/67736210/svg-mask-is-bleeding-on-canvas-edges . The second way is to use the CSS property clip-path which works fine so far. The first option will likely be removed in the future.

components/TheDroplet.vue

 <template>
   <section class="droplet-section" id="droplet-section">
     <h1 class="greeting">Hi, <span>John</span>!</h1>
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="224" height="336.833" viewBox="0 0 224 336.833">
+    <svg id="droplet-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="224" height="336.833" viewBox="0 0 224 336.833">
       <defs>
         <clipPath id="droplet-clip-path">
           <path id="Path_47" data-name="Path 47" d="M104.988,219.221A103.211,103.211,0,0,1,84.133,217.1a102.363,102.363,0,0,1-37-15.732A104.675,104.675,0,0,1,3.6,135.721,106.424,106.424,0,0,1,1.5,114.64c0-12.932,5.3-31.623,15.765-55.555C25.718,39.747,37.538,16.978,52.4-8.587,63.138-27.068,75.19-46.558,88.219-66.514c7.922-12.134,13.992-21.036,16.734-25.017.4.6.907,1.348,1.5,2.225,8.325,12.355,33.657,49.953,57.166,91.456,13.311,23.5,23.833,44.391,31.275,62.1,9.014,21.448,13.586,38.4,13.586,50.394a106.427,106.427,0,0,1-2.1,21.081,104.676,104.676,0,0,1-43.531,65.644,102.263,102.263,0,0,1-57.854,17.856Z" transform="translate(7554.014 -1288.48)" fill="none" stroke="#707070" stroke-width="1"/>
@@ -44,7 +44,7 @@
       </defs>
       <g id="Group_41" data-name="Group 41" transform="translate(-7339.002 1394)">
         <g id="Mask_Group_10" data-name="Mask Group 10" transform="translate(-208 3)" clip-path="url(#droplet-clip-path)">
-          <rect id="Rectangle_73" data-name="Rectangle 73" width="211" height="317" transform="translate(7554 -1383)" fill="#59acf5"/>
+          <rect id="Rectangle_73" class="droplet-fill" :class="translateYPos + 'px'" data-name="Rectangle 73" width="211" height="317" fill="#59acf5" :style="{ '--translate-y-pos': `${translateYPos}px`, '--clip-amount':`${clipAmount}px` }"/>
         </g>
         <g id="Group_40" data-name="Group 40" transform="translate(7860 -745.167)">
           <g id="Droplet" transform="translate(-521 -660)">
@@ -88,7 +88,27 @@
 </template>
 
 <script>
-
+export default {
+  data: function () {
+    return {
+      translateYFull: -1383,
+      translateYEmpty: -1066,
+      translateYPos: -1383,
+      clipAmount: 0,
+    }
+  },
+  methods: {
+    fillDroplet: async function () {
+      setTimeout(() => {
+        this.translateYPos = -1383
+        this.clipAmount = 200
+      }, 4)
+    }
+  },
+  mounted () {
+    this.fillDroplet()
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -109,4 +129,16 @@
 .goal {
   font-size: 2em;
 }
+
+#droplet-icon {
+  margin: 2em auto;
+
+  .droplet-fill {
+    clip-path: inset(var(--clip-amount) 0 0 0);
+
+    transform: translate(7554px, var(--translate-y-pos));
+    transition: all ease-in-out 5s;
+  }
+}
+
 </style>