syntaxis/assets/logos/animated/syntaxis-logo-icon-animated.svg
Jesús Pérez 9cef9b8d57 refactor: consolidate configuration directories
Merge _configs/ into config/ for single configuration directory.
Update all path references.

Changes:
- Move _configs/* to config/
- Update .gitignore for new patterns
- No code references to _configs/ found

Impact: -1 root directory (layout_conventions.md compliance)
2025-12-26 18:36:23 +00:00

77 lines
2.5 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<!-- SYNTAXIS Icon - Animated Assembly -->
<style>
.shape {
animation: assembleIn 0.6s ease-out backwards;
}
@keyframes assembleIn {
from {
opacity: 0;
transform: scale(0) rotate(180deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
/* Stagger the animations */
.layer-1 { animation-delay: 0s; }
.layer-2 { animation-delay: 0.1s; }
.layer-3 { animation-delay: 0.2s; }
.layer-4 { animation-delay: 0.3s; }
.layer-5 { animation-delay: 0.4s; }
.center { animation-delay: 0.5s; animation-duration: 0.8s; }
</style>
<!-- Top diamond -->
<g class="shape layer-1" transform-origin="100 30">
<path d="M 100 20 L 110 30 L 100 40 L 90 30 Z" fill="#2C5F8E"/>
</g>
<!-- Second row -->
<g class="shape layer-2" transform-origin="70 60">
<path d="M 70 50 L 80 60 L 70 70 L 60 60 Z" fill="#2C5F8E"/>
</g>
<g class="shape layer-2" transform-origin="100 60">
<rect x="90" y="50" width="20" height="20" fill="#6B7280"/>
</g>
<g class="shape layer-2" transform-origin="130 60">
<path d="M 130 50 L 140 60 L 130 70 L 120 60 Z" fill="#2C5F8E"/>
</g>
<!-- Third row (center) -->
<g class="shape layer-3" transform-origin="40 90">
<path d="M 40 80 L 50 90 L 40 100 L 30 90 Z" fill="#2C5F8E"/>
</g>
<g class="shape layer-3" transform-origin="70 90">
<rect x="60" y="80" width="20" height="20" fill="#6B7280"/>
</g>
<g class="shape center" transform-origin="100 92">
<path d="M 100 80 L 115 105 L 85 105 Z" fill="#D97706"/>
</g>
<g class="shape layer-3" transform-origin="130 90">
<rect x="120" y="80" width="20" height="20" fill="#6B7280"/>
</g>
<g class="shape layer-3" transform-origin="160 90">
<path d="M 160 80 L 170 90 L 160 100 L 150 90 Z" fill="#2C5F8E"/>
</g>
<!-- Fourth row -->
<g class="shape layer-4" transform-origin="70 120">
<path d="M 70 110 L 80 120 L 70 130 L 60 120 Z" fill="#2C5F8E"/>
</g>
<g class="shape layer-4" transform-origin="100 120">
<rect x="90" y="110" width="20" height="20" fill="#6B7280"/>
</g>
<g class="shape layer-4" transform-origin="130 120">
<path d="M 130 110 L 140 120 L 130 130 L 120 120 Z" fill="#2C5F8E"/>
</g>
<!-- Bottom diamond -->
<g class="shape layer-5" transform-origin="100 150">
<path d="M 100 140 L 110 150 L 100 160 L 90 150 Z" fill="#2C5F8E"/>
</g>
</svg>