techadmin/sonith-website
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: Mesh als Logo-Cluster (v1.5.1)

Browse Source 
Das alte Random-Network-Mesh wirkte unbestimmt — neu als drei wiederholte
Sonith-Logo-Sterne in unterschiedlichen Skalen, sodass die Marken-DNA klar
durchscheint.

- Jeder Cluster: zentraler gefuellter Knoten + pulsierender Ring + 5
  strahlenfoermige Linien zu Aussenknoten in der originalen Logo-Anordnung
  (asymmetrisch nach rechts verlaengert wie im CI-Logo)
- Cluster A links-mitte (Skala 6, dominant), Cluster B rechts oben (3.5),
  Cluster C rechts unten (2.5) — gestaffelte Tiefe
- Ring atmet (scale + opacity), Core pulsiert mit Glow, Aussenknoten
  asynchron via inline animation-delay
- Linien als gestrichelte Petrol-Bahnen mit stroke-dashoffset-Datenfluss

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dominik Höfling
2026-05-05 00:04:59 +02:00
parent 82cea98b52
commit 21cd2c7c3f
5 changed files with 105 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+50 -37
View File
@@ -132,45 +132,58 @@
<div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-20"></div>
<div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-25"></div>
<!-- Animiertes Knoten-Mesh: greift das Logo-Motiv (Netzwerk-Knoten) auf
und transportiert visuell die MSP-/Netzwerk-Kompetenz.
Linien pulsieren mit Datenfluss-Effekt, Knoten leuchten zyklisch auf. -->
<!-- Logo-Cluster-Mesh: drei wiederholte Sonith-Logo-Sterne (zentraler Knoten +
pulsierender Ring + 5 strahlenfoermige Linien zu Aussenknoten in exakter
Logo-Anordnung, asymmetrisch nach rechts verlaengert). Vermittelt visuell
die Marken-DNA als Netzwerk-Cluster. -->
<svg class="hero-mesh absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<!-- Verbindungslinien (CI-Petrol) -->
<g class="mesh-lines" stroke="#067391" stroke-width="0.9" stroke-linecap="round" fill="none">
<line x1="180" y1="140" x2="380" y2="90"/>
<line x1="180" y1="140" x2="140" y2="380"/>
<line x1="180" y1="140" x2="300" y2="540"/>
<line x1="380" y1="90" x2="620" y2="180"/>
<line x1="620" y1="180" x2="880" y2="110"/>
<line x1="620" y1="180" x2="520" y2="460"/>
<line x1="880" y1="110" x2="1080" y2="280"/>
<line x1="1080" y1="280" x2="980" y2="480"/>
<line x1="980" y1="480" x2="740" y2="540"/>
<line x1="740" y1="540" x2="520" y2="460"/>
<line x1="740" y1="540" x2="860" y2="720"/>
<line x1="520" y1="460" x2="300" y2="540"/>
<line x1="520" y1="460" x2="560" y2="700"/>
<line x1="300" y1="540" x2="140" y2="380"/>
<line x1="300" y1="540" x2="560" y2="700"/>
<line x1="560" y1="700" x2="860" y2="720"/>
<line x1="1080" y1="280" x2="740" y2="540"/>
<!-- Cluster A — Hauptmotiv links-mitte (Skala 6) -->
<g class="logo-cluster cluster-a">
<line x1="300" y1="400" x2="216" y2="292"/>
<line x1="300" y1="400" x2="417" y2="296"/>
<line x1="300" y1="400" x2="574" y2="396"/>
<line x1="300" y1="400" x2="178" y2="401"/>
<line x1="300" y1="400" x2="308" y2="489"/>
<circle class="cluster-ring" cx="300" cy="400" r="32"/>
<circle class="cluster-core" cx="300" cy="400" r="18"/>
<circle class="node" cx="216" cy="292" r="8" style="animation-delay: -0.4s"/>
<circle class="node" cx="417" cy="296" r="8" style="animation-delay: -1.2s"/>
<circle class="node" cx="574" cy="396" r="8" style="animation-delay: -2.0s"/>
<circle class="node" cx="178" cy="401" r="8" style="animation-delay: -2.8s"/>
<circle class="node" cx="308" cy="489" r="8" style="animation-delay: -1.6s"/>
</g>
<!-- Knoten (CI-Sonith-Gelb) mit asynchroner Pulse-Animation -->
<g class="mesh-nodes" fill="#DEDC1E">
<circle class="node" cx="180" cy="140" r="4"/>
<circle class="node" cx="380" cy="90" r="3"/>
<circle class="node" cx="620" cy="180" r="5"/>
<circle class="node" cx="880" cy="110" r="3.5"/>
<circle class="node" cx="1080" cy="280" r="4"/>
<circle class="node" cx="980" cy="480" r="3"/>
<circle class="node" cx="740" cy="540" r="4.5"/>
<circle class="node" cx="520" cy="460" r="3.5"/>
<circle class="node" cx="300" cy="540" r="3"/>
<circle class="node" cx="140" cy="380" r="4"/>
<circle class="node" cx="560" cy="700" r="3"/>
<circle class="node" cx="860" cy="720" r="3.5"/>
<!-- Cluster B — Echo rechts oben (Skala 3.5) -->
<g class="logo-cluster cluster-b">
<line x1="900" y1="220" x2="851" y2="157"/>
<line x1="900" y1="220" x2="968" y2="160"/>
<line x1="900" y1="220" x2="1060" y2="218"/>
<line x1="900" y1="220" x2="829" y2="221"/>
<line x1="900" y1="220" x2="905" y2="272"/>
<circle class="cluster-ring" cx="900" cy="220" r="18.5"/>
<circle class="cluster-core" cx="900" cy="220" r="10.5"/>
<circle class="node" cx="851" cy="157" r="5" style="animation-delay: -0.8s"/>
<circle class="node" cx="968" cy="160" r="5" style="animation-delay: -2.4s"/>
<circle class="node" cx="1060" cy="218" r="5" style="animation-delay: -1.0s"/>
<circle class="node" cx="829" cy="221" r="5" style="animation-delay: -3.0s"/>
<circle class="node" cx="905" cy="272" r="5" style="animation-delay: -1.8s"/>
</g>
<!-- Cluster C — Echo rechts unten (Skala 2.5) -->
<g class="logo-cluster cluster-c">
<line x1="980" y1="620" x2="945" y2="575"/>
<line x1="980" y1="620" x2="1029" y2="577"/>
<line x1="980" y1="620" x2="1094" y2="619"/>
<line x1="980" y1="620" x2="929" y2="621"/>
<line x1="980" y1="620" x2="984" y2="657"/>
<circle class="cluster-ring" cx="980" cy="620" r="13"/>
<circle class="cluster-core" cx="980" cy="620" r="7.5"/>
<circle class="node" cx="945" cy="575" r="3.5" style="animation-delay: -2.2s"/>
<circle class="node" cx="1029" cy="577" r="3.5" style="animation-delay: -0.6s"/>
<circle class="node" cx="1094" cy="619" r="3.5" style="animation-delay: -1.4s"/>
<circle class="node" cx="929" cy="621" r="3.5" style="animation-delay: -2.6s"/>
<circle class="node" cx="984" cy="657" r="3.5" style="animation-delay: -3.2s"/>
</g>
</svg>
@@ -512,7 +525,7 @@
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
<span class="text-ci-gray/60 text-xs">v1.5.1</span>
</div>
<div class="flex items-center gap-6">
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>