slidev-theme-neversink 0.0.0

package/components/SpeechBubble.vue

@@ -0,0 +1,294 @@
+<script setup>
+import { computed } from 'vue'
+// import { colors } from '@unocss/preset-mini'
+
+// console.log(colors)
+
+const props = defineProps({
+  position: {
+    type: String,
+    default: 'b',
+    validator: (value) => ['t', 'l', 'r', 'b', 'bl', 'br', 'lt', 'tr'].includes(value),
+  },
+  shape: {
+    type: String,
+    default: '',
+    validator: (value) => ['', 'round', 'circle'].includes(value),
+  },
+  animation: {
+    type: String,
+    default: '',
+    validator: (value) => ['', 'pop', 'float'].includes(value),
+  },
+  color: {
+    type: String,
+    default: 'red-light',
+  },
+  textAlign: {
+    type: String,
+    default: 'left',
+  },
+  maxWidth: {
+    type: String,
+    default: '100%',
+  },
+  borderWidth: {
+    type: String,
+    default: '1px',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+
+const bubbleClasses = computed(() => {
+  return [colorscheme.value, 'speech-bubble', props.position, props.shape, props.animation]
+})
+
+const bubbleStyles = computed(() => ({
+  '--bubble-color': 'var(--neversink-bg-color)',
+  '--border-color': 'var(--neversink-fg-color)',
+  '--text-color': 'var(--neversink-text-color)',
+  '--text-align': props.textAlign,
+}))
+</script>
+
+<template>
+  <div :class="bubbleClasses" :style="bubbleStyles">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.speech-bubble p:first-child {
+  margin-top: 0;
+}
+
+.speech-bubble {
+  --arrow-w: 0.5em;
+  --arrow-h: 1em;
+  --bubble-corners: 2px;
+  --w: v-bind(props.maxWidth);
+  --border-size: v-bind(props.borderWidth);
+  text-align: var(--text-align);
+  height: fit-content;
+  font-weight: 400;
+  font-size: 1.1rem;
+  /*color: var(--text-color);*/
+  background-color: var(--bubble-color);
+  border-color: var(--border-color);
+  color: var(--text-color);
+  padding: 1em;
+  position: relative;
+  border-radius: var(--bubble-corners);
+  border-width: var(--border-size);
+  max-width: var(--w);
+  /*box-shadow: 3 3 4 var(--border-size) var(--border-color);*/
+}
+
+.speech-bubble p {
+  margin-top: 0;
+}
+
+.speech-bubble.round {
+  --bubble-corners: 1em;
+}
+
+.speech-bubble.circle {
+  --bubble-corners: 100%;
+  padding: 2em;
+}
+
+.speech-bubble:before,
+.speech-bubble:after {
+  content: '';
+  position: absolute;
+  bottom: calc(-1 * var(--arrow-h) * 2 + 0.5px);
+  left: 50%;
+  border-style: solid;
+  border-width: var(--arrow-h) var(--arrow-w);
+  border-color: var(--bubble-color) transparent transparent;
+}
+
+.speech-bubble:before {
+  border-width: calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
+  border-color: var(--border-color) transparent transparent;
+  bottom: calc(-1 * var(--arrow-h) * 2 - 2.5 * var(--border-size));
+  left: calc(50% - var(--border-size));
+}
+
+.speech-bubble.bl:after {
+  left: 10%;
+  border-style: solid;
+  border-width: var(--arrow-h) var(--arrow-w);
+  border-color: var(--bubble-color) transparent transparent;
+}
+
+.speech-bubble.bl:before {
+  left: calc(10% - var(--border-size));
+}
+
+.speech-bubble.br:after {
+  left: 88%;
+  border-style: solid;
+  border-width: var(--arrow-h) var(--arrow-w);
+  border-color: var(--bubble-color) transparent transparent;
+}
+
+.speech-bubble.br:before {
+  left: calc(88% - var(--border-size));
+}
+.speech-bubble.t:after {
+  border-color: transparent transparent var(--bubble-color);
+  bottom: auto;
+  top: calc(-1 * var(--arrow-h) * 2 + 0.5px);
+}
+
+.speech-bubble.t:before {
+  border-width: calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
+  border-color: transparent transparent var(--border-color);
+  bottom: auto;
+  top: calc(-1 * var(--arrow-h) * 2 - 2.5 * var(--border-size));
+}
+
+.speech-bubble.tl:after {
+  border-color: transparent transparent var(--bubble-color);
+  bottom: auto;
+  left: 10%;
+  top: calc(-1 * var(--arrow-h) * 2 + 0.5px);
+}
+
+.speech-bubble.tl:before {
+  border-width: calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
+  border-color: transparent transparent var(--border-color);
+  bottom: auto;
+  left: calc(10% - var(--border-size));
+  top: calc(-1 * var(--arrow-h) * 2 - 2.5 * var(--border-size));
+}
+
+.speech-bubble.tr:after {
+  border-color: transparent transparent var(--bubble-color);
+  bottom: auto;
+  left: 90%;
+  top: calc(-1 * var(--arrow-h) * 2 + 0.5px);
+}
+
+.speech-bubble.tr:before {
+  border-width: calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
+  border-color: transparent transparent var(--border-color);
+  bottom: auto;
+  left: calc(90% - var(--border-size));
+  top: calc(-1 * var(--arrow-h) * 2 - 2.5 * var(--border-size));
+}
+
+.speech-bubble.l:after {
+  border-color: transparent var(--bubble-color) transparent transparent;
+  bottom: auto;
+  border-width: var(--arrow-w) var(--arrow-h);
+  top: calc(50% - var(--arrow-w));
+  left: calc(-1 * var(--arrow-h) * 2 + 0.5px);
+}
+
+.speech-bubble.l:before {
+  border-width: calc(var(--arrow-w) + var(--border-size)) calc(var(--arrow-h) + var(--border-size));
+  border-color: transparent var(--border-color) transparent transparent;
+  bottom: auto;
+  top: calc(50% - var(--arrow-w) - var(--border-size));
+  left: calc(-1 * var(--arrow-h) * 2 - 2.5 * var(--border-size));
+}
+
+.speech-bubble.r:after {
+  border-color: transparent transparent transparent var(--bubble-color);
+  bottom: auto;
+  left: auto;
+  border-width: var(--arrow-w) var(--arrow-h);
+  top: calc(50% - var(--arrow-w));
+  right: calc(-1 * var(--arrow-h) * 2 + 0.5px);
+}
+
+.speech-bubble.r:before {
+  border-width: calc(var(--arrow-w) + var(--border-size)) calc(var(--arrow-h) + var(--border-size));
+  border-color: transparent transparent transparent var(--border-color);
+  bottom: auto;
+  left: auto;
+  top: calc(50% - var(--arrow-w) - var(--border-size));
+  right: calc(-1 * var(--arrow-h) * 2 - 2.5 * var(--border-size));
+}
+
+.speech-bubble.pop {
+  animation-name: pop;
+  animation-duration: 0.5s;
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.speech-bubble.float {
+  animation-name: float-up;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease;
+}
+
+.speech-bubble.r.float {
+  animation-name: float-left;
+}
+
+.speech-bubble.l.float {
+  animation-name: float-right;
+}
+
+.speech-bubble.t.float {
+  animation-name: float-down;
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(0.8);
+  }
+  80% {
+    transform: scale(1.1);
+  }
+  90% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes float-up {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(calc(-1 * var(--arrow-h)));
+  }
+}
+
+@keyframes float-left {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(calc(-1 * var(--arrow-h)));
+  }
+}
+
+@keyframes float-right {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(var(--arrow-h));
+  }
+}
+
+@keyframes float-down {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(var(--arrow-h));
+  }
+}
+</style>

