110 lines
3.4 KiB
Vue
110 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="logo-gradient-border flex-shrink-0 inline-block overflow-hidden">
|
|||
|
|
<!-- Neode logo - white or coloured -->
|
|||
|
|
<svg
|
|||
|
|
class="w-14 h-14 block logo-svg"
|
|||
|
|
viewBox="0 0 1024 1024"
|
|||
|
|
fill="none"
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
aria-label="Neode"
|
|||
|
|
>
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
|||
|
|
<stop offset="0%" stop-color="#f9aa4b" />
|
|||
|
|
<stop offset="50%" stop-color="#f7931a" />
|
|||
|
|
<stop offset="100%" stop-color="#e68a19" />
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<rect width="1024" height="1024" fill="#030202" />
|
|||
|
|
<rect
|
|||
|
|
v-for="(r, i) in rects"
|
|||
|
|
:key="i"
|
|||
|
|
:x="r.x"
|
|||
|
|
:y="r.y"
|
|||
|
|
:width="r.w"
|
|||
|
|
:height="r.h"
|
|||
|
|
:fill="mode === 'coloured' ? `url(#${gradientId})` : 'white'"
|
|||
|
|
class="logo-square"
|
|||
|
|
:class="{ 'logo-square-coloured': mode === 'coloured' }"
|
|||
|
|
:style="{ '--delay': delays[i] + 'ms' }"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|||
|
|
|
|||
|
|
const gradientId = 'logo-color-' + Math.random().toString(36).slice(2, 11)
|
|||
|
|
|
|||
|
|
// Parsed from favico-black.svg path - 20 rects
|
|||
|
|
const rects = [
|
|||
|
|
{ x: 357.614, y: 318, w: 71.007, h: 70.936 },
|
|||
|
|
{ x: 436.152, y: 318, w: 72.082, h: 70.936 },
|
|||
|
|
{ x: 515.766, y: 318, w: 72.082, h: 70.936 },
|
|||
|
|
{ x: 595.379, y: 318, w: 71.007, h: 70.936 },
|
|||
|
|
{ x: 595.379, y: 396.46, w: 71.007, h: 72.011 },
|
|||
|
|
{ x: 673.917, y: 396.46, w: 72.083, h: 72.011 },
|
|||
|
|
{ x: 278, y: 475.994, w: 72.083, h: 72.012 },
|
|||
|
|
{ x: 357.614, y: 475.994, w: 71.007, h: 72.012 },
|
|||
|
|
{ x: 436.152, y: 475.994, w: 72.082, h: 72.012 },
|
|||
|
|
{ x: 515.766, y: 475.994, w: 72.082, h: 72.012 },
|
|||
|
|
{ x: 595.379, y: 475.994, w: 71.007, h: 72.012 },
|
|||
|
|
{ x: 673.917, y: 475.994, w: 72.083, h: 72.012 },
|
|||
|
|
{ x: 278, y: 555.529, w: 72.083, h: 70.936 },
|
|||
|
|
{ x: 357.614, y: 555.529, w: 71.007, h: 70.936 },
|
|||
|
|
{ x: 595.379, y: 555.529, w: 71.007, h: 70.936 },
|
|||
|
|
{ x: 673.917, y: 555.529, w: 72.083, h: 70.936 },
|
|||
|
|
{ x: 357.614, y: 633.989, w: 71.007, h: 72.011 },
|
|||
|
|
{ x: 436.152, y: 633.989, w: 72.082, h: 72.011 },
|
|||
|
|
{ x: 515.766, y: 633.989, w: 72.082, h: 72.011 },
|
|||
|
|
{ x: 595.379, y: 633.989, w: 71.007, h: 72.011 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// Stagger delays (ms) - spread over ~4.5s load phase
|
|||
|
|
const delays = [0, 2341, 467, 1890, 312, 3456, 123, 2789, 567, 4123, 901, 1456, 234, 3789, 2678, 456, 847, 2912, 1891, 423]
|
|||
|
|
|
|||
|
|
type Mode = 'normal' | 'coloured'
|
|||
|
|
const mode = ref<Mode>('normal')
|
|||
|
|
let cycleCount = 0
|
|||
|
|
let intervalId: ReturnType<typeof setInterval> | null = null
|
|||
|
|
|
|||
|
|
const CYCLE_MS = 10000
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
intervalId = setInterval(() => {
|
|||
|
|
cycleCount++
|
|||
|
|
mode.value = cycleCount % 4 === 3 ? 'coloured' : 'normal'
|
|||
|
|
}, CYCLE_MS)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
if (intervalId) clearInterval(intervalId)
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.logo-svg {
|
|||
|
|
will-change: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-square {
|
|||
|
|
opacity: 0;
|
|||
|
|
animation: logo-square-in 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|||
|
|
animation-delay: var(--delay, 0ms);
|
|||
|
|
animation-fill-mode: both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-square-coloured {
|
|||
|
|
filter: drop-shadow(0 0 2px rgba(247, 147, 26, 0.4));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 0–45%: squares load in. 45–100%: full logo visible */
|
|||
|
|
@keyframes logo-square-in {
|
|||
|
|
0% { opacity: 0; transform: scale(0.95); }
|
|||
|
|
4% { opacity: 1; transform: scale(1); }
|
|||
|
|
45% { opacity: 1; transform: scale(1); }
|
|||
|
|
100% { opacity: 1; transform: scale(1); }
|
|||
|
|
}
|
|||
|
|
</style>
|