Skip to content

Logo loader #545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pyramation merged 2 commits into from
Jan 2, 2026
Merged

Logo loader #545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
081bdc3
loader
pyramation Jan 2, 2026
f52ba7b
loader
pyramation Jan 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 121 additions & 0 deletions assets/loader.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 65 additions & 3 deletions graphql/server/src/errors/404-message.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,9 +212,71 @@ export default (message = "We’re really sorry about that. The service you were
<section>
<article>
<div class="vcntr">
<div class="logo fade-in-cls">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.95 61.24"><path d="M16.36 43.47a14.56 14.56 0 01-8.79 0A11.16 11.16 0 011 38.34a8.83 8.83 0 01-.45-1A8.09 8.09 0 01.76 31a10.08 10.08 0 013.68-4.17 6.23 6.23 0 01-.24-.65A8.17 8.17 0 014.68 20a10.47 10.47 0 014.53-4.53 13.25 13.25 0 012.12-.9 12.35 12.35 0 012.5-7.45A17.35 17.35 0 0122.7 1a22.38 22.38 0 0113.48 0 17.07 17.07 0 019.42 6.9 18.75 18.75 0 019.8.4 14 14 0 018.29 6.46 10.17 10.17 0 01.78 1.83 10 10 0 01-.59 7.56 13.05 13.05 0 01-5.64 5.64A17.05 17.05 0 0155.4 31l-39 12.45zM64.92 36q-1.05 4.48-10.54 7.63l-.36.12L15 56.22a9.87 9.87 0 01-1.91.41C6.88 57.55 2.16 54.78 0 51.24a8.2 8.2 0 00.56 3.2 7.45 7.45 0 00.45 1 11.09 11.09 0 006.56 5.13 14.64 14.64 0 008.79 0l39-12.45a17.07 17.07 0 002.84-1.2 13 13 0 005.64-5.63 10.19 10.19 0 001-5.27zm0-8.59q-1.05 4.49-10.54 7.64l-.36.12L15 47.64a9.84 9.84 0 01-1.91.4C6.88 49 2.16 46.19 0 42.65a8.28 8.28 0 00.56 3.21 8.83 8.83 0 00.45 1A11.16 11.16 0 007.57 52a14.64 14.64 0 008.79 0l39-12.45a17.05 17.05 0 002.84-1.19 13.05 13.05 0 005.64-5.64 10.17 10.17 0 001-5.27zM9 39.13a10.11 10.11 0 006 0l39-12.45a12.25 12.25 0 002.06-.87 8.52 8.52 0 003.7-3.62 5.52 5.52 0 00.37-4.19 6.6 6.6 0 00-.46-1A9.57 9.57 0 0054 12.68a14.17 14.17 0 00-8.48 0l-.16.05-.2.07-2 .69-.84-2c-.07-.16-.12-.27-.14-.33l-.18-.27a12.26 12.26 0 00-7.2-5.51 17.85 17.85 0 00-10.73 0 12.81 12.81 0 00-6.56 4.44 7.58 7.58 0 00-1.47 6l.45 2.29-2.31.4c-.27 0-.5.09-.68.13s-.46.12-.66.19a8.31 8.31 0 00-1.47.62A5.88 5.88 0 008.78 22a3.71 3.71 0 00-.24 2.79 3.77 3.77 0 00.31.7c.07.13.15.26.24.4.1.14.19.27.29.39l2 2.44-3 1.13a9.92 9.92 0 00-.94.44 5.79 5.79 0 00-2.59 2.57 3.57 3.57 0 00-.1 2.83 4.9 4.9 0 00.22.48 6.69 6.69 0 003.92 3z" fill="#01a1ff"/></svg>

<div class="logo">
<svg viewBox="-115 -900 440 1450" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes cube0 {
0%, 0% { transform: translate(0.0px, -600.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
35.7%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube1 {
0%, 8.6% { transform: translate(0.0px, -680.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
44.3%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube2 {
0%, 17.1% { transform: translate(0.0px, -760.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
52.9%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube3 {
0%, 25.7% { transform: translate(0.0px, -840.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
61.4%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube4 {
0%, 34.3% { transform: translate(0.0px, -920.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
70%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube5 {
0%, 42.9% { transform: translate(0.0px, -1000.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
78.6%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
.cube-0 { animation: cube0 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-1 { animation: cube1 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-2 { animation: cube2 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-3 { animation: cube3 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-4 { animation: cube4 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-5 { animation: cube5 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
</style>
<g class="cube-0">
<path d="M103.923 300 L207.846 360 L207.846 480 L103.923 420 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M311.769 300 L207.846 360 L207.846 480 L311.769 420 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 240 L311.769 300 L207.846 360 L103.923 300 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-1">
<path d="M0 360 L103.923 420 L103.923 540 L0 480 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 360 L103.923 420 L103.923 540 L207.846 480 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 300 L207.846 360 L103.923 420 L0 360 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-2">
<path d="M103.923 -60 L207.846 0 L207.846 120 L103.923 60 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M311.769 -60 L207.846 0 L207.846 120 L311.769 60 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 -120 L311.769 -60 L207.846 0 L103.923 -60 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-3">
<path d="M-103.923 300 L0 360 L0 480 L-103.923 420 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 300 L0 360 L0 480 L103.923 420 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M0 240 L103.923 300 L0 360 L-103.923 300 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-4">
<path d="M0 0 L103.923 60 L103.923 180 L0 120 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 0 L103.923 60 L103.923 180 L207.846 120 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 -60 L207.846 0 L103.923 60 L0 0 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-5">
<path d="M-103.923 180 L0 240 L0 360 L-103.923 300 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 180 L0 240 L0 360 L103.923 300 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M0 120 L103.923 180 L0 240 L-103.923 180 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
</svg>
</div>
<div class="textc">
<h1>Not Found</h1>
Expand Down
68 changes: 65 additions & 3 deletions graphql/server/src/errors/404.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,71 @@ export default `
<section>
<article>
<div class="vcntr">
<div class="logo fade-in-cls">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.95 61.24"><path d="M16.36 43.47a14.56 14.56 0 01-8.79 0A11.16 11.16 0 011 38.34a8.83 8.83 0 01-.45-1A8.09 8.09 0 01.76 31a10.08 10.08 0 013.68-4.17 6.23 6.23 0 01-.24-.65A8.17 8.17 0 014.68 20a10.47 10.47 0 014.53-4.53 13.25 13.25 0 012.12-.9 12.35 12.35 0 012.5-7.45A17.35 17.35 0 0122.7 1a22.38 22.38 0 0113.48 0 17.07 17.07 0 019.42 6.9 18.75 18.75 0 019.8.4 14 14 0 018.29 6.46 10.17 10.17 0 01.78 1.83 10 10 0 01-.59 7.56 13.05 13.05 0 01-5.64 5.64A17.05 17.05 0 0155.4 31l-39 12.45zM64.92 36q-1.05 4.48-10.54 7.63l-.36.12L15 56.22a9.87 9.87 0 01-1.91.41C6.88 57.55 2.16 54.78 0 51.24a8.2 8.2 0 00.56 3.2 7.45 7.45 0 00.45 1 11.09 11.09 0 006.56 5.13 14.64 14.64 0 008.79 0l39-12.45a17.07 17.07 0 002.84-1.2 13 13 0 005.64-5.63 10.19 10.19 0 001-5.27zm0-8.59q-1.05 4.49-10.54 7.64l-.36.12L15 47.64a9.84 9.84 0 01-1.91.4C6.88 49 2.16 46.19 0 42.65a8.28 8.28 0 00.56 3.21 8.83 8.83 0 00.45 1A11.16 11.16 0 007.57 52a14.64 14.64 0 008.79 0l39-12.45a17.05 17.05 0 002.84-1.19 13.05 13.05 0 005.64-5.64 10.17 10.17 0 001-5.27zM9 39.13a10.11 10.11 0 006 0l39-12.45a12.25 12.25 0 002.06-.87 8.52 8.52 0 003.7-3.62 5.52 5.52 0 00.37-4.19 6.6 6.6 0 00-.46-1A9.57 9.57 0 0054 12.68a14.17 14.17 0 00-8.48 0l-.16.05-.2.07-2 .69-.84-2c-.07-.16-.12-.27-.14-.33l-.18-.27a12.26 12.26 0 00-7.2-5.51 17.85 17.85 0 00-10.73 0 12.81 12.81 0 00-6.56 4.44 7.58 7.58 0 00-1.47 6l.45 2.29-2.31.4c-.27 0-.5.09-.68.13s-.46.12-.66.19a8.31 8.31 0 00-1.47.62A5.88 5.88 0 008.78 22a3.71 3.71 0 00-.24 2.79 3.77 3.77 0 00.31.7c.07.13.15.26.24.4.1.14.19.27.29.39l2 2.44-3 1.13a9.92 9.92 0 00-.94.44 5.79 5.79 0 00-2.59 2.57 3.57 3.57 0 00-.1 2.83 4.9 4.9 0 00.22.48 6.69 6.69 0 003.92 3z" fill="#01a1ff"/></svg>

<div class="logo">
<svg viewBox="-115 -900 440 1450" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes cube0 {
0%, 0% { transform: translate(0.0px, -600.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
35.7%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube1 {
0%, 8.6% { transform: translate(0.0px, -680.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
44.3%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube2 {
0%, 17.1% { transform: translate(0.0px, -760.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
52.9%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube3 {
0%, 25.7% { transform: translate(0.0px, -840.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
61.4%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube4 {
0%, 34.3% { transform: translate(0.0px, -920.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
70%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
@keyframes cube5 {
0%, 42.9% { transform: translate(0.0px, -1000.0px) rotate(0.0deg) scale(1.00); opacity: 0; }
78.6%, 100% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.00); opacity: 1; }
}
.cube-0 { animation: cube0 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-1 { animation: cube1 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-2 { animation: cube2 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-3 { animation: cube3 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-4 { animation: cube4 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
.cube-5 { animation: cube5 1.40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; transform-origin: center; }
</style>
<g class="cube-0">
<path d="M103.923 300 L207.846 360 L207.846 480 L103.923 420 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M311.769 300 L207.846 360 L207.846 480 L311.769 420 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 240 L311.769 300 L207.846 360 L103.923 300 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-1">
<path d="M0 360 L103.923 420 L103.923 540 L0 480 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 360 L103.923 420 L103.923 540 L207.846 480 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 300 L207.846 360 L103.923 420 L0 360 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-2">
<path d="M103.923 -60 L207.846 0 L207.846 120 L103.923 60 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M311.769 -60 L207.846 0 L207.846 120 L311.769 60 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 -120 L311.769 -60 L207.846 0 L103.923 -60 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-3">
<path d="M-103.923 300 L0 360 L0 480 L-103.923 420 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 300 L0 360 L0 480 L103.923 420 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M0 240 L103.923 300 L0 360 L-103.923 300 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-4">
<path d="M0 0 L103.923 60 L103.923 180 L0 120 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M207.846 0 L103.923 60 L103.923 180 L207.846 120 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 -60 L207.846 0 L103.923 60 L0 0 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
<g class="cube-5">
<path d="M-103.923 180 L0 240 L0 360 L-103.923 300 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M103.923 180 L0 240 L0 360 L103.923 300 Z" fill="#01A1FF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
<path d="M0 120 L103.923 180 L0 240 L-103.923 180 Z" fill="#FFFFFF" stroke="#01A1FF" stroke-width="10" stroke-linejoin="round"/>
</g>
</svg>
</div>
<div class="textc">
<h1>Not Found</h1>
Expand Down
Loading