<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 820" role="img" aria-labelledby="title desc">
  <title id="title">From complexity to strategic direction</title>
  <desc id="desc">Fine organic paths connect ideas, market, audience and data, then converge into clarity, direction and impact.</desc>
  <defs>
    <filter id="soft" x="-35%" y="-35%" width="170%" height="170%"><feGaussianBlur stdDeviation="42"/></filter>
    <filter id="grain" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency=".015" numOctaves="4" seed="8"/><feColorMatrix values="0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 0 0.075 0 0 0 .16 0"/></filter>
    <radialGradient id="sphere" cx="36%" cy="30%"><stop offset="0" stop-color="#f05a4e"/><stop offset=".42" stop-color="#d52f27"/><stop offset="1" stop-color="#a91410"/></radialGradient>
    <linearGradient id="fade" x1="0" x2="1"><stop offset="0" stop-color="white" stop-opacity=".92"/><stop offset=".7" stop-color="white"/><stop offset="1" stop-color="white" stop-opacity=".08"/></linearGradient>
    <linearGradient id="smokeVerticalFade" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="black"/><stop offset=".14" stop-color="white"/><stop offset=".82" stop-color="white"/><stop offset="1" stop-color="black"/></linearGradient>
    <mask id="edgeFade"><rect width="1600" height="820" fill="url(#fade)"/></mask>
    <mask id="smokeFade"><rect width="1600" height="820" fill="url(#smokeVerticalFade)"/></mask>
    <style>
      @font-face{font-family:Inter;src:url('fonts/inter-var.ttf') format('truetype')}.fine{fill:none;stroke:#262624;stroke-width:.8;opacity:.38}.ghost{fill:none;stroke:#4e4e4a;stroke-width:.65;opacity:.2;stroke-dasharray:2 8}.main{fill:none;stroke:#111;stroke-width:1.45}.label{font:500 11px Inter,Arial,sans-serif;letter-spacing:4px;fill:#242422}.axis{fill:none;stroke:#8c8c87;stroke-width:.6;opacity:.36}.flow{fill:#cf2e27}.sphere-core,.pulse{transform-origin:1110px 552px;animation:heartbeat 2.4s ease-in-out infinite}.charge-ring{fill:none;stroke:#cf2e27;stroke-width:2;stroke-dasharray:65 290;transform-origin:1110px 552px;animation:charge 4.8s linear infinite}
      @media(prefers-reduced-motion:reduce){.flow{display:none}.pulse,.sphere-core,.charge-ring{animation:none!important}}
      @keyframes heartbeat{0%,100%{transform:scale(1)}10%{transform:scale(1.08)}18%{transform:scale(1)}28%{transform:scale(1.045)}40%{transform:scale(1)}}@keyframes charge{to{stroke-dashoffset:-355;transform:rotate(360deg)}}
    </style>
  </defs>
  <rect width="1600" height="820" fill="#ecebe7"/>
  <g mask="url(#edgeFade)">
    <g opacity=".22" filter="url(#soft)" mask="url(#smokeFade)"><ellipse cx="250" cy="350" rx="170" ry="245" fill="#20201e"/><ellipse cx="430" cy="500" rx="235" ry="190" fill="#111"/><ellipse cx="610" cy="470" rx="170" ry="135" fill="#2d2d2a"/></g>
    <g>
      <path id="p1" class="fine" d="M95 168 C210 35 335 105 264 278 S380 532 575 365 S692 238 820 414 S955 548 1110 552"/>
      <path id="p2" class="fine" d="M350 124 C330 272 532 175 486 380 S410 655 702 566 S900 465 1110 552"/>
      <path id="p3" class="fine" d="M505 210 C372 300 590 310 650 424 S820 590 1110 552"/>
      <path id="p4" class="fine" d="M76 355 C250 250 200 615 455 435 S710 360 805 470 S975 540 1110 552"/>
      <path id="p5" class="fine" d="M145 528 C310 445 285 700 520 630 S770 515 1110 552"/>
      <path id="p6" class="fine" d="M276 692 C250 575 530 720 635 590 S850 498 1110 552"/>
      <path id="p7" class="ghost" d="M168 88 C460 30 720 150 720 395 S860 628 1110 552"/>
      <path id="p8" class="ghost" d="M42 470 C120 720 425 770 655 650 S875 475 1110 552"/>
      <path id="p9" class="fine" d="M578 700 C690 585 740 690 850 590 S990 550 1110 552"/>
      <path class="main" d="M390 505 C540 310 710 600 858 445 S1000 552 1110 552 L1490 552"/>
      <path class="main" d="M1490 552 l-17 -15 M1490 552 l-17 15"/>
      <g class="ghost"><circle cx="1110" cy="552" r="84"/><circle cx="1110" cy="552" r="122"/><circle cx="1110" cy="552" r="158"/></g>
      <path class="axis" d="M1110 385 V714 M946 552 H1275"/>
      <circle class="pulse" cx="1110" cy="552" r="62" fill="#cf2e27" opacity=".13"/>
      <circle class="charge-ring" cx="1110" cy="552" r="58"/>
      <circle class="sphere-core" cx="1110" cy="552" r="43" fill="url(#sphere)"/>
      <g class="label"><text x="52" y="148">IDEAS</text><text x="322" y="103">MARKET</text><text x="474" y="190">COMPETITION</text><text x="34" y="335">AUDIENCE</text><text x="110" y="507">TRENDS</text><text x="91" y="566">INSIGHTS</text><text x="237" y="670">DATA</text><text x="230" y="746">CHALLENGES</text><text x="544" y="744">OPPORTUNITIES</text><text x="1270" y="526">DIRECTION</text></g>
      <g class="flow">
        <circle r="3"><animateMotion dur="13s" begin="-3s" repeatCount="indefinite"><mpath href="#p1"/></animateMotion></circle>
        <circle r="2.5"><animateMotion dur="16s" begin="-11s" repeatCount="indefinite"><mpath href="#p2"/></animateMotion></circle>
        <circle r="2.5"><animateMotion dur="9s" begin="-2s" repeatCount="indefinite"><mpath href="#p3"/></animateMotion></circle>
        <circle r="3"><animateMotion dur="18s" begin="-7s" repeatCount="indefinite"><mpath href="#p4"/></animateMotion></circle>
        <circle r="2.5"><animateMotion dur="12s" begin="-9s" repeatCount="indefinite"><mpath href="#p5"/></animateMotion></circle>
        <circle r="2.5"><animateMotion dur="15s" begin="-5s" repeatCount="indefinite"><mpath href="#p6"/></animateMotion></circle>
        <circle r="2"><animateMotion dur="17s" begin="-13s" repeatCount="indefinite"><mpath href="#p7"/></animateMotion></circle>
        <circle r="2"><animateMotion dur="14s" begin="-6s" repeatCount="indefinite"><mpath href="#p8"/></animateMotion></circle>
        <circle r="2.5"><animateMotion dur="10s" begin="-4s" repeatCount="indefinite"><mpath href="#p9"/></animateMotion></circle>
      </g>
    </g>
  </g>
</svg>
