215 lines
6.5 KiB
XML
215 lines
6.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 200" width="800" height="200">
|
|
<!-- SYNTAXIS Full Logo with Animation -->
|
|
<!-- Animated icon on the left, static text on the right -->
|
|
|
|
<!-- Animated Icon (scaled and positioned) -->
|
|
<g transform="translate(20, 20)">
|
|
<defs>
|
|
<style>
|
|
/* Complete cycle: 16s total */
|
|
/* 0-4s: Assembly */
|
|
/* 4-12s: Ambient breathing (8s) */
|
|
/* 12-16s: Disassembly */
|
|
|
|
@keyframes fullCycle {
|
|
/* Assembly phase: 0-25% (0-4s) */
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0) rotate(180deg);
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
/* Ambient phase: 25-75% (4-12s) - stays assembled */
|
|
75% {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
/* Disassembly phase: 75-100% (12-16s) */
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0) rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
/* Breathing animation during ambient phase */
|
|
@keyframes breatheLoop {
|
|
/* No breathing during assembly (0-25%) */
|
|
0%, 25% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Breathing during ambient phase (25-75%) */
|
|
37.5% { /* Middle of first breath in ambient */
|
|
transform: scale(1.03);
|
|
opacity: 0.95;
|
|
}
|
|
50% { /* Middle of ambient phase */
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
62.5% { /* Middle of second breath in ambient */
|
|
transform: scale(1.03);
|
|
opacity: 0.95;
|
|
}
|
|
|
|
/* No breathing during disassembly (75-100%) */
|
|
75%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes breatheLoopMid {
|
|
0%, 25% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
37.5% {
|
|
transform: scale(1.04);
|
|
opacity: 0.92;
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
62.5% {
|
|
transform: scale(1.04);
|
|
opacity: 0.92;
|
|
}
|
|
75%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes breatheLoopInner {
|
|
0%, 25% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
37.5% {
|
|
transform: scale(1.05);
|
|
opacity: 0.9;
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
62.5% {
|
|
transform: scale(1.05);
|
|
opacity: 0.9;
|
|
}
|
|
75%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes floatLoop {
|
|
0%, 25% {
|
|
transform: translateY(0);
|
|
}
|
|
37.5% {
|
|
transform: translateY(-3px);
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
}
|
|
62.5% {
|
|
transform: translateY(3px);
|
|
}
|
|
75%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Apply animations - 16s cycle */
|
|
.piece {
|
|
animation: fullCycle 16s ease-in-out infinite;
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
}
|
|
|
|
/* Stagger the pieces */
|
|
.a1 { animation-delay: 0s; }
|
|
.a2 { animation-delay: 0.3s; }
|
|
.a3 { animation-delay: 0.6s; }
|
|
.a4 { animation-delay: 0.9s; }
|
|
.a5 { animation-delay: 1.2s; }
|
|
.a-center { animation-delay: 1.5s; }
|
|
|
|
/* Breathing layers */
|
|
.outer-layer {
|
|
animation: breatheLoop 16s ease-in-out infinite;
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
}
|
|
|
|
.mid-layer {
|
|
animation: breatheLoopMid 16s ease-in-out infinite;
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
}
|
|
|
|
.inner-layer {
|
|
animation: breatheLoopInner 16s ease-in-out infinite;
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
}
|
|
|
|
.center-float {
|
|
animation: floatLoop 16s ease-in-out infinite;
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
}
|
|
</style>
|
|
|
|
<linearGradient id="syntaxisGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#3B7CB8;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#D97706;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Outer layer - Top and bottom diamonds -->
|
|
<g class="outer-layer">
|
|
<path class="piece a1" d="M 100 20 L 110 30 L 100 40 L 90 30 Z" fill="#2C5F8E"/>
|
|
<path class="piece a5" d="M 100 140 L 110 150 L 100 160 L 90 150 Z" fill="#2C5F8E"/>
|
|
</g>
|
|
|
|
<!-- Mid layer - Second and fourth rows -->
|
|
<g class="mid-layer">
|
|
<path class="piece a2" d="M 70 50 L 80 60 L 70 70 L 60 60 Z" fill="#2C5F8E"/>
|
|
<rect class="piece a2" x="90" y="50" width="20" height="20" fill="#757773"/>
|
|
<path class="piece a2" d="M 130 50 L 140 60 L 130 70 L 120 60 Z" fill="#2C5F8E"/>
|
|
|
|
<path class="piece a4" d="M 70 110 L 80 120 L 70 130 L 60 120 Z" fill="#2C5F8E"/>
|
|
<rect class="piece a4" x="90" y="110" width="20" height="20" fill="#757773"/>
|
|
<path class="piece a4" d="M 130 110 L 140 120 L 130 130 L 120 120 Z" fill="#2C5F8E"/>
|
|
</g>
|
|
|
|
<!-- Inner layer - Center row sides -->
|
|
<g class="inner-layer">
|
|
<path class="piece a3" d="M 40 80 L 50 90 L 40 100 L 30 90 Z" fill="#2C5F8E"/>
|
|
<rect class="piece a3" x="60" y="80" width="20" height="20" fill="#757773"/>
|
|
<rect class="piece a3" x="120" y="80" width="20" height="20" fill="#757773"/>
|
|
<path class="piece a3" d="M 160 80 L 170 90 L 160 100 L 150 90 Z" fill="#2C5F8E"/>
|
|
</g>
|
|
|
|
<!-- Center triangle - floats -->
|
|
<g class="center-float">
|
|
<path class="piece a-center" d="M 100 80 L 115 105 L 85 105 Z" fill="#D97706"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- SYNTAXIS Wordmark (Static) -->
|
|
<text x="234" y="105" font-family="Inter, -apple-system, system-ui, sans-serif" font-size="48" font-weight="700" fill="url(#syntaxisGradient)" letter-spacing="-1">SYNTAXIS</text>
|
|
|
|
<!-- Tagline (Static) -->
|
|
<text x="234" y="144" font-family="Inter, -apple-system, system-ui, sans-serif" font-size="23" font-weight="400" fill="#6B7280" letter-spacing="0.5">Systematic Orchestration</text>
|
|
</svg>
|