package/components/StickyNote.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'amber-light',
+  },
+  textAlign: {
+    type: String,
+    default: 'left',
+  },
+  width: {
+    type: String,
+    default: '180px',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+
+const stickyClasses = computed(() => {
+  return [colorscheme.value, 'sticky-note']
+})
+
+const stickyStyles = computed(() => ({
+  '--sticky-color': 'var(--neversink-bg-color)',
+  '--border-color': 'var(--neversink-fg-color)',
+  '--text-color': 'var(--neversink-text-color)',
+  '--text-align': props.textAlign,
+  '--width': props.width,
+}))
+</script>
+
+<template>
+  <div :class="stickyClasses" :style="stickyStyles">
+    <template v-if="props.title !== ''"
+      ><strong>{{ props.title }}</strong></template
+    >
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.sticky-note {
+  width: var(--width);
+  height: var(--width);
+  background-color: var(--sticky-color, yellow);
+  text-align: var(--text-align, left);
+  max-width: 100%;
+  padding: 1em;
+  position: relative;
+  box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.1);
+  font-weight: 400;
+  font-size: 0.8rem;
+  color: var(--text-color);
+  border: 0.4px solid var(--border-color);
+}
+.sticky-note strong {
+  display: block;
+  font-size: 0.8rem;
+  font-family: monospace;
+  letter-spacing: 0em;
+  word-spacing: -0.3em;
+}
+</style>

