mirror of
https://github.com/misenhower/splatoon3.ink.git
synced 2026-04-25 07:18:35 -05:00
48 lines
4.0 KiB
Vue
48 lines
4.0 KiB
Vue
<template>
|
|
<svg
|
|
viewBox="0 0 36 36"
|
|
width="36"
|
|
height="36"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M18 36C8.058 36 0 27.942 0 18S8.058 0 18 0s18 8.058 18 18-8.058 18-18 18Zm14.72-18c0-8.13-6.59-14.72-14.72-14.72S3.28 9.87 3.28 18 9.87 32.72 18 32.72 32.72 26.13 32.72 18Z" :fill="a_css" />
|
|
<path d="m14.706 18.056 2.842 1.214.048-.1c-.848-1.114-1.186-2.598-1.186-2.598l-1.348-.786-2.69-1.57c-.912 1.482-.628 3.384-.628 3.384.986.172 2.522 1.04 2.874 1.246l.032-.028c-.48-.86-.582-1.986-.582-1.986l.37.154c-.03.392.262 1.07.262 1.07h.006ZM17.588 24.908l-.276-.008.016-3.468c-.738-.912-1.808-1.736-3.454-2.598-1.71-.896-3.354-1.194-4.68-1.196-1.03 0-1.868.18-2.394.398-1.258.524-3.31 2.23-2.102 6.26 1.198 3.998 4.38 4.92 4.428 4.934 2.69-1.248 3.106-4.864 3.106-4.864l-.148-.102c-.146.342-.636.904-1.124.914a.59.59 0 0 1-.27-.056c-.854-.392-1.14-1.84-.64-2.432.226-.268.524-.594 1.398-.59.524.002 1.256.126 2.306.452 1.368.426 2.116.984 2.534 1.442.43.472.6 1.084.254 1.076-.136 0-.35-.098-.658-.338-.488-.376-.764-.9-.846-1.328-.35-.39-2.168-.792-2.208-.802 1.37 3.926 3.538 5.43 4.648 5.422a.957.957 0 0 0 .206-.022c.916-.196 1.528-1.296 1.136-3.244a4.5 4.5 0 0 1-1.234.144l.002.006Z" :fill="a_css" />
|
|
|
|
<path d="m19.714 15.148-2.474 1.856.064.092c1.39-.176 2.842.272 2.842.272l.876-.5c.384-1.128.982-1.966 1.738-2.768.116-.124.234-.24.352-.352-.758-.634-1.52-.934-1.52-.934-.642.768-2.164 1.666-2.516 1.868l.008.042c.986.014 2.01.49 2.01.49l-.318.244c-.324-.222-1.058-.308-1.058-.308l-.004-.002ZM11.624 15.282a4.51 4.51 0 0 1 .512-1.214l.144-.234 3.244 1.894c1.146-.19 2.382-.704 3.93-1.684 2.9-1.838 4.062-4.438 4.228-5.73.174-1.352-.276-3.982-4.37-4.95s-6.488 1.37-6.488 1.37c-.264 2.954 2.66 5.122 2.66 5.122l.164-.078c-.264-.352-.556-1.276-.048-1.636.766-.544 2.164-.068 2.426.662.19.528.42 1.288-1.732 3.274-1.052.972-1.91 1.34-2.516 1.474-.866.192-1.718-.192-.438-.718.568-.234 1.162-.212 1.574-.068.52-.11 1.8-1.514 1.8-1.514-4.358-.828-6.784.508-7.106 1.506-.276.854.308 1.886 2.02 2.526l-.004-.002Z" :fill="b_css" />
|
|
<path d="M18 0C11.124 0 5.15 3.856 2.118 9.522l2.464 2.424c2.31-5.108 7.446-8.666 13.416-8.666 4.914 0 9.262 2.41 11.936 6.11l3.352-.894C30.11 3.396 24.452 0 18 0Z" :fill="b_css" />
|
|
|
|
<path d="M20.84 23.48a3.97 3.97 0 0 1-.136-.488c-.21-.958-.222-2.256-.222-2.614l-.038-.012c-.504.846-1.428 1.496-1.428 1.496v-.012h-.002l-.052-.398c.354-.17.796-.762.796-.762l-.37-3.058-.11.008c-.542 1.292-1.656 2.326-1.656 2.326l-.008 1.846v-.004l-.016 2.82c1.724.048 3.218-1.126 3.244-1.146l-.002-.002ZM23.694 27.544c1.082.826 3.586 1.752 6.472-1.308 2.688-2.852 2.154-5.86 2.068-6.258-.004-.022-.008-.034-.008-.034-2.426-1.706-5.766-.258-5.766-.258l-.014.168c.426-.05 1.324.146 1.43.722.004.022.008.044.01.066.088.936-1.022 1.908-1.786 1.77-.552-.1-1.326-.28-1.97-3.138v-.012c-.318-1.398-.208-2.324-.022-2.916.21-.666.724-1.144.844-.652.036.134.04.342 0 .642-.082.61-.398 1.112-.728 1.396-.072.22-.004.686.096 1.142.13.59.312 1.162.312 1.162 2.308-2.678 2.812-4.98 2.566-6.198-.064-.304-.174-.542-.314-.698-.652-.722-1.99-.674-3.558.802l-.008-.006a8.63 8.63 0 0 0-.358.358c-.686.728-1.208 1.462-1.566 2.36l.01-.006c-.446 1.112-.636 2.472-.558 4.378.026.642.106 1.244.226 1.804.52 2.43 1.78 4.068 2.62 4.71l.002.004Z" :fill="c_css" />
|
|
<path d="m33.288 8.496-3.352.892a14.653 14.653 0 0 1 2.784 8.61c0 7.626-5.8 13.898-13.232 14.646l-.884 3.342h.006c9.658-.322 17.388-8.252 17.388-17.988 0-3.488-.994-6.744-2.712-9.504l.002.002Z" :fill="c_css" />
|
|
</svg>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
a: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
b: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
c: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
function toRgba(color) {
|
|
return `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${color.a})`;
|
|
}
|
|
|
|
const _default = {r: 1, g: 1, b: 1, a: 1};
|
|
|
|
const a_css = computed(() => toRgba(props.a ?? _default));
|
|
const b_css = computed(() => toRgba(props.b ?? _default));
|
|
const c_css = computed(() => toRgba(props.c ?? _default));
|
|
</script>
|