syntaxis/assets/logos/animated/syntaxis-logo-horizontal-animated.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 120" width="500" height="120">
  <!-- SYNTAXIS Horizontal Logo - Animated -->

  <defs>
    <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>

  <style>
    .icon-piece {
      animation: assembleIn 0.5s ease-out backwards;
    }
    
    .text-reveal {
      animation: slideIn 0.8s ease-out backwards;
    }
    
    .tagline-reveal {
      animation: fadeIn 0.6s ease-out backwards;
    }
    
    @keyframes assembleIn {
      from {
        opacity: 0;
        transform: scale(0.3) rotate(180deg);
      }
      to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }
    
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    /* Stagger the animations */
    .i1 { animation-delay: 0s; }
    .i2 { animation-delay: 0.08s; }
    .i3 { animation-delay: 0.16s; }
    .i4 { animation-delay: 0.24s; }
    .i5 { animation-delay: 0.32s; }
    .i-center { animation-delay: 0.4s; animation-duration: 0.7s; }
    
    .text-reveal { animation-delay: 0.8s; }
    .tagline-reveal { animation-delay: 1.1s; }
  </style>
  
  <!-- Icon (scaled and positioned) -->
  <!-- Scale increased by 30%: 0.5 * 1.3 = 0.65 -->
  <!-- Moved up by 40%, then down by 20% -->
  <g transform="translate(10, -14) scale(0.65)">
    <!-- Top diamond -->
    <g class="icon-piece i1" 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="icon-piece i2" transform-origin="70 60">
      <path d="M 70 50 L 80 60 L 70 70 L 60 60 Z" fill="#2C5F8E"/>
    </g>
    <g class="icon-piece i2" transform-origin="100 60">
      <rect x="90" y="50" width="20" height="20" fill="#6B7280"/>
    </g>
    <g class="icon-piece i2" transform-origin="130 60">
      <path d="M 130 50 L 140 60 L 130 70 L 120 60 Z" fill="#2C5F8E"/>
    </g>
    
    <!-- Center row with triangle -->
    <g class="icon-piece i3" transform-origin="40 90">
      <path d="M 40 80 L 50 90 L 40 100 L 30 90 Z" fill="#2C5F8E"/>
    </g>
    <g class="icon-piece i3" transform-origin="70 90">
      <rect x="60" y="80" width="20" height="20" fill="#6B7280"/>
    </g>
    <g class="icon-piece i-center" transform-origin="100 92">
      <path d="M 100 80 L 115 105 L 85 105 Z" fill="#D97706"/>
    </g>
    <g class="icon-piece i3" transform-origin="130 90">
      <rect x="120" y="80" width="20" height="20" fill="#6B7280"/>
    </g>
    <g class="icon-piece i3" 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="icon-piece i4" transform-origin="70 120">
      <path d="M 70 110 L 80 120 L 70 130 L 60 120 Z" fill="#2C5F8E"/>
    </g>
    <g class="icon-piece i4" transform-origin="100 120">
      <rect x="90" y="110" width="20" height="20" fill="#6B7280"/>
    </g>
    <g class="icon-piece i4" 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="icon-piece i5" transform-origin="100 150">
      <path d="M 100 140 L 110 150 L 100 160 L 90 150 Z" fill="#2C5F8E"/>
    </g>
  </g>
  
  <!-- SYNTAXIS Wordmark -->
  <text class="text-reveal" x="130" y="50" font-family="Inter, -apple-system, system-ui, sans-serif" font-size="42" font-weight="700" fill="url(#syntaxisGradient)" letter-spacing="-1">SYNTAXIS</text>

  <!-- Tagline -->
  <text class="tagline-reveal" x="130" y="75" font-family="Inter, -apple-system, system-ui, sans-serif" font-size="18" font-weight="400" fill="#9CA3AF" letter-spacing="0.5">Systematic Orchestration</text>
</svg>