package/components/vue3-kawaii/README.md

@@ -0,0 +1,5 @@
+# vue3-kawaii
+
+Vue-kawaii is a collection of vue components that render cute characters. It is a vue port for react-kawaii.
+The original repo is for vue2 and hasn't been updated. Here I used Claude 3.5 and updated the code to work with
+Vue 3. I might someday host the full package on npm, but for now, I'm just using the components in this project.

package/components/vue3-kawaii/components/backpack/BackPack.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './backpackpaths.js'
+import getUniqueId from '../../utils/getUniqueId.js'
+import Face from '../common/face/Face.vue'
+import Wrapper from '../common/wrapper/Wrapper.vue'
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 240,
+  },
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'blissful',
+  },
+  color: {
+    type: String,
+    default: '#FFD882',
+  },
+})
+
+const width = computed(() => props.size * 0.63)
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" :width="width" :height="size" viewBox="0 0 138 218">
+      <defs>
+        <path id="pocket__shape-path" :d="paths.pocketShapePath" />
+        <path id="pocket__shape__shadow-path" :d="paths.pocketShapeShadowPath" />
+      </defs>
+      <g id="kawaii-backpack" transform="translate(0 -1)">
+        <g id="right-shoulder-strap" transform="matrix(-1 0 0 1 125.901 13.054)">
+          <path id="right-shoulder-strap__back" :fill="color" d="M0 5.948v43.619l13.879-14.792z" />
+          <path
+            id="right-shoulder-strap__back__shadow"
+            fill="#FFF"
+            fill-rule="nonzero"
+            opacity="0.4"
+            d="M0 5.948v43.619l13.879-14.792z"
+          />
+          <path id="right-shoulder-strap__front" :fill="color" d="M9.193 34.697L0 5.127 21.014 0l7.735 24.677z" />
+        </g>
+        <g id="left-shoulder-strap" transform="translate(11.896 13.054)">
+          <path id="left-shoulder-strap__back" :fill="color" d="M0 5.948v43.619l13.879-14.792z" />
+          <path
+            id="left-shoulder-strap__back_shadow"
+            fill="#FFF"
+            fill-rule="nonzero"
+            opacity="0.4"
+            d="M0 5.948v43.619l13.879-14.792z"
+          />
+          <path id="left-shoulder-strap__front" :fill="color" d="M9.193 34.697L0 5.127 21.014 0l7.735 24.677z" />
+        </g>
+        <g id="hanging-loop" transform="translate(47.585)">
+          <path id="hanging-loop__back" :fill="color" d="M16.853 7.931h9.913L21.81.991z" />
+          <path
+            id="hanging-loop__back_shadow"
+            fill="#121212"
+            fill-rule="nonzero"
+            opacity="0.14"
+            d="M16.853 7.931h9.913L21.81.991z"
+          />
+          <path id="hanging-loop__shape" :fill="color" :d="paths.hangingLoopShape" />
+        </g>
+        <g id="main-compartment" transform="translate(0 26.617)">
+          <path id="main-compartment__shape" :fill="color" :d="paths.mainCompartmentShape" />
+          <path
+            id="main-compartment__bottom-stripe"
+            fill="#121212"
+            fill-rule="nonzero"
+            :d="paths.mainCompartmentBottomStripe"
+            opacity="0.07"
+          />
+          <Face :mood="mood" transform="translate(36 70)" :uniqueId="uniqueId" />
+          <path
+            id="main-compartment__top"
+            fill="#121212"
+            fill-rule="nonzero"
+            :d="paths.mainCompartmentTop"
+            opacity="0.07"
+          />
+        </g>
+        <g id="pocket" transform="translate(12.888 135.981)">
+          <mask id="mask-4" fill="#fff">
+            <use xlink:href="#pocket__shape-path" />
+          </mask>
+          <use id="pocket__shape" :fill="color" xlink:href="#pocket__shape-path" />
+          <mask id="mask-6" fill="#fff">
+            <use xlink:href="#pocket__shape__shadow-path" />
+          </mask>
+          <use
+            id="pocket__shape__shadow"
+            fill="#121212"
+            fill-rule="nonzero"
+            opacity="0.14"
+            xlink:href="#pocket__shape__shadow-path"
+          />
+          <g id="Group-6" mask="url(#mask-6)">
+            <g transform="translate(0 15.862)">
+              <path id="Rectangle-7" fill="#33363B" opacity="0.408" d="M0 2.974h113.014v2.974H0z" />
+              <path id="Rectangle-7-Copy" fill="#555D67" opacity="0.408" d="M0 0h113.014v2.974H0z" />
+              <path id="Rectangle-8" fill="#6D727A" opacity="0.587" d="M107.066 0h5.948v5.948h-5.948z" />
+              <path id="zip" fill="#49505A" :d="paths.zip" opacity="0.746" />
+            </g>
+          </g>
+          <g id="brand" mask="url(#mask-6)">
+            <g transform="translate(78.737 39.368)">
+              <path id="Rectangle-6" fill="#FFFDFD" d="M0 0h27.789v18.526H0z" />
+              <path id="Rectangle-6-Copy" fill="#121212" opacity="0.298" d="M1.158 1.158h25.474v16.211H1.158z" />
+              <path id="brand" fill="#FFF" d="M2.316 2.316h23.158v13.895H2.316z" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/backpack/backpackpaths.js

