syntaxis/imgs/syntax_logo_a.svg

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