slidev-theme-neversink 0.0.0

package/components/vue3-kawaii/components/common/face/Face.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './facepaths.js'
+
+const props = defineProps({
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'blissful',
+  },
+  transform: {
+    type: String,
+    default: '',
+  },
+  uniqueId: {
+    type: String,
+    required: true,
+  },
+})
+
+const isJoyfulMood = computed(() => ['blissful', 'lovestruck', 'excited'].includes(props.mood))
+</script>
+
+<template>
+  <g id="kawaii-face" :transform="transform">
+    <defs>
+      <path :d="paths.defs" id="kawaii-face__path-1" />
+    </defs>
+    <g id="kawaii-face__mouth" transform="translate(18.000000, 16.000000)">
+      <g v-if="isJoyfulMood" id="kawaii-face__mouth__joy" transform="translate(0.000000, 1.000000)">
+        <mask :id="`kawaii-face__mask-2-${uniqueId}`" fill="white">
+          <use xlink:href="#kawaii-face__path-1" />
+        </mask>
+        <use id="Combined-Shape" fill="#000000" xlink:href="#kawaii-face__path-1" />
+        <path
+          :d="paths.tongue"
+          id="kawaii-face__tongue"
+          fill="#E74144"
+          :mask="`url(#kawaii-face__mask-2-${uniqueId})`"
+          transform="translate(15.000000, 11.431885) scale(1, -1) translate(-15.000000, -11.431885)"
+        />
+      </g>
+      <path v-if="mood === 'happy'" :d="paths.happy" id="kawaii-face__mouth__happy" fill="#000000" />
+      <ellipse
+        v-if="mood === 'shocked'"
+        id="kawaii-face__mouth__shocked"
+        cx="15"
+        cy="14"
+        rx="9"
+        ry="10"
+        fill="#000000"
+      />
+      <path
+        v-if="['sad', 'ko'].includes(mood)"
+        :d="paths.sad"
+        id="kawaii-face__mouth__sad"
+        fill="#000000"
+        transform="translate(14.999999, 5.500000) scale(1, -1) translate(-14.999999, -5.500000)"
+      />
+    </g>
+    <g id="kawaii-face__blush" transform="translate(0.000000, 15.000000)" fill="#000000" opacity="0.2">
+      <circle id="Oval" cx="3" cy="3" r="3" />
+      <circle id="Oval" cx="63" cy="3" r="3" />
+    </g>
+    <g id="kawaii-face__eyes" transform="translate(2.000000, 0.000000)" fill="#000000">
+      <g v-if="mood === 'blissful'" id="kawaii-face__eyes__arc" transform="translate(1.000000, 0.000000)">
+        <path :d="paths.bliss1" id="Fill-5" />
+        <path :d="paths.bliss2" id="Fill-5" />
+      </g>
+      <g
+        v-if="['happy', 'sad', 'shocked', 'excited'].includes(mood)"
+        id="kawaii-face__eyes__circle"
+        transform="translate(1.000000, 2.000000)"
+      >
+        <circle id="Oval-3" cx="4.5" cy="4.5" r="4.5" />
+        <circle id="Oval-3" cx="56.5" cy="4.5" r="4.5" />
+      </g>
+      <g
+        v-if="mood === 'lovestruck'"
+        id="kawaii-face__eyes__heart"
+        transform="translate(0.000000, 2.000000)"
+        fill-rule="nonzero"
+      >
+        <path :d="paths.lovestruck1" id="Shape" />
+        <path :d="paths.lovestruck2" id="Shape" />
+      </g>
+      <g v-if="mood === 'ko'" id="kawaii-face__eyes__ko" transform="translate(1.500000, 1.000000)" fill-rule="nonzero">
+        <path :d="paths.ko1" id="Cross" />
+        <path :d="paths.ko2" id="Cross" />
+      </g>
+    </g>
+  </g>
+</template>

package/components/vue3-kawaii/components/common/face/facepaths.js

