name: logomarks description: Entwerfen Sie neue geometrische Logomarks (Symbole, Buchstabenmarken und Monogramme) als saubere, einfarbige SVGs nach dem Standard des kostenlosen Logomarks-Sets auf logomarks.ai: das 512er Raster, exakte Passung, der Baukasten, die internen Prüfungen und der Stil des Sets. Verwenden Sie diese Fähigkeit beim Entwerfen neuer geometrischer Marken, beim Zeichnen oder Iterieren eines Logos, einer Markensymbols, einer Buchstabenmarke oder eines Monogramms, beim Überprüfen einer SVG-Marke gegen die Hausregeln oder beim Bearbeiten, Remixen oder Verfremden (Glitchen) eines vorhandenen Logomarks.
Was macht Logomarks?
3,797 kostenlose geometrische Logomarks von David Sherlock, alle nach einem Standard gezeichnet: https://logomarks.ai (CC0, Public Domain). Diese Fähigkeit beschreibt, wie Sie neue Marken entwerfen, die in dieses Set gehören, und wie Sie die vorhandenen überprüfen, bearbeiten und wiederverwenden können. (Um eine vorhandene Marke für ein Projekt auszuwählen und einzurichten, verwenden Sie die Fähigkeit „Logomarks-Auswahl“.)
Inhalt dieses Ordners:
SKILL.md: Diese Datei.scripts/kit.mjs: Der Geometrie-Baukasten, mit dem das Set erstellt wurde (Formen, echte Boole'sche Operationen, Weben, Isometrische Würfel und Isometrische Körper). Erfordertnpm install polygon-clipping(einepackage.jsonist enthalten).scripts/fit.mjs: Skaliert jede SVG-Marke auf den Standard und prüft sie. Keine Abhängigkeiten.scripts/examples.mjs: Sechs echte Marken aus dem Set, mit dem Baukasten neu erstellt.examples/: Ihre Ausgabe, bereits angepasst.
Verwenden der vorhandenen Marken
Die Website fungiert gleichzeitig als statische API. Nichts zu installieren:
https://logomarks.ai/marks.json: Jede Marke mitname,slug,file,tags(round, square, letter, number, symmetric, radial, solid, light, wide, tall, new) und gezeichneter Größe.https://logomarks.ai/svg/<slug>.svg: Die Marke selbst.https://logomarks.ai/marks/<slug>: Ihre Seite mit PNG-, Favicon- und Marken-Mock-up-Downloads.https://logomarks.ai/logomarks.zip: Alle zusammen.
Bevor Sie von Grund auf neu entwerfen, prüfen Sie, ob eine vorhandene Marke (oder ein Remix davon) zum Briefing passt. Rufen Sie marks.json ab und filtern Sie nach Tags und Namen.
Der Standard (nicht verhandelbar)
-
viewBox="0 0 512 512". -
Die längste Seite der Marke ist exakt 448, zentriert: ein Rand von 32, gemessen am tatsächlichen Umriss. Eine breite Marke ist 448 breit und kürzer; eine hohe ist 448 hoch. Niemals nach Augenmaß skalieren: Führen Sie
fit.mjsaus. -
Messen Sie die Geometrie, niemals die Leinwand. Während des Aufbaus kann eine Marke über 0–512 hinausragen (iso-Körper und hohe Stapel tun dies normalerweise). Das ist in Ordnung, solange der Anpassungsschritt den tatsächlichen Umriss misst. Bestimmen Sie die Grenzen einer Marke nicht, indem Sie sie innerhalb ihrer viewBox rendern: Alles außerhalb ist für dieses Rendering unsichtbar, die „Anpassung“ belässt es dann außerhalb, und die endgültige Datei wird am Rand abgeschnitten.
fit.mjsmisst jeden Punkt und jede Kurve, behandelt also Marken, die irgendwo gezeichnet wurden;fit.mjs --checklässt jede Marke durchfallen, die noch immer über die Leinwand hinausragt. -
Die gesamte Datei:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path fill-rule="evenodd" d="…"/> </svg> -
Nur gefüllte Pfade, in
currentColor. Keine Striche (diese umwandeln),<g>,transform,style, Masken, Clip-Pfade, IDs oder Text. Löcher sind echte Löcher (evenodd oder umgekehrte Wicklungsrichtung), niemals eine Form, die in einer Hintergrundfarbe gemalt ist. -
Koordinaten auf eine Dezimalstelle genau.
Arbeitsablauf
- Briefing lesen. Name, Tätigkeitsbereich des Unternehmens, das gewünschte Gefühl (ruhig, technisch, verspielt, hochwertig) und wo die Marke leben wird (App-Symbol, Favicon, Beschilderung). Die Verwendung in kleinen Größen begünstigt kräftige Marken mit wenigen Teilen.
- Eine Familie auswählen (siehe unten). Familien nicht in einer Marke mischen.
- 4–6 einzeilige Ideen schreiben. Jede muss eine einzige Idee sein: „eine Scheibe, durch einen S-förmigen Kanal geteilt“, nicht „eine Scheibe mit einem S, einem Punkt und Strahlen“. Buchstabenmarken verwenden den Anfangsbuchstaben des Namens.
- Die besten 2–3 mit dem Baukasten erstellen: Ein kurzes Skript, das Grundformen mit Booleschen Operationen kombiniert und
write()aufruft. Nur für sehr einfache Marken die Pfaddaten von Hand schreiben (siehe „Pfade von Hand schreiben“). - Anpassen:
node scripts/fit.mjs out/skaliert alle auf den Standard. - Überprüfen anhand der Checkliste. Betrachten Sie jede dargestellte Marke bei 32 px und bei 512 px. Entfernen Sie alles, was durchfällt, und iterieren Sie an den Überlebenden.
- Ausliefern Jede Marke mit einem kurzen, eindeutigen Namen (ein oder zwei Wörter: „Cube Window“, „Moonrise“), ihrer einzeiligen Idee und der SVG.
Was das Set bevorzugt
Aus den Bewertungen des Besitzers: kräftige, massive Marken mit einer Negativraum-Idee und klobigen, gleichmäßigen Lücken; Iso-Körper und Würfel; detaillierte Marken, die aus einem sich wiederholenden Element aufgebaut sind; minimale Punkt- und Pixelmarken; niedliche Keramikfigur-Tiere. Vor allem alles, was wie eine moderne Tech-, KI- oder Techwear-Marke aussieht: präzise, konstruiert, ein bisschen futuristisch. Ineinandergreifende Bänder, modulare Kacheln (der Favorit), monolineare und multilineare Zeichnungen, gefaste und schräge Schnitte, präzise Ringe und Umlaufbahnen, Rastersysteme, Schablonen- und Gebrauchsschrift, Glitch-Schnitte, Monogramme. Aber niemals ein UI-, Netzwerk-, Chip- oder Schaltkreissymbol, ein neuronales Netzwerkknotendiagramm, ein Gehirn oder etwas, das einem bekannten KI-Marken ähnelt (ein sechseckiger Knoten, ein Sternchen, ein vierzackiger Glitzer).
Die Familien
Jede Marke im Set gehört zu einer Familie. Sobald Sie eine ausgewählt haben (Schritt 2 des Arbeitsablaufs), lesen Sie den entsprechenden Abschnitt in references/families.md, bevor Sie bauen: wie sie konstruiert ist, ihre Zahlen auf der 512-Leinwand und was versucht und verworfen wurde. Abschnitte, die in dieser Datei in Anführungszeichen genannt werden („Iso solids“, „Glitch editions“), sind ebenfalls dort.
Die Familien: Bold negative space; Swiss grid; Stencil letters; Monograms; Serif letters and monograms (batch 230); Letter badges; Woven; Iso cubes; Iso solids; Overlaps (XOR); Line (monoline); Multiline (tracks); Oblique; Dot grids; Animals; Animals in the house styles; Leaf and seed; Halftone solids; Dither taper (batches 167, 186); Detailed; Inflated; Glitch slices; Shear and Wire letters (batches 112–113); Inline letters (batch 124); Rail and Trace letters (batch 166); Echo letters (batch 202); Tech brand marks (batch 213); Modular; Orbits; Letter symbols, symbols, hidden creatures and forms (batch 168); Techwear (batch 107); Industry marks (batches 95–97); Tried and dropped (batch 51); Folded (origami); Fold seams and straps (batch 170); Iso · Planes (batch 215); Bold · Emblems (batch 216); Bold · Y2K (batch 232); Letters · Blackletter and Bold · Shatter (batch 231).
Der Baukasten (scripts/kit.mjs)
Formen sind Polygonmengen auf der 512-Leinwand (y zeigt nach unten, C = 256 ist der Mittelpunkt).
| Funktion | Was sie erzeugt |
|---|---|
circle(cx, cy, r), ellipse(cx, cy, rx, ry, deg) | Scheiben |
rect(x, y, w, h), rr(x, y, w, h, r | [tl, tr, br, bl]) | Rechtecke, abgerundet oder teilweise abgerundet |
squircle(cx, cy, R, n) | Eine Superellipse: das weiche Quadrat von Abzeichen (n 4.5) |
regular(cx, cy, r, sides, deg), roundPoly(points, cut) | Regelmäßige Vielecke; jedes Vieleck mit abgerundeten Ecken |
poly([[x, y], …]) | Jedes Vieleck |
annulus(cx, cy, r, w) | Ein Ring der Breite w; r ist die Mittellinie, nicht der Außenrand |
sector(cx, cy, r, a0, a1), arcBand(cx, cy, r, w, a0, a1, round) | Ein Tortenstück; ein dicker Bogen, optional mit runden Enden |
lens(cx, cy, length, width, deg) | Eine Vesica / ein Blatt |
drop(centre, r, tip) | Ein Tropfen |
pill(a, b, w), bar(a, b, w) | Eine Linie mit runden oder quadratischen Enden, für Formen oder zum Schneiden von Lücken |
stroke(points, w), sample(f, t0, t1, n) | Ein dicker Polylinienzug (variable Breite erlaubt) und Punkte entlang einer Kurve |
weave(strands, w, gap), ring(cx, cy, r) | Über-Unter-Stränge |
iso(edge), cubes(list, edge, ox, oy, gap) | Isometrische Punkte; Würfelanordnungen |
isoPrism, isoBlock, isoRing, isoPile | Iso-Körper (siehe „Iso solids“) |
dedupe(points) | Entfernt doppelte Punkte vor stroke() |
grow(shape, d), soften(shape, r1, r2) | Ein echter runder Versatz (negativ schrumpft); runde Innenecken um r1 und Außenecken um r2 (aufgeblähte Formen) |
robust() | Einmal am Anfang eines Skripts aufrufen: jede Boolesche Operation wird dann mit einem winzigen Jitter wiederholt, wenn polygon-clipping einen Fehler wirft |
grown(shape, w), over(back, front, w) | Die Form plus ein 2w breites Band (subtrahieren Sie es, um ein Teil freizuschneiden); front vor back, freigeschnitten um w |
egg(cx, cy, rx, ry, deg, k) | Ein Ei, für Figurinenkörper |
slices(shape, cuts, shifts, { deg, g }) | Glitch-Schnitte: in Bänder durch Lücken g geschnitten, jedes Band entlang des Schnitts verschoben |
BADGE, knockout(kind, letter), clearance() | Die sieben Abzeichenformen; ein Buchstabe zentriert und ausgestanzt, verkleinert, wenn er näher als 50 an den Rand kommt |
PIX7, pixels(rows, p), checker(rows) | Das klobige 8-Bit-Alphabet; ein Pixel-Glyphen als eine einzige massive Form; alle nur an den Ecken berührenden Kontakte |
dsegs(segments, t, g) | Display-Segmente mit spitzen Enden, geteilt durch eine gleichmäßige Lücke |
SKEL, skelSolid(k, H, T) | Eine geometrische serifenlose Schrift als Mittellinien; strichstark massiv mit quadratischen Enden |
tracks(pts, { n, pitch, w }), fillet(pts, r), balloon(pts, w0, w1) | Parallele Spuren; ein Polylinienzug mit runden Ecken; ein Ballonstrich |
filletClosed(pts, r), trackLoop(pts, { n, pitch, w }) | Ein geschlossenes Vieleck mit allen verrundeten Ecken (r pro Ecke erlaubt); drei Spuren um einen geschlossenen Umriss (Abstand 42 für Tiere) |
walk(at, deg, steps) | Ein Turtle-Pfad: ['L', length] und ['A', turn°, radius] Schritte, Bögen mit exaktem Radius (offene Track-Tiere) |
seeded(str) | Ein gesäter Math.random-Generator: Setzen Sie ihn pro Marke, damit der Jitter von robust() und der Batch byte-identisch regenerieren |
svgShape(svgText), pathRings(d) | Lesen Sie das SVG einer Marke (oder Pfaddaten) zurück in eine Form: Kurven und Bögen abgetastet, evenodd- oder nonzero-Löcher respektiert |
glitchMark(svgText, { kind, cuts, shift, deg }) | Eine Glitch-Edition einer vorhandenen Marke (siehe „Glitch editions“) |
U, D, I, X | Vereinigung, Subtraktion, Schnittmenge, Ausschluss |
rot(shape, deg, cx, cy), rotN(shape, n), move, scale, flipX | Transformationen; rotN wiederholt um den Mittelpunkt |
polar(r, deg, cx, cy) | Ein Punkt in einem Winkel (0° = rechts, 90° = unten) |
segmentLines(lines, { t, box }), segments(nodes, strokes, o) | Segmentbuchstaben: jeder Strich sein eigenes Segment, Verbindungen entlang der Winkelhalbierenden geteilt |
isoPieces(pieces, u) | Einheitswürfelstücke mit nahtlosen Flächen, Lücken nur zwischen Stücken und an Knicken (Iso Lock) |
blocks(list, W, H), nest(W, H, n, sides, cut) | Ein Rechteck, gekachelt mit massiven Blöcken mit gleichmäßiger Lücke (Golden and the Blocks); eine geschälte Unterteilung |
linkage(bars, pins) | Kapseln, die zusammengesteckt sind, jede über den vorherigen |
write(file, shape), svg(shape) | Ausgabe |
Lücken schneiden, indem Sie bar()s (oder einen dünnen annulus()) in der Lückenbreite subtrahieren. Schweben Sie ein Teil in einem Wassergraben, indem Sie eine skalierte Kopie davon subtrahieren und das Teil dann wieder hinzufügen (Hex Gem). Wenn polygon-clipping „Unable to complete output ring“ wirft, teilen sich Formen eine exakte Kante: verschieben Sie eine um 0.01. Wenn das nicht ausreicht, wiederholen Sie den gesamten Aufbau mit einem winzigen Jitter auf dem Umriss und der Tiefe (ein paar Versuche von 1e-4 bis ~0.02), oder zeichnen Sie die Fläche als einen sauberen Umriss statt einer Vereinigung von Rechtecken neu. „Degenerate segment at [NaN, NaN]“ bedeutet, dass ein Polylinienzug einen doppelten Punkt hat: dedupe() ihn. Die Baukasten-Helfer (stroke(), pill(), grown()) rufen ebenfalls die Booleschen Operationen auf, daher kann ein Jitter in Ihrem eigenen Code sie nicht erreichen: Rufen Sie stattdessen einmal robust() auf, und Fehler in ihnen werden automatisch wiederholt.
grow() vor Batch 64 tat nichts Nützliches: es vereinfachte jeden Ring, indem es seinen ersten Punkt am Ende wiederholte, was den Ring auf diesen einen Punkt kollabieren ließ, sodass es nur einen Kreis dort hinzufügte oder entfernte. Behoben; wenn eine Kopie des Baukastens älter ist, zeigt grow(rect(0, 0, 100, 100), -10) das Problem.
Groß prüfen, auf beiden Hintergründen. Kleine helle Miniaturansichten auf dunklem Hintergrund täuschen: Eine Öffnung kann gefüllt aussehen, oder ein schmaler Streifen kann sich verstecken. Bevor Sie eine Marke schneiden oder ausliefern, rendern Sie sie bei 400 Pixeln, dunkel auf hellem Grund.
Pfade von Hand schreiben
Für eine einfache Marke können Sie den Pfad direkt schreiben:
- Ein Kreis besteht aus zwei Bögen:
M cx-r cy a r r 0 1 0 2r 0 a r r 0 1 0 -2r 0 z. - Ein Ring sind zwei Kreise in einem Pfad mit
fill-rule="evenodd". Der innere wird zu einem Loch. - Mit evenodd werden überlappende Teile ebenfalls zu Löchern. Bei überlappenden massiven Formen verschmelzen Sie sie entweder im Baukasten oder verwenden Sie die Standard-Nonzero-Regel, wobei jede massive Form im Uhrzeigersinn und jedes Loch gegen den Uhrzeigersinn gezeichnet wird.
- Führen Sie dann
fit.mjsaus. Versuchen Sie nicht, die 448 von Hand zu treffen, und schneiden Sie nicht auf die Leinwand zu: Wenn ein Teil der Zeichnung außerhalb von 0–512 liegt, bringtfit.mjses zurück.
Überprüfungs-Checkliste
Entfernen oder überarbeiten Sie jede Marke, die bei einem dieser Punkte durchfällt:
- Eine Idee, beschreibbar in einem Satz ohne „und“.
- Lesbar bei 32 px: Lücken schließen sich nicht, nichts wird zu Matsch. Nichts schmaler als 10 Einheiten.
- Eine Lückenbreite und eine Strichstärke (oder ein klares 1:2-Verhältnis) durchgehend. Halten Sie die Lücke des Sets (22 Einheiten zwischen getrennten Teilen): Die Steuerelemente „Gap“, „Weight“ und „Soften“ auf der Website messen die Teile und Lücken jeder Marke und funktionieren am besten, wenn sie gleichmäßig sind. Die einzige Ausnahme ist eine Falz- oder Überlappungs-NAHT von 11 (Crease- und Strap-Marken, unter „Fold seams and straps“), und nur, wenn die Silhouette allein bei 32 px lesbar ist.
- Nie lesbar als Icon. Dies ist die Regel, an der die meisten Marken scheitern. Fragen Sie: Würde es bequem in ein Icon-Set passen (Material, Lucide, SF Symbols)? Wenn ja, entfernen Sie es, egal wie gut gezeichnet. Ein Logomark ist ein abstraktes oder stilisiertes Zeichen, das zu einer Marke gehört, kein Piktogramm einer Sache oder Handlung. Insbesondere kein UI-Icon: keine Pfeile, Play, Home, Zahnrad, Mutter, Glocke, Schloss, Download, Kopieren, Chat-Blase, Karten-Pin, WLAN-Bögen, Diagramme (auch Tortenstücke), Bild/Berg-und-Sonne, „Kein Zutritt“-Schrägstrich, spinnerartige Punktringe, Paketbox. Strichzeichnungen von Alltagsgegenständen werden schnell zu Icons: Tasse, Flasche, Brille, Trophäe, Zylinder, Rakete, Fahrrad und Edelstein lesen sich alle als Icons.
- Kein Körperteil aus Versehen: Achten Sie auf Mandel- und Linsenformen zwischen überlappenden Ringen.
- Kein Symbol mit Bedeutung: keine religiösen, politischen oder okkulten Symbole (Hexagramm, Pentagramm, Kreuz, Halbmond-und-Stern, Triquetra, Torii, Tomoe, Hakenkreuz
…
[gekürzt für die Übersetzung]