Web between finger for tentacles

src/App.vue

@@ -194,6 +194,7 @@
                 }"
                 :style="{ '--pulse': pulseLevel.toFixed(3) }"
               >
+                <div class="tentacle-web"></div>
                 <span
                   v-for="(level, index) in tentacleLevels"
                   :key="index"

src/styles.css

@@ -422,6 +422,42 @@ audio.hidden-audio {
   pointer-events: none;
 }
 
+.pulse-tentacles .tentacle-web {
+  position: absolute;
+  inset: -10px;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from 0deg,
+      rgba(0, 0, 0, 0) 0deg,
+      currentColor 12deg,
+      rgba(0, 0, 0, 0) 24deg,
+      currentColor 36deg,
+      rgba(0, 0, 0, 0) 48deg
+    );
+  opacity: calc(0.12 + var(--pulse, 0) * 0.35);
+  filter: blur(6px);
+  mask-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.55) 45%,
+    rgba(0, 0, 0, 1) 65%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.55) 45%,
+    rgba(0, 0, 0, 1) 65%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mix-blend-mode: screen;
+}
+
 .pulse-tentacles.playing {
   animation: tentacleSpin 12s linear infinite;
 }