@@ -0,0 +1,24 @@
+const paths = {
+  defs: 'M1.45656876,3.14684877 C1.45656876,3.14684877 1.45656876,3.14684877 1.45656876,3.14684877 L0,3.14685315 C0,2.31818182 0.346033696,1.50734266 0.949429952,0.922027972 C1.55390756,0.335664336 2.38979521,0 3.2440659,0 L25.9525272,0 C26.8067979,0 27.6416041,0.335664336 28.2460818,0.922027972 C28.8505594,1.50734266 29.1965931,2.31818182 29.1965931,3.14685315 C29.1890236,5.85734266 28.240675,8.44825175 26.7127199,10.6814685 C25.1771954,12.9104895 23.0317865,14.8122378 20.4040931,16.0227273 C18.6544603,16.8251748 16.6809868,17.3087413 14.5982965,17.3076923 C11.4666916,17.3076923 8.61299495,16.2241259 6.33025392,14.5951049 C4.0399434,12.9587413 2.264358,10.779021 1.16245695,8.33811189 C0.431460764,6.70909091 0.0010813553,4.95314685 0,3.14685315 L1.45656896,3.14685315 Z',
+  tongue:
+    'M9.59865983,9.95467851 C9.59865983,9.95467851 9.59865983,9.95467851 9.59865983,9.95467851 L9,9.95467851 C9,9.66740582 9.14222222,9.38631493 9.39022222,9.18340586 C9.63866667,8.98013316 10.3333333,8 15,8 C19.6666667,8 20.3608889,8.98013316 20.6093333,9.18340586 C20.8577778,9.38631493 21,9.66740582 21,9.95467851 C20.9968889,10.8943148 20.6071111,11.7924965 19.9791111,12.5666783 C19.348,13.3394055 18.4662222,13.9986781 17.3862222,14.4183144 C16.6671111,14.6964962 15.856,14.8641326 15,14.8637689 C13.7128889,14.8637689 12.54,14.4881326 11.6017778,13.9234054 C10.6604444,13.3561327 9.93066667,12.6004964 9.47777778,11.7543147 C9.17733333,11.1895875 9.00044444,10.5808603 9,9.95467851 L9.59865983,9.95467851 Z',
+  happy:
+    'M6,1.9999998 C6.00066667,3.14799969 6.26599997,4.26466625 6.7166666,5.29933281 C7.39599986,6.85066599 8.49066642,8.23599919 9.90199962,9.27666575 C11.3099995,10.311999 13.0693326,10.9999989 14.9999991,10.9999989 C16.283999,11.0006656 17.5006655,10.6939989 18.5793321,10.1833323 C20.1993319,9.41466574 21.5219985,8.20599919 22.468665,6.788666 C23.4106649,5.36999947 23.9953316,3.72333297 23.9999982,1.9999998 C23.9999982,0.895333245 23.104665,0 21.9999984,0 C20.8953319,0 19.9999986,0.895333245 19.9999986,1.9999998 C20.0006653,2.51933308 19.8739986,3.11066636 19.6166653,3.7006663 C19.233332,4.58733288 18.5526654,5.4513328 17.7299988,6.0519994 C16.9033323,6.65733268 15.9686657,6.99999931 14.9999991,6.99999931 C14.3513325,6.99999931 13.7259992,6.84799932 13.1299993,6.56666602 C12.2373327,6.14866606 11.4226661,5.4193328 10.8599995,4.57066622 C10.2919996,3.7246663 9.99533294,2.77733306 9.99999961,1.9999998 C9.99999961,0.895333245 9.10466636,0 7.9999998,0 C6.89533325,0 6,0.895333245 6,1.9999998',
+  sad: 'M6,1.9999998 C6.00066667,3.14799969 6.26599997,4.26466625 6.7166666,5.29933281 C7.39599986,6.85066599 8.49066642,8.23599919 9.90199962,9.27666575 C11.3099995,10.311999 13.0693326,10.9999989 14.9999991,10.9999989 C16.283999,11.0006656 17.5006655,10.6939989 18.5793321,10.1833323 C20.1993319,9.41466574 21.5219985,8.20599919 22.468665,6.788666 C23.4106649,5.36999947 23.9953316,3.72333297 23.9999982,1.9999998 C23.9999982,0.895333245 23.104665,7.10542736e-15 21.9999984,7.10542736e-15 C20.8953319,7.10542736e-15 19.9999986,0.895333245 19.9999986,1.9999998 C20.0006653,2.51933308 19.8739986,3.11066636 19.6166653,3.7006663 C19.233332,4.58733288 18.5526654,5.4513328 17.7299988,6.0519994 C16.9033323,6.65733268 15.9686657,6.99999931 14.9999991,6.99999931 C14.3513325,6.99999931 13.7259992,6.84799932 13.1299993,6.56666602 C12.2373327,6.14866606 11.4226661,5.4193328 10.8599995,4.57066622 C10.2919996,3.7246663 9.99533294,2.77733306 9.99999961,1.9999998 C9.99999961,0.895333245 9.10466636,7.10542736e-15 7.9999998,7.10542736e-15 C6.89533325,7.10542736e-15 6,0.895333245 6,1.9999998',
+  bliss1:
+    'M11.3298651,9.72876106 C9.83321993,9.72876106 8.62018766,8.55758439 8.62018766,7.11258087 C8.62018766,6.27104292 7.91115541,5.58647579 7.03954249,5.58647579 C6.16883282,5.58647579 5.45889734,6.27104292 5.45889734,7.11258087 C5.45889734,8.55758439 4.2467683,9.72876106 2.74921991,9.72876106 C1.25257476,9.72876106 0.0395424927,8.55758439 0.0395424927,7.11258087 C0.0395424927,3.38626826 3.18005862,0.354115435 7.03954249,0.354115435 C10.8999296,0.354115435 14.0395425,3.38626826 14.0395425,7.11258087 C14.0395425,8.55758439 12.8274135,9.72876106 11.3298651,9.72876106',
+  bliss2:
+    'M57.3298651,9.72876106 C55.8332199,9.72876106 54.6201877,8.55758439 54.6201877,7.11258087 C54.6201877,6.27104292 53.9111554,5.58647579 53.0395425,5.58647579 C52.1688328,5.58647579 51.4588973,6.27104292 51.4588973,7.11258087 C51.4588973,8.55758439 50.2467683,9.72876106 48.7492199,9.72876106 C47.2525748,9.72876106 46.0395425,8.55758439 46.0395425,7.11258087 C46.0395425,3.38626826 49.1800586,0.354115435 53.0395425,0.354115435 C56.8999296,0.354115435 60.0395425,3.38626826 60.0395425,7.11258087 C60.0395425,8.55758439 58.8274135,9.72876106 57.3298651,9.72876106',
+  lovestruck1:
+    'M11.980165,2.98190092 C11.8050001,1.25390423 10.4403753,0.000206846623 8.73257491,0.000206846623 C7.5948106,0.000206846623 6.55305237,0.548970938 5.96686143,1.42848278 C5.38597852,0.537594374 4.38691529,0 3.26738291,0 C1.55981331,0 0.194957712,1.25369738 0.0200235653,2.98169407 C0.00617653522,3.05802048 -0.0505962882,3.45971662 0.12203002,4.11479988 C0.370814995,5.05967525 0.945466744,5.91912297 1.78344285,6.59964836 C1.78344285,6.59964836 4.36682268,10 5.96409202,10 C7.56136137,10 10.216515,6.59985521 10.216515,6.59985521 C11.0544911,5.91912297 11.6291428,5.0598821 11.8779278,4.11479988 C12.0505541,3.45992347 11.9937813,3.05822732 11.980165,2.98190092 Z',
+  lovestruck2:
+    'M62.980165,2.98190092 C62.8050001,1.25390423 61.4403753,0.000206846623 59.7325749,0.000206846623 C58.5948106,0.000206846623 57.5530524,0.548970938 56.9668614,1.42848278 C56.3859785,0.537594374 55.3869153,0 54.2673829,0 C52.5598133,0 51.1949577,1.25369738 51.0200236,2.98169407 C51.0061765,3.05802048 50.9494037,3.45971662 51.12203,4.11479988 C51.370815,5.05967525 51.9454667,5.91912297 52.7834428,6.59964836 C52.7834428,6.59964836 55.3668227,10 56.964092,10 C58.5613614,10 61.216515,6.59985521 61.216515,6.59985521 C62.0544911,5.91912297 62.6291428,5.0598821 62.8779278,4.11479988 C63.0505541,3.45992347 62.9937813,3.05822732 62.980165,2.98190092 Z',
+  shocked1:
+    'M5.29976191,8.12776191 L7.18533333,10.0133333 C7.576,10.404 8.088,10.5993333 8.6,10.5993333 C9.11133333,10.5993333 9.62333333,10.404 10.014,10.0133333 C10.7953333,9.23266667 10.7953333,7.966 10.014,7.18533333 L8.12814284,5.29966667 L10.014,3.414 C10.7953333,2.63333333 10.7953333,1.36666667 10.014,0.586 C9.23266667,-0.195333333 7.96666667,-0.195333333 7.18533333,0.586 L5.29976191,2.47157143 L3.414,0.586 C2.63266667,-0.195333333 1.36733333,-0.195333333 0.586,0.586 C-0.195333333,1.36666667 -0.195333333,2.63333333 0.586,3.414 L2.47166667,5.29966667 L0.586,7.18533333 C-0.195333333,7.966 -0.195333333,9.23266667 0.586,10.0133333 C0.976666667,10.404 1.488,10.5993333 2,10.5993333 C2.512,10.5993333 3.02333333,10.404 3.414,10.0133333 L5.29976191,8.12776191 Z',
+  shocked2:
+    'M51.2997619,8.12776191 L53.1853333,10.0133333 C53.576,10.404 54.088,10.5993333 54.6,10.5993333 C55.1113333,10.5993333 55.6233333,10.404 56.014,10.0133333 C56.7953333,9.23266667 56.7953333,7.966 56.014,7.18533333 L54.1281428,5.29966667 L56.014,3.414 C56.7953333,2.63333333 56.7953333,1.36666667 56.014,0.586 C55.2326667,-0.195333333 53.9666667,-0.195333333 53.1853333,0.586 L51.2997619,2.47157143 L49.414,0.586 C48.6326667,-0.195333333 47.3673333,-0.195333333 46.586,0.586 C45.8046667,1.36666667 45.8046667,2.63333333 46.586,3.414 L48.4716667,5.29966667 L46.586,7.18533333 C45.8046667,7.966 45.8046667,9.23266667 46.586,10.0133333 C46.9766667,10.404 47.488,10.5993333 48,10.5993333 C48.512,10.5993333 49.0233333,10.404 49.414,10.0133333 L51.2997619,8.12776191 Z',
+  ko1: 'M52.9142136,5.03553391 L50.4393398,2.56066017 C49.8535534,1.97487373 49.8535534,1.02512627 50.4393398,0.439339828 C51.0251263,-0.146446609 51.9748737,-0.146446609 52.5606602,0.439339828 L55.0355339,2.91421356 L57.5104076,0.439339828 C58.0961941,-0.146446609 59.0459415,-0.146446609 59.631728,0.439339828 C60.2175144,1.02512627 60.2175144,1.97487373 59.631728,2.56066017 L57.1568542,5.03553391 L59.631728,7.51040764 C60.2175144,8.09619408 60.2175144,9.04594155 59.631728,9.63172798 C59.0459415,10.2175144 58.0961941,10.2175144 57.5104076,9.63172798 L55.0355339,7.15685425 L52.5606602,9.63172798 C51.9748737,10.2175144 51.0251263,10.2175144 50.4393398,9.63172798 C49.8535534,9.04594155 49.8535534,8.09619408 50.4393398,7.51040764 L52.9142136,5.03553391 Z',
+  ko2: 'M2.91421356,5.03553391 L0.439339828,2.56066017 C-0.146446609,1.97487373 -0.146446609,1.02512627 0.439339828,0.439339828 C1.02512627,-0.146446609 1.97487373,-0.146446609 2.56066017,0.439339828 L5.03553391,2.91421356 L7.51040764,0.439339828 C8.09619408,-0.146446609 9.04594155,-0.146446609 9.63172798,0.439339828 C10.2175144,1.02512627 10.2175144,1.97487373 9.63172798,2.56066017 L7.15685425,5.03553391 L9.63172798,7.51040764 C10.2175144,8.09619408 10.2175144,9.04594155 9.63172798,9.63172798 C9.04594155,10.2175144 8.09619408,10.2175144 7.51040764,9.63172798 L5.03553391,7.15685425 L2.56066017,9.63172798 C1.97487373,10.2175144 1.02512627,10.2175144 0.439339828,9.63172798 C-0.146446609,9.04594155 -0.146446609,8.09619408 0.439339828,7.51040764 L2.91421356,5.03553391 Z',
+}
+
+export default paths