@@ -0,0 +1,17 @@
+const paths = {
+  pocketShapePath:
+    'M11.329 0h90.555c7.42 0 11.13 2.538 11.13 7.614v49.828c0 5.325-3.36 7.987-10.082 7.987H11.414c-8.474 0-12.23-2.6-11.267-7.802V7.263C.147 2.42 3.875 0 11.33 0z',
+  pocketShapeShadowPath:
+    'M11.329 0h90.555c7.42 0 11.13 2.538 11.13 7.614v49.828c0 5.325-3.36 7.987-10.082 7.987H11.414c-8.474 0-12.23-2.6-11.267-7.802V7.263C.147 2.42 3.875 0 11.33 0z',
+  hangingLoopShape:
+    'M0 33.872c3.088-9.656 5.841-16.215 8.258-19.678 1.945-2.786 4.895-4.488 6.72-6.462 3.444-3.722 5.393-6.574 6.665-6.574 1.12 0-3.688 3.488-5.891 10.96-1.04 3.529-2.014 10.78-2.919 21.754H0zm43.62.992H30.8c-.904-11.217-1.876-18.63-2.915-22.237-2.2-7.636-7.029-11.47-5.91-11.47 1.271 0 3.243 3.183 6.682 6.987 1.824 2.018 4.77 3.758 6.713 6.606 2.415 3.539 5.164 10.244 8.25 20.114z',
+  mainCompartmentShape:
+    'M68.899 0c38.235 0 68.898 34.267 68.898 76.539v93.207c0 14.095-10.283 21.584-22.966 21.584H22.966C10.283 191.33 0 183.84 0 169.746V76.54C0 34.267 30.664 0 68.899 0z',
+  mainCompartmentBottomStripe:
+    'M137.797 156.949v13.373c0 13.924-10.283 21.324-22.966 21.324H22.966c-12.683 0-22.966-7.4-22.966-21.324v-13.373h137.797z',
+  mainCompartmentTop:
+    'M137.797 82.423v-5.948C137.797 34.423 107.134.333 68.9.333S-.001 34.423 0 76.475v5.948C0 40.371 30.664 6.281 68.899 6.281s68.898 34.09 68.898 76.142z',
+  zip: 'M109.285 1.983h2.028l.547 8.922h-2.974l.4-8.922zm.592 6.94v.99h.991v-.99h-.99z',
+}
+
+export default paths

