webview/src/modules/camera/ShadeTongueDown.vue

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


const Shade: SVGPathData[] = [
  'M5 205C5 205 32 47 72 13 73 11 74 9 75 8 78 5 87-1 119 5 146 9 158 7 163 5 171 2 178 1 185 3 193 5 201 9 209 19 227 41 252 91 259 161 259 161 266 201 273 205 273 205 252 326 218 348 216 349 214 350 212 352 205 358 190 367 168 367 146 366 120 367 107 368 101 368 94 367 88 365 72 358 41 339 26 294 7 232 3 215 3 215 3 215 0 205 5 205Z',
].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="M5 205C5 205 32 47 72 13 73 11 74 9 75 8 78 5 87-1 119 5 146 9 158 7 163 5 171 2 178 1 185 3 193 5 201 9 209 19 227 41 252 91 259 161 259 161 266 201 273 205 273 205 252 326 218 348 216 349 214 350 212 352 205 358 190 367 168 367 146 366 120 367 107 368 101 368 94 367 88 365 72 358 41 339 26 294 7 232 3 215 3 215 3 215 0 205 5 205Z"
    />
    <path
      id="interior"
      stroke="#fefefe"
      stroke-width="2"
      fill="none"
      d="M18 225C18 225 22 83 85 57 85 57 99 42 130 54 130 54 140 60 164 49 188 39 213 68 237 121 237 121 258 181 257 196 257 196 261 208 249 223 248 222 212 300 145 302 66 304 29 248 18 225M73 245C137 232 138 232 139 95M205 245C171 245 134 243 139 95"
    />
  </svg>
</template>
<style scoped lang="scss">
svg { opacity: 0.85; }
</style>
<style lang="scss">
.camera-container { clip-path: url("#shade");}
</style>