webview/src/modules/camera/ShadeTongueUp.vue

<script setup lang="ts">
import { SVGPathData, SVGPathDataTransformer } from 'svg-pathdata';


const Shade: SVGPathData[] = [
  'M21 193C21 193-46 60 78 9 84 7 91 4 98 4 105 3 115 3 122 4 136 7 140 7 160 3 182 0 324 31 249 192Z',
  'M139 127C139 127 49 81 27 152 6 223 51 357 130 364 205 370 244 331 249 181 249 181 259 75 139 127Z',
].map(d => new SVGPathData(d));

const { translateX = 0, translateY = 0, scale = 1, } = defineProps<{
  translateX?: number; translateY?: number;
  scale?: number;
}>();

const paths = ref<string[]>([]);

watchEffect(() => {
  paths.value = Shade.map(data => data
    .transform(SVGPathDataTransformer.TRANSLATE(translateX, translateY))
    .transform(SVGPathDataTransformer.SCALE(scale, scale))
    .encode(),
  );
});
</script>
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 366">
    <clipPath id="shade">
      <path v-for="(d,i) in paths" :id="'outline-'+i" stroke="#fefefe" stroke-width="2" fill="none" :d="d" />
    </clipPath>
    <path
      id="outline"
      stroke="#fefefe"
      stroke-width="2"
      fill="none"
      d="M21 193C21 193-46 60 78 9 84 7 91 4 98 4 105 3 115 3 122 4 136 7 140 7 160 3 182 0 324 31 249 192M139 127C139 127 49 81 27 152 6 223 51 357 130 364 205 370 244 331 249 181 249 181 259 75 139 127Z"
    />
    <path
      id="tongue"
      stroke="#fefefe"
      stroke-width="2"
      fill="none"
      d="M 139 298 L 138 127 C 138 126 138 126 139 126 C 139 126 140 126 140 127 L 140 127 L 139 298 Z"
    />
  </svg>
</template>
<style scoped lang="scss">
svg { opacity: 0.85; }
</style>
<style lang="scss">
.camera-container { clip-path: url("#shade");}
</style>