Logo Presentation
Steve Haring
Abstract mark — 4 connected nodes in flowing S-curve
Primary Mark — 01
Original-Quelle — 01b
Raster-Original
PNG
292×293px · RGBA · 12.9 KB
Quelle: steveharing.de/wp-content/uploads/2019/10/Logo.png
Quelle: steveharing.de/wp-content/uploads/2019/10/Logo.png
Vektor-Tracing
SVG
278×187px · SVG · 1.8 KB
Potrace 1.16 · 3 Pfade · 1-bit PBM Input
Potrace 1.16 · 3 Pfade · 1-bit PBM Input
Tracing-Prozess
Das Original-PNG wurde als 1-Bit-PBM (Portable Bitmap) konvertiert, mit Potrace 1.16
vektorisiert und in eine saubere SVG mit Gradient-Füllung überführt. Das Ergebnis ist
skalierbar ohne Qualitätsverlust und mit 1.8 KB ca. 7× kleiner als das Original-PNG.
Logo-Beschreibung — 02
Form
Vier miteinander verbundene Squircle-Knoten, angeordnet in einer
fließenden S-Kurve. Die Knoten sind durch dicke, organisch geschwungene
Röhren verbunden und bilden eine einzige, durchgehende Form.
Anordnung
Diagonal von oben-links nach unten-rechts, mit zwei verschlungenen
Elementen die sich in der Mitte kreuzen. Die Gesamtform erinnert an
ein stilisiertes ∞-Symbol oder eine Lemniskate.
Farbe
Linearer Farbverlauf von Violett-Blau (#7d7ed9)
nach Türkis-Cyan (#1dbbd3),
diagonal verlaufend von oben-links nach unten-rechts.
Wirkung
Modern, dynamisch, technisch. Die fließende Form vermittelt
Konnektivität, Datenfluss und Bewegung. Die organischen Kurven
soften die technische Ästhetik auf.
Varianten — 03
Full Color
Monochrome Dark
Monochrome Light
Reversed (Dark BG)
Spezifikationen — 04
| Format | SVG (Scalable Vector Graphics) |
| ViewBox | 0 0 584 586 |
| Seitenverhältnis | 1:1 (quadratisch) |
| Tracing | Potrace 1.16 · 3 Pfade · 1-bit PBM Input |
| Primärfarbe | #7d7ed9 (Violett-Blau) |
| Sekundärfarbe | #1dbbd3 (Türkis-Cyan) |
| Gradient | Linear · 135° · 4 Stops |
| Mindestgröße | 24px (Favicon) · 48px (Header) |
| Quelle | steveharing.de/wp-content/uploads/2019/10/Logo.png |
Verwendung — 05
HTML — Inline
<img src="steve-haring-logo.svg" alt="Steve Haring" width="120">
CSS — Background
.logo {
background-image: url('steve-haring-full-color.svg');
background-size: contain;
background-repeat: no-repeat;
width: 120px;
height: 120px;
}
SVG — Inline
<svg viewBox="0 0 584 586" width="120" height="120">
<g transform="translate(0,586) scale(0.1,-0.1)">
<path d="..." fill="url(#grad)"/>
...
</g>
</svg>