package/components/vue3-kawaii/components/common/wrapper/Wrapper.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const wrapperStyle = computed(() => ({
+  width: 'fit-content',
+  display: 'inline-block',
+  paddingLeft: '5px',
+  paddingRight: '5px',
+  ...props.style,
+}))
+</script>
+
+<template>
+  <div :style="wrapperStyle">
+    <slot></slot>
+  </div>
+</template>

package/components/vue3-kawaii/components/creditCard/CreditCard.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './creditcardpaths.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: 200,
+  },
+  mood: {
+    type: String,
+    default: 'blissful',
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+  },
+  color: {
+    type: String,
+    default: '#83D1FB',
+  },
+})
+
+const uniqueId = computed(() => getUniqueId())
+</script>
+<template>
+  <Wrapper>
+    <svg
+      :width="size * 1.38"
+      :height="size"
+      viewBox="0 0 198 143"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g id="kawaii-creditCard">
+        <g id="kawaii-creditCard__body" fillRule="nonzero">
+          <path :d="paths.shape" id="kawaii-creditCard__shape" :fill="color" />
+          <path :d="paths.shadow" id="kawaii-creditCard__shadow" fill="#000" opacity=".1" />
+          <path id="kawaii-creditCard__stripe" fill="#000" d="M0 17h198v27H0z" />
+        </g>
+        <Face :mood="mood" transform="translate(66 73)" :uniqueId="uniqueId" />
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/creditCard/creditcardpaths.js

