70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<template>
|
|
<svg
|
|
viewBox="0 0 32 32"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
:class="{ 'is-animated': animated }"
|
|
class="base-logo-svg"
|
|
>
|
|
<defs>
|
|
<radialGradient id="logo-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
|
<stop offset="0%" stop-color="white" />
|
|
<stop offset="25%" stop-color="var(--q-primary, #1976D2)" stop-opacity="0.5" />
|
|
<stop offset="50%" stop-color="var(--q-primary, #1976D2)">
|
|
<animate
|
|
attributeName="offset"
|
|
values="1;0.6;1"
|
|
dur="6s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</stop>
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<rect class="logo-bg" width="32" height="32" rx="4" ry="4" fill="url(#logo-gradient)" />
|
|
|
|
<circle class="x" cx="16" cy="16" r="6" style="--t:scale(1.2)" fill="currentColor" />
|
|
<circle class="c" cx="7" cy="7" r="3" style="--t:translate(9px,9px)" fill="currentColor" />
|
|
<circle class="c" cx="28" cy="4" r="2" style="--t:translate(-12px,12px)" fill="currentColor" />
|
|
<circle class="c" cx="6" cy="26" r="4" style="--t:translate(10px,-10px)" fill="currentColor" />
|
|
<circle class="c" cx="26" cy="26" r="5" style="--t:translate(-10px,-10px)" fill="currentColor" />
|
|
|
|
<line class="l" x1="16" y1="16" x2="7" y2="7" pathLength="1" stroke="currentColor" />
|
|
<line class="l" x1="16" y1="16" x2="28" y2="4" pathLength="1" stroke="currentColor" />
|
|
<line class="l" x1="16" y1="16" x2="6" y2="26" pathLength="1" stroke="currentColor" />
|
|
<line class="l" x1="16" y1="16" x2="26" y2="26" pathLength="1" stroke="currentColor" />
|
|
</svg>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
animated: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.base-logo-svg {
|
|
.x, .c { transform-box: fill-box; }
|
|
.l { stroke-width: 1.5; }
|
|
|
|
&.is-animated {
|
|
.x { animation: expand-r 6s infinite; }
|
|
.c { animation: o 6s infinite; }
|
|
.l {
|
|
stroke-dasharray: 1;
|
|
stroke-dashoffset: 1;
|
|
animation: draw 6s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes expand-r { 50% { r: 8px; } }
|
|
@keyframes o { 50% { transform: var(--t); } }
|
|
@keyframes draw {
|
|
0%, 100% { stroke-dashoffset: 0; }
|
|
50% { stroke-dashoffset: 1; }
|
|
}
|
|
</style>
|