package/components/vue3-kawaii/components/browser/Browser.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './browserpaths.js'
+import getUniqueId from '../../utils/getUniqueId.js'
+import Face from '../common/face/Face.vue'
+import Wrapper from '../common/wrapper/Wrapper.vue'
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 180,
+  },
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'ko',
+  },
+  color: {
+    type: String,
+    default: '#FDA7DC',
+  },
+})
+
+const width = computed(() => props.size * 1.44)
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg
+      :width="width"
+      :height="size"
+      viewBox="0 0 200 139"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <g id="kawaii-browser">
+        <g id="kawaii-browser__body" fill-rule="nonzero">
+          <path :d="paths.shape" id="kawaii-browser__shape" :fill="color" />
+          <path :d="paths.shadow" id="kawaii-browser__shadow" fill="#121212" opacity=".1" />
+          <g id="address-bar" transform="translate(.097)">
+            <path :d="paths.addressBar" fill="#111" />
+            <ellipse fill="#FFF" cx="168.855" cy="10.901" rx="3.4" ry="3.395" />
+            <ellipse fill="#FFF" cx="180.074" cy="10.901" rx="3.4" ry="3.395" />
+            <g id="address" transform="translate(12.654 5.47)" fill="#FFF">
+              <rect x=".277" y=".163" width="145.775" height="10.563" rx="5.282" />
+            </g>
+          </g>
+        </g>
+        <Face :mood="mood" transform="translate(67 63)" :uniqueId="uniqueId" />
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/browser/browserpaths.js

@@ -0,0 +1,9 @@
+const paths = {
+  shape:
+    'M199.648 71.479V22.712C199.645 10.22 189.412-.003 176.902 0L22.74.006C10.233.006 0 10.228 0 22.72v92.044l.055-.01c.403 3.632 3.537 22.819 24.729 22.819 23.407 0 144.572 1.377 152.834 0 8.261-1.377 22.03-4.13 22.03-23.408V71.479z',
+  shadow:
+    'M134.155 138.181c22.682.029 40.563-.108 43.562-.608 8.262-1.377 22.03-4.13 22.03-23.408V22.712C199.746 10.22 189.513-.003 177.002 0h-10.427c12.449.071 22.607 10.265 22.61 22.712v91.453c0 19.277-13.769 22.031-22.03 23.408-2.515.42-15.497.583-33 .608z',
+  addressBar: 'M0 22.712C0 10.228 10.23.006 22.733.006L176.842 0c12.506-.003 22.736 10.22 22.738 22.712',
+}
+
+export default paths