@@ -0,0 +1,8 @@
+const paths = {
+  shape:
+    'M187.018 143H10.982C4.916 143 0 138.097 0 132.047V10.953C0 4.903 4.916 0 10.982 0h176.036C193.084 0 198 4.903 198 10.953v121.094c0 6.05-4.916 10.953-10.982 10.953',
+  shadow:
+    'M176.018 143c6.066 0 10.982-4.903 10.982-10.953V10.953C187 4.903 182.084 0 176.018 0h11C193.084 0 198 4.903 198 10.953v121.094c0 6.05-4.916 10.953-10.982 10.953h-11z',
+}
+
+export default paths

package/components/vue3-kawaii/components/ghost/Ghost.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './ghostpaths.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: '#E0E4E8',
+  },
+})
+
+const width = computed(() => props.size * 0.77)
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg
+      :width="width"
+      :height="size"
+      viewBox="0 0 130 168"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <g id="kawaii-ghost">
+        <g id="kawaii-ghost__body">
+          <path :d="paths.shape" id="kawaii-ghost__shape" :fill="color" />
+          <path :d="paths.shadow" id="kawaii-ghost__shadow" fill-opacity=".1" fill="#000000" />
+        </g>
+        <Face :mood="mood" transform="translate(34 57)" :uniqueId="uniqueId" />
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/ghost/ghostpaths.js

@@ -0,0 +1,8 @@
+const paths = {
+  shape:
+    'M63.004.034C27.572 1.238 0 36.002 0 76.472v76.272c0 8.116 5.832 14.718 13 14.718s13-6.602 13-14.718c0-2.705 1.944-4.906 4.333-4.906 2.39 0 4.334 2.2 4.334 4.906 0 8.116 5.831 14.718 13 14.718 3.472 0 6.737-1.53 9.192-4.31 2.456-2.78 3.808-6.477 3.807-10.408 0-2.712 1.939-4.906 4.334-4.906 2.39 0 4.333 2.2 4.333 4.906 0 8.116 5.832 14.718 13 14.718 7.169 0 13-6.602 13-14.718 0-2.705 1.944-4.906 4.334-4.906 2.39 0 4.333 2.2 4.333 4.906 0 8.116 5.832 14.718 13 14.718s13-6.602 13-14.718V73.592c0-41.028-29.82-74.82-66.996-73.558z',
+  shadow:
+    'M111.5 166.08c4.427-2.35 7.5-7.444 7.5-13.336V73.592C119 35.918 93.857 4.346 60.962.412a6.603 6.603 0 0 1 2.042-.378C100.181-1.228 130 32.564 130 73.592v79.152c0 8.116-5.832 14.718-13 14.718-1.965 0-3.829-.496-5.5-1.383z',
+}
+
+export default paths

package/components/vue3-kawaii/components/iceCream/IceCream.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './icecreampaths.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: 300,
+  },
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'blissful',
+  },
+  color: {
+    type: String,
+    default: '#FDA7DC',
+  },
+})
+
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg
+      :width="size * 0.5"
+      :height="size"
+      viewBox="0 0 110 220"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <g id="kawaii-iceCream">
+        <g fill-rule="nonzero">
+          <path :d="paths.stick" id="kawaii-iceCream__stick" fill="#FCCB7E" />
+          <path :d="paths.shape" id="kawaii-iceCream__shape" :fill="color" />
+          <path :d="paths.shadow" id="kawaii-iceCream__shadow" fill="#000000" opacity=".1" />
+        </g>
+        <Face :mood="mood" transform="translate(22.000000, 81.000000)" :uniqueId="uniqueId" />
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/iceCream/icecreampaths.js

@@ -0,0 +1,9 @@
+const paths = {
+  stick: 'M56.142 219.63h-3.964c-4.36 0-7.927-3.53-7.927-7.843v-31.372h19.818v31.372c0 4.314-3.568 7.843-7.927 7.843z',
+  shape:
+    'M57.184 0h-4.34C24.19 0 .75 23.192.75 51.54v113.456c0 8.502 6.964 15.392 15.558 15.392H93.72c8.593 0 15.557-6.89 15.557-15.392V51.54C109.277 23.192 85.837 0 57.184 0z',
+  shadow:
+    'M83.97 180.388c8.593 0 15.557-6.89 15.557-15.392V51.54c0-27.41-21.913-49.998-49.264-51.464.938-.05 1.881-.076 2.83-.076h4.34c28.653 0 52.094 23.192 52.094 51.54v113.456c0 8.502-6.964 15.392-15.557 15.392h-10z',
+}
+
+export default paths

package/components/vue3-kawaii/components/mug/Mug.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './mugpaths.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: 170,
+  },
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'blissful',
+  },
+  color: {
+    type: String,
+    default: '#A6E191',
+  },
+})
+
+const width = computed(() => props.size * 1.5)
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg
+      :width="width"
+      :height="size"
+      viewBox="0 0 172 115"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <g id="kawaii-mug">
+        <g id="kawaii-mug__body" fill-rule="nonzero">
+          <path :d="paths.shape" id="kawaii-mug__shape" :fill="color" />
+          <path :d="paths.shadow" id="kawaii-mug__shadow" fill="#000" opacity=".1" />
+        </g>
+        <Face :mood="mood" transform="translate(71 42)" :uniqueId="uniqueId" />
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/mug/mugpaths.js

@@ -0,0 +1,7 @@
+const paths = {
+  shape:
+    'M17.591 22.258h21.5V5.565C39.091 2.49 41.718 0 44.955 0h121.181C169.374 0 172 2.49 172 5.565v70.483C172 97.526 153.588 115 130.955 115H80.136c-20.764 0-37.93-14.72-40.633-33.733C17.283 78.701 0 60.722 0 38.952c0-9.205 7.891-16.694 17.591-16.694zm20.627 47.704V33.387h-21.5c-3.233 0-5.863 2.496-5.863 5.565 0 15.485 11.835 28.37 27.363 31.01z',
+  shadow:
+    'M156.99 0h9.106C169.356 0 172 2.49 172 5.565v70.483C172 97.526 153.462 115 130.673 115h-16.89 7.784c22.79 0 41.327-17.474 41.327-38.952V5.565c0-3.074-2.644-5.565-5.903-5.565H106z',
+}
+export default paths

package/components/vue3-kawaii/components/planet/Planet.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './planetpaths.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: 190,
+  },
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'blissful',
+  },
+  color: {
+    type: String,
+    default: '#FCCB7E',
+  },
+})
+
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg
+      :width="size"
+      :height="size"
+      version="1.1"
+      viewBox="0 0 134 134"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <path :d="paths.shape" id="kawaii-planet__shape--path" />
+        <path :d="paths.shadow" id="kawaii-planet__shadow--path" />
+      </defs>
+      <g id="kawaii-planet">
+        <g id="kawaii-planet__body">
+          <mask id="mask-2" fill="#fff">
+            <use xlink:href="#kawaii-planet__shape--path" />
+          </mask>
+          <use id="kawaii-planet__shape" :fill="color" xlink:href="#kawaii-planet__shape--path" />
+          <mask id="mask-4" fill="#fff">
+            <use xlink:href="#kawaii-planet__shadow--path" />
+          </mask>
+          <use id="kawaii-planet__shadow" fill="#000000" opacity=".1" xlink:href="#kawaii-planet__shadow--path" />
+        </g>
+        <Face :mood="mood" transform="translate(34 57)" :uniqueId="uniqueId" />
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/planet/planetpaths.js

@@ -0,0 +1,7 @@
+const paths = {
+  shape: 'M67 134c37.003 0 67-29.997 67-67S104.003 0 67 0 0 29.997 0 67s29.997 67 67 67z',
+  shadow:
+    'M61.5 133.777C95.93 130.98 123 102.151 123 67 123 31.849 95.93 3.02 61.5.223A67.906 67.906 0 0 1 67 0c37.003 0 67 29.997 67 67s-29.997 67-67 67c-1.852 0-3.686-.075-5.5-.223z',
+}
+
+export default paths

package/components/vue3-kawaii/components/speechBubble/SpeechBubbleGuy.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from 'vue'
+import paths from './speechbubblepaths.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: 150,
+  },
+  mood: {
+    type: String,
+    validator(val) {
+      return ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'].includes(val)
+    },
+    default: 'blissful',
+  },
+  color: {
+    type: String,
+    default: '#83D1FB',
+  },
+})
+
+const uniqueId = computed(() => getUniqueId())
+</script>
+
+<template>
+  <Wrapper>
+    <svg
+      :width="size"
+      :height="size"
+      version="1.1"
+      viewBox="0 0 134 134"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <path :d="paths.shape" id="kawaii-speechBubble__shape--path" />
+        <path :d="paths.shadow" id="kawaii-speechBubble__shadow--path" />
+      </defs>
+      <g id="Kawaii-speechBubble">
+        <g id="Kawaii-speechBubble__body">
+          <mask fill="#fff">
+            <use xlink:href="#kawaii-speechBubble__shape--path" />
+          </mask>
+          <use id="Kawaii-speechBubble__shape" :fill="color" xlink:href="#kawaii-speechBubble__shape--path" />
+          <mask fill="#fff">
+            <use xlink:href="#kawaii-speechBubble__shadow--path" />
+          </mask>
+          <use
+            id="Kawaii-speechBubble__shadow"
+            fill="#000"
+            opacity=".1"
+            xlink:href="#kawaii-speechBubble__shadow--path"
+          />
+        </g>
+        <Face :mood="mood" transform="translate(34 57)" :uniqueId="uniqueId" />
+      </g>
+    </svg>
+  </Wrapper>
+</template>

package/components/vue3-kawaii/components/speechBubble/speechbubblepaths.js

@@ -0,0 +1,8 @@
+const paths = {
+  shape:
+    'M31.235 123.65L.717 131.824l8.355-31.172A66.718 66.718 0 0 1 0 67C0 30 29.997 0 67.002 0 104.001 0 134 29.999 134 67c0 37-30 67-66.998 67a66.62 66.62 0 0 1-35.767-10.35z',
+  shadow:
+    'M62.502.149a68.004 68.004 0 0 1 4.5-.149C104.001 0 134 29.999 134 67c0 37-30 67-66.998 67-1.514 0-3.016-.05-4.505-.148C97.401 131.539 125 102.489 125 66.999 125 31.511 97.403 2.464 62.502.15z',
+}
+
+export default paths

package/components/vue3-kawaii/utils/getUniqueId.js

@@ -0,0 +1,10 @@
+/*
+To prevent the SVGs masks being used with the same id
+*/
+const getUniqueId = () => {
+  const id = Math.random().toString(36).substring(2, 15)
+
+  return id
+}
+
+export default getUniqueId

package/docs/.vitepress/config.js

@@ -0,0 +1,75 @@
+import { defineConfig } from 'vitepress'
+import Unocss from 'unocss/vite'
+import { sub } from '@mdit/plugin-sub'
+import Mark from 'markdown-it-mark'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Slidev Theme Neversink',
+  description: 'An education/academia oriented Slidev theme with whimsical elements',
+  base: '/slidev-theme-neversink/',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Getting started', link: '/getting-started' },
+      { text: 'Example Deck', link: 'https://gureckis.github.io/slidev-theme-neversink/example/#1', target: '_self' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Documentation',
+        items: [
+          { text: 'Getting Started', link: '/getting-started' },
+          { text: 'Markdown Features', link: '/markdown' },
+          { text: 'Colors Schemes', link: '/colors' },
+          { text: 'Branding', link: '/branding' },
+          {
+            text: 'Layouts',
+            collapsed: false,
+            items: [
+              { text: 'Overview', link: '/layouts' },
+              { text: `cover`, link: '/layouts/cover' },
+              { text: `intro`, link: '/layouts/intro' },
+              { text: `default`, link: '/layouts/default' },
+              { text: `two-cols-title`, link: '/layouts/two-cols-title' },
+              { text: `top-title`, link: '/layouts/top-title' },
+              { text: `top-title-two-cols`, link: '/layouts/top-title-two-cols' },
+              { text: `side-title`, link: '/layouts/side-title' },
+              { text: `quote`, link: '/layouts/quote' },
+              { text: `section`, link: '/layouts/section' },
+              { text: `full`, link: '/layouts/full' },
+              { text: `credits`, link: '/layouts/credits' },
+            ],
+          },
+          {
+            text: 'Components',
+            collapsed: false,
+            items: [
+              { text: 'Overview', link: '/components' },
+              { text: 'Admonitions', link: '/components/admonitions' },
+              { text: 'SpeechBubble', link: '/components/speechbubble' },
+              { text: 'StickyNote', link: '/components/stickynote' },
+              { text: 'CreditScroll', link: '/components/creditscroll' },
+              { text: 'QRCode', link: '/components/qrcode' },
+              { text: 'Kawaii', link: '/components/kawaii' },
+            ],
+          },
+          { text: 'Customizing', link: '/customizing' },
+          { text: 'Contributing', link: '/contributing' },
+        ],
+      },
+    ],
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }],
+  },
+  markdown: {
+    config: (md) => {
+      md.use(sub)
+      md.use(Mark)
+    },
+  },
+  vite: {
+    plugins: [Unocss()],
+  },
+})