SVG Editor

<svg viewBox="0 0 800 500" width="800" height="500" xmlns="http://www.w3.org/2000/svg">
  <g id="demo-synthesis-symbol">
    <path id="symbol-wireframe" d="M 220 250 L 300 170 L 380 250 L 300 330 Z" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linejoin="round" />
    <circle id="node-top" cx="300" cy="170" r="32" fill="#6366f1" fill-opacity="0.9" />
    <circle id="node-left" cx="220" cy="250" r="32" fill="#3b82f6" fill-opacity="0.9" />
    <circle id="node-right" cx="380" cy="250" r="32" fill="#0ea5e9" fill-opacity="0.9" />
    <circle id="node-bottom" cx="300" cy="330" r="32" fill="#10b981" fill-opacity="0.9" />
    <circle id="node-core" cx="300" cy="250" r="16" fill="#ffffff" stroke="#0f172a" stroke-width="3" />
  </g>
  <g id="demo-typography">
    <rect id="badge-pill" x="440" y="195" width="130" height="26" rx="6" fill="#ede9fe" />
    <text id="badge-label" x="452" y="213" font-family="sans-serif" font-size="11" font-weight="bold" fill="#5b21b6">CORE PLATFORM</text>
    <text id="brand-heading" x="440" y="265" font-family="sans-serif" font-size="32" font-weight="bold" fill="#0f172a">Synthesis CMS</text>
    <text id="brand-tagline" x="440" y="298" font-family="sans-serif" font-size="14" fill="#64748b">Vektorovy editor a renderer</text>
  </g>
  <circle id="accent-node-1" cx="80" cy="80" r="10" fill="#cbd5e1" />
  <circle id="accent-node-2" cx="720" cy="420" r="14" fill="#cbd5e1" />
  <rect id="accent-rect-1" x="680" y="80" width="24" height="24" rx="4" fill="#e2e8f0" />
</svg>