package/components/vue3-kawaii/components/cat/Cat.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './catpaths.js'
+import getUniqueId from '../../utils/getUniqueId.js'
+import Face from '../common/face/Face.vue'
+import Wrapper from '../common/wrapper/Wrapper.vue'
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 320,
+  },
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'excited',
+  },
+  color: {
+    type: String,
+    default: '#596881',
+  },
+})
+
+const width = computed(() => props.size * 0.84)
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="size" viewBox="0 0 185 220">
+      <g id="Kawaii-Builder" fill="none" fill-rule="evenodd">
+        <g id="kawaii-cat">
+          <g id="kawaii-cat_tail" transform="translate(29.23 153.846)" fill-rule="nonzero">
+            <path
+              d="M45.487 29.59l3.18 5.077s-7.744 6.666-17.282 8.615C24.513 44.718.05 46.564.05 21.846s17.231-28.82 9.436-7.949c0 0-2.82 8.77.82 14.667 3.642 5.898 14.052 11.128 23.488 6.257l11.692-5.231z"
+              id="tail_inner_shadow"
+              :fill="color"
+            />
+            <path
+              d="M45.487 29.59l3.18 5.077s-7.744 6.666-17.282 8.615C24.513 44.718.05 46.564.05 21.846s17.231-28.82 9.436-7.949c0 0-2.82 8.77.82 14.667 3.642 5.898 14.052 11.128 23.488 6.257l11.692-5.231z"
+              id="tail_inner"
+              fill="#121212"
+              opacity="0.25"
+            />
+          </g>
+          <g id="kawaii-cat_legs" transform="translate(81 190)" :fill="color" fill-rule="nonzero">
+            <path :d="paths.legs" id="kawaii-cat_legs_inner" />
+          </g>
+          <g id="kawaii-cat_arms" transform="translate(58 132)" :fill="color" fill-rule="nonzero">
+            <path d="M55.949.205s27.948 51.641 2 53.898" id="arm-r" />
+            <path d="M13.641.205s-27.949 51.641-2 53.898" id="arm-l" />
+          </g>
+          <g
+            id="kawaii-cat_arms-shadow"
+            transform="translate(58 132)"
+            fill="#121212"
+            fill-rule="nonzero"
+            opacity="0.25"
+          >
+            <path d="M55.949.205s27.948 51.641 2 53.898" id="arm-r" />
+            <path d="M13.641.205s-27.949 51.641-2 53.898" id="arm-l" />
+          </g>
+          <path :d="paths.body" id="kawaii-cat_body" :fill="color" fill-rule="nonzero" />
+          <g id="kawaii-cat_ears" transform="translate(34 23)" fill="#121212" fill-rule="nonzero" opacity="0.25">
+            <path d="M103.795 2.897s18.718-8.974 13.077 8.975" id="kawaii-cat_ear-r" />
+            <path d="M14.923 2.538S-3.795-6.436 1.846 11.513" id="kawaii-cat_ear-l" />
+          </g>
+          <path
+            d="M92.243 190.282h.004v-48.667h-.004c7.075-.36 11.946-2.615 11.946-2.615 16.709 54.254-11.62 51.324-11.946 51.282-.376.042-28.705 2.972-11.945-51.282 0 0 4.869 2.255 11.942 2.615z"
+            id="kawaii-cat_belly"
+            fill="#121212"
+            fill-rule="nonzero"
+            opacity="0.25"
+          />
+          <Face :mood="mood" transform="translate(59 67)" :uniqueId="uniqueId" />
+          <path
+            d="M96.935 77.625c-.975-2.106-8.13-2.227-8.889 0-.47 1.458 2.746 4.454 4.372 4.373 1.663-.121 5.095-3.118 4.517-4.373z"
+            id="kawaii-cat_nose"
+            fill="#121212"
+            fill-rule="nonzero"
+          />
+          <path :d="paths.shadow" id="kawaii-cat_shadow" fill="#121212" fill-rule="nonzero" opacity="0.1" />
+        </g>
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/cat/catpaths.js

@@ -0,0 +1,8 @@
+const paths = {
+  body: 'M113.876 132.295c.91 2.705 21.818 65.749-6.184 65.397H77.846c-27.898.35-7.248-62.228-6.195-65.365-19.954-2.157-47.848-9.752-55.173-35.81-3.673-1.957-6.497-3.081-6.497-3.081l4.667-5.333S-3.096 89.64 1.109 85.436s13.333-15.744 13.333-15.744-11.23 2.103-9.128 0c1.044-1.044 6.153-3.788 12.67-8.442 3.162-9.69 8.325-17.38 14.502-23.48-4.482-10.424-.853-20.191 1.822-21.206 2.226-.83 14.75 3.197 21.214 5.384 4.043-6.006 6.53-12.307 6.53-12.307l5.333 4.667S65.846-3.436 70.05.769s15.744 13.334 15.744 13.334-2.103-11.231 0-9.129c2.051 2.052 10.667 19.795 27.436 33.077-9.487-7.436-22-14.41-37.949-21.23-10.77 4.615-19.897 9.076-27.641 13.64 8.462-5.743 14.41-20.82 14.41-20.82l5.334 4.667S65.846-3.436 70.05.769c4.2 4.2 15.712 13.308 15.744 13.334-.008-.041-2.099-11.227 0-9.129.862.863 2.885 4.5 6.187 9.412l.48-.018v-.009s.052 0 .153.004l.154-.004c.306.019.832.04 1.554.084 3.182-4.76 5.14-8.265 5.985-9.11 2.102-2.102 0 9.129 0 9.129s11.538-9.129 15.743-13.334 2.667 13.539 2.667 13.539L124.05 10s2.475 6.22 6.474 12.204c6.58-2.216 18.582-6.04 20.757-5.23 2.672 1.014 6.296 10.76 1.838 21.17 6.084 6.113 11.15 13.797 14.24 23.454 6.28 4.443 11.16 7.077 12.178 8.094 2.103 2.103-9.128 0-9.128 0s9.128 11.539 13.334 15.744c4.018 4.018-12.005 2.792-13.437 2.675l-.01.097 4.575 5.228s-2.6 1.034-6.054 2.846c-7.188 26.118-34.949 33.806-54.942 36.013z',
+  shadow:
+    'M167.36 61.598c6.28 4.443 11.16 7.077 12.178 8.094 2.103 2.103-9.128 0-9.128 0s9.128 11.539 13.334 15.744c4.018 4.018-12.005 2.792-13.437 2.675l-.01.097 4.575 5.228s-2.6 1.034-6.054 2.846c-7.17 26.053-34.81 33.768-54.791 35.996-.72.08-1.433-.184-2.142-.791.847-.136 1.701-.282 2.562-.44 23.176-4.238 50.835-16.837 47.912-53.816-3.869-48.949-50.714-59.804-69.841-62.199-.02-.224-.038-.448-.056-.673 0 0 .667.011 1.878.085a1.95 1.95 0 0 1 .132-.224c3.094-4.646 5.004-8.055 5.836-8.887 2.102-2.102 0 9.129 0 9.129s11.538-9.129 15.743-13.334 2.667 13.539 2.667 13.539L124.05 10s2.508 6.302 6.554 12.323c1.037-.522 2.307-.958 2.492-1.02 10.446-3.511 16.508-4.954 18.185-4.329 2.672 1.014 6.296 10.76 1.838 21.17 6.084 6.113 11.15 13.797 14.24 23.454z',
+  legs: 'M8.846 3.692C7.36 11.59 4.59 20.615 8.692 28.205c.667 1.23-1.897 1.487-2.513 1.59C4.744 29.949 3 29.333 2.231 28c-4.36-8.051.102-18.205 1.743-26.667C4.18.205 9.154 2 8.846 3.693zM14.128 14.359c-.256 4.872 1.026 9.692 2.667 14.205.872 2.36 6.564.872 5.743-1.436-1.487-4.154-2.717-8.513-2.615-12.923.103-3.23 1.026-6.308 2.256-9.282 1.129-2.82-4.153-2.718-5.025-.564h-.513c-1.282 3.23-2.359 6.513-2.513 10z',
+}
+
+export default paths