Newer
Older
smart-home-server / branding / logo-cube-square.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <defs>
    <linearGradient id="gradPurpleSq" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#6366f1"/>
      <stop offset="100%" style="stop-color:#8b5cf6"/>
    </linearGradient>
    <linearGradient id="gradOrangeSq" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#f97316"/>
      <stop offset="100%" style="stop-color:#fb923c"/>
    </linearGradient>
    <linearGradient id="gradTealSq" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#14b8a6"/>
      <stop offset="100%" style="stop-color:#2dd4bf"/>
    </linearGradient>
  </defs>

  <!-- Rounded square background -->
  <rect x="28" y="28" width="200" height="200" rx="40" fill="#1e1b4b"/>

  <!-- Isometric cube - center -->
  <g transform="translate(128, 128)">
    <!-- Top face -->
    <path d="M0 -36 L32 -18 L0 0 L-32 -18 Z"
          fill="url(#gradPurpleSq)"
          stroke="#4338ca"
          stroke-width="1"/>
    <!-- Right face -->
    <path d="M32 -18 L32 18 L0 36 L0 0 Z"
          fill="#6366f1"
          stroke="#4338ca"
          stroke-width="1"/>
    <!-- Left face -->
    <path d="M-32 -18 L0 0 L0 36 L-32 18 Z"
          fill="#8b5cf6"
          stroke="#4338ca"
          stroke-width="1"/>
  </g>

  <!-- Orbiting dots -->
  <circle cx="128" cy="58" r="5" fill="url(#gradOrangeSq)"/>
  <circle cx="198" cy="128" r="5" fill="url(#gradTealSq)"/>
  <circle cx="128" cy="198" r="5" fill="url(#gradOrangeSq)"/>
  <circle cx="58" cy="128" r="5" fill="url(#gradTealSq)"/>

  <!-- Orbit rings -->
  <ellipse cx="128" cy="128" rx="70" ry="70" fill="none" stroke="#4338ca" stroke-width="1" opacity="0.4"/>
</svg>