Logomarks/logomarks

---

name: logomarks description: Concevez de nouveaux logomarks géométriques (symboles, lettermarks et monogrammes) sous forme de SVG monochrome propre, selon le standard de l'ensemble gratuit Logomarks sur logomarks.ai : la grille 512, l'ajustement exact, le kit de construction, les vérifications internes et le goût de l'ensemble. À utiliser pour concevoir de nouvelles marques géométriques, dessiner ou itérer sur un logo, un symbole de marque, un lettermark ou un monogramme, vérifier une marque SVG par rapport aux règles maison, ou éditer, remixer ou glitcher un Logomark existant.

Que fait logomarks ?

3 797 logomarks géométriques gratuits par David Sherlock, tous dessinés selon un seul standard : https://logomarks.ai (CC0, domaine public). Cette compétence explique comment concevoir de nouvelles marques qui appartiennent à cet ensemble, et comment vérifier, éditer et réutiliser celles qui existent. (Pour choisir une marque existante pour un projet et la configurer, utilisez la compétence de sélection Logomarks.)

Contenu de ce dossier :

• SKILL.md : ce fichier.
• scripts/kit.mjs : le kit de géométrie avec lequel l'ensemble a été construit (formes, booléens réels, tissage, cubes isométriques et solides isométriques). Nécessite npm install polygon-clipping (un fichier package.json est inclus).
• scripts/fit.mjs : ajuste toute marque SVG au standard et la vérifie. Aucune dépendance.
• scripts/examples.mjs : six vraies marques de l'ensemble, reconstruites avec le kit.
• examples/ : leur sortie, déjà ajustée.

Utiliser les marques existantes

Le site sert également d'API statique. Rien à installer :

• https://logomarks.ai/marks.json : le nom, le slug, le fichier, les tags (rond, carré, lettre, nombre, symétrique, radial, solide, léger, large, haut, nouveau) et la taille dessinée de chaque marque.
• https://logomarks.ai/svg/<slug>.svg : la marque elle-même.
• https://logomarks.ai/marks/<slug> : sa page, avec des téléchargements PNG, favicon et maquettes de marque.
• https://logomarks.ai/logomarks.zip : toutes.

Avant de concevoir à partir de zéro, vérifiez si une marque existante (ou un remix de celle-ci) correspond au brief. Récupérez marks.json et filtrez par tags et noms.

Le standard (non-négociable)

• viewBox="0 0 512 512".

• Le côté le plus long de la marque est exactement 448, centré : une marge de 32, mesurée sur le contour réel. Une marque large fait 448 de large et moins de haut ; une marque haute fait 448 de haut. Ne dimensionnez jamais à l'œil : exécutez fit.mjs.

• Mesurez la géométrie, jamais le canevas. Pendant la construction, une marque peut dépasser 0–512 (les solides isométriques et les empilements hauts le font souvent). C'est acceptable tant que l'étape d'ajustement mesure le contour réel. Ne trouvez pas les limites d'une marque en la rendant à l'intérieur de sa viewBox : tout ce qui est à l'extérieur est invisible pour ce rendu, l'"ajustement" le laisse alors à l'extérieur, et le fichier final est coupé au bord. fit.mjs mesure chaque point et chaque courbe, donc il gère les marques dessinées n'importe où ; fit.mjs --check échoue pour toute marque qui dépasse encore du canevas.

• Le fichier complet :

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
    <path fill-rule="evenodd" d="…"/>
  </svg>
  

• Uniquement des chemins remplis, en currentColor. Pas de traits (développez-les), <g>, transform, style, masques, chemins de détourage, ID ou texte. Les trous sont de vrais trous (evenodd ou enroulement inversé), jamais une forme peinte dans une couleur d'arrière-plan.

• Coordonnées à une décimale.

Workflow

1. Lisez le brief. Nom, ce que fait l'entreprise, le ressenti (calme, technique, ludique, premium) et où vivra la marque (icône d'application, favicon, signalétique). Une utilisation en petite taille pousse vers des marques grasses avec peu de parties.
2. Choisissez une famille (ci-dessous). Ne mélangez pas les familles dans une même marque.
3. Écrivez 4 à 6 idées en une ligne. Chacune doit être une idée : "un disque coupé par un canal en forme de S", pas "un disque avec un S, un point et des rayons". Les lettermarks utilisent l'initiale du nom.
4. Construisez les 2-3 meilleures avec le kit : un court script qui combine des primitives avec des booléens et appelle write(). Écrivez les données de chemin à la main uniquement pour des marques très simples (voir "Écrire des chemins à la main").
5. Ajustez : node scripts/fit.mjs out/ les dimensionne tous au standard.
6. Révisez selon la checklist. Regardez chaque marque rendue, à 32 px et à 512 px. Supprimez tout ce qui échoue, et itérez sur les survivantes.
7. Livrez chaque marque avec un nom court et unique (un ou deux mots : "Fenêtre Cube", "Lever de Lune"), son idée en une ligne et le SVG.

Ce que l'ensemble privilégie

D'après les critiques du propriétaire : les marques solides et grasses avec une idée d'espace négatif et des écarts épais et réguliers ; les solides et cubes isométriques ; les marques détaillées construites à partir d'un élément répété ; les marques minimalistes en points et pixels ; les animaux mignons en figurine de céramique. Surtout, tout ce qui ressemble à une marque tech, IA ou techwear moderne : précis, conçu, un peu futuriste. Bandes entrelacées, tuiles modulaires (le favori), dessins monolignes et multilignes, coupes chanfreinées et obliques, anneaux et orbites précis, systèmes de grille, lettres pochoir et utilitaires, tranches de glitch, monogrammes. Mais jamais une icône d'interface, de réseau, de puce ou de circuit, un graphe de nœuds de réseau neuronal, un cerveau, ou quoi que ce soit proche d'une marque IA connue (un nœud hexagonal, un astérisque, une étincelle à quatre branches).

Les familles

Chaque marque de l'ensemble appartient à une seule famille. Une fois que vous en avez choisi une (étape 2 du workflow), lisez sa section dans references/families.md avant de construire : comment elle est construite, ses nombres sur le canevas 512, et ce qui a été essayé et coupé. Les sections que ce fichier nomme entre guillemets ("Solides isométriques", "Éditions glitch") s'y trouvent aussi.

Les familles : Espace négatif gras ; Grille suisse ; Lettres pochoir ; Monogrammes ; Lettres et monogrammes Serif (lot 230) ; Badges de lettres ; Tissé ; Cubes iso ; Solides iso ; Chevauchements (XOR) ; Ligne (monoline) ; Multiligne (pistes) ; Oblique ; Grilles de points ; Animaux ; Animaux dans les styles maison ; Feuille et graine ; Solides en demi-teinte ; Dither taper (lots 167, 186) ; Détaillé ; Gonflé ; Tranches de glitch ; Lettres Shear et Wire (lots 112-113) ; Lettres Inline (lot 124) ; Lettres Rail et Trace (lot 166) ; Lettres Echo (lot 202) ; Marques tech (lot 213) ; Modulaire ; Orbites ; Symboles de lettres, symboles, créatures cachées et formes (lot 168) ; Techwear (lot 107) ; Marques d'industrie (lots 95-97) ; Essayé et abandonné (lot 51) ; Plissé (origami) ; Plis de pliage et sangles (lot 170) ; Iso · Plans (lot 215) ; Gras · Emblèmes (lot 216) ; Gras · Y2K (lot 232) ; Lettres · Blackletter et Gras · Shatter (lot 231).

Le kit (scripts/kit.mjs)

Les formes sont des ensembles de polygones sur le canevas 512 (les points y vers le bas, C = 256 est le centre).

Fonction	Ce qu'elle produit
circle(cx, cy, r), ellipse(cx, cy, rx, ry, deg)	Disques
rect(x, y, w, h), rr(x, y, w, h, r | [tl, tr, br, bl])	Rectangles, arrondis ou partiellement arrondis
squircle(cx, cy, R, n)	Une superellipse : le carré doux des badges (n 4,5)
regular(cx, cy, r, sides, deg), roundPoly(points, cut)	Polygones réguliers ; tout polygone à coins arrondis
poly([[x, y], …])	Tout polygone
annulus(cx, cy, r, w)	Un anneau de largeur w ; r est la ligne centrale, pas le bord extérieur
sector(cx, cy, r, a0, a1), arcBand(cx, cy, r, w, a0, a1, round)	Une part de tarte ; un arc épais, optionnellement avec des extrémités rondes
lens(cx, cy, length, width, deg)	Une vésica / feuille
drop(centre, r, tip)	Une goutte
pill(a, b, w), bar(a, b, w)	Une ligne avec des extrémités rondes ou carrées, pour les formes ou pour découper des espaces
stroke(points, w), sample(f, t0, t1, n)	Une polyligne épaisse (largeur variable autorisée) et des points le long d'une courbe
weave(strands, w, gap), ring(cx, cy, r)	Brins dessus-dessous
iso(edge), cubes(list, edge, ox, oy, gap)	Points isométriques ; arrangements de cubes
isoPrism, isoBlock, isoRing, isoPile	Solides isométriques (voir "Solides isométriques")
dedupe(points)	Supprime les points répétés avant stroke()
grow(shape, d), soften(shape, r1, r2)	Un décalage d'arrondi réel (négatif réduit) ; arrondit les coins intérieurs par r1 et extérieurs par r2 (formes gonflées)
robust()	Appeler une fois en haut d'un script : chaque booléen réessaie ensuite avec une petite secousse lorsque polygon-clipping échoue
grown(shape, w), over(back, front, w)	La forme plus une bande de 2w (soustrayez-la pour découper une partie) ; front devant back, découpé libre par w
egg(cx, cy, rx, ry, deg, k)	Un œuf, pour les corps de figurines
slices(shape, cuts, shifts, { deg, g })	Tranches de glitch : découpées en bandes par des espaces g, chaque bande glissée le long de la coupe
BADGE, knockout(kind, letter), clearance()	Les sept formes de badge ; une lettre centrée et découpée, réduite si elle s'approche à moins de 50 du bord
PIX7, pixels(rows, p), checker(rows)	L'alphabet 8-bit épais ; un glyphe pixel en un seul solide ; tout contact uniquement dans les coins
dsegs(segments, t, g)	Segments d'affichage à extrémités pointues, séparés par un espace régulier
SKEL, skelSolid(k, H, T)	Un sans-serif géométrique sous forme de lignes centrales ; tracé solide avec extrémités carrées
tracks(pts, { n, pitch, w }), fillet(pts, r), balloon(pts, w0, w1)	Pistes parallèles ; une polyligne à coins arrondis ; un trait en ballon
filletClosed(pts, r), trackLoop(pts, { n, pitch, w })	Un polygone fermé avec chaque coin arrondi (r par coin autorisé) ; trois pistes autour d'un contour fermé (pitch 42 pour les animaux)
walk(at, deg, steps)	Un chemin de tortue : des étapes ['L', length] et ['A', turn°, radius], des arcs de rayon exact (animaux Track ouverts)
seeded(str)	Un Math.random à graine : réglez-le par marque pour que la secousse de robust() et le lot se régénèrent à l'identique
svgShape(svgText), pathRings(d)	Lire le SVG d'une marque (ou les données de chemin) dans une forme : courbes et arcs échantillonnés, trous evenodd ou nonzero respectés
glitchMark(svgText, { kind, cuts, shift, deg })	Une édition glitch d'une marque existante (voir "Éditions glitch")
U, D, I, X	Union, soustraction, intersection, exclusion
rot(shape, deg, cx, cy), rotN(shape, n), move, scale, flipX	Transformations ; rotN répète autour du centre
polar(r, deg, cx, cy)	Un point à un angle (0° = droite, 90° = bas)
segmentLines(lines, { t, box }), segments(nodes, strokes, o)	Lettres segmentées : chaque trait son propre segment, les jointures séparées le long des bissectrices
isoPieces(pieces, u)	Pièces de cube unitaire avec faces sans couture, espaces uniquement entre les pièces et aux plis (Iso Lock)
blocks(list, W, H), nest(W, H, n, sides, cut)	Un rectangle carrelé par des blocs solides avec un espace régulier (Golden et les Blocks) ; une subdivision pelée
linkage(bars, pins)	Capsules épinglées ensemble, chacune par-dessus les précédentes
write(file, shape), svg(shape)	Sortie

Coupez les espaces en soustrayant des bar() (ou un annulus() fin) de la largeur de l'espace. Faites flotter une partie dans un fossé en soustrayant une copie agrandie de celle-ci, puis en rajoutant la partie (Hex Gem). Si polygon-clipping émet "Unable to complete output ring", les formes partagent un bord exact : décalez-en une de 0,01. Si cela ne suffit pas, réessayez toute la construction avec une petite secousse sur le contour et la profondeur (quelques essais de 1e-4 jusqu'à ~0,02), ou redessinez la face comme un contour propre au lieu d'une union de rectangles. "Degenerate segment at [NaN, NaN]" signifie qu'une polyligne a un point répété : utilisez dedupe(). Les aides du kit (stroke(), pill(), grown()) appellent aussi les booléens, donc une secousse dans votre propre code ne peut pas les atteindre : appelez plutôt robust() une fois, et les échecs à l'intérieur réessaient tout seuls.

grow() avant le lot 64 ne faisait rien d'utile : il simplifiait chaque anneau avec son premier point répété à la fin, ce qui réduisait l'anneau à ce seul point, donc il ajoutait ou supprimait seulement un cercle à cet endroit. Corrigé ; si une copie du kit le précède, grow(rect(0, 0, 100, 100), -10) le montre.

Vérifiez en grand, sur les deux fonds. Les petites vignettes claires sur fond sombre trompent : une ouverture peut sembler remplie, ou un éclat peut se cacher. Avant de couper ou de livrer une marque, rendez-la à 400 px, sombre sur fond clair.

Écrire des chemins à la main

Pour une marque simple, vous pouvez écrire le chemin directement :

• Un cercle fait deux arcs : M cx-r cy a r r 0 1 0 2r 0 a r r 0 1 0 -2r 0 z.
• Un anneau fait deux cercles dans un même chemin avec fill-rule="evenodd". Le cercle intérieur devient un trou.
• Avec evenodd, les parties qui se chevauchent deviennent aussi des trous. Pour les solides qui se chevauchent, soit fusionnez-les dans le kit, soit utilisez la règle nonzero par défaut avec chaque solide dessiné dans le sens horaire et chaque trou dans le sens antihoraire.
• Ensuite, exécutez fit.mjs. N'essayez pas d'atteindre 448 à la main, et ne recadrez pas au canevas : si une partie du dessin se trouve en dehors de 0–512, fit.mjs la ramène à l'intérieur.

Checklist de révision

Supprimez ou retravaillez toute marque qui échoue à l'un de ces points :

• Une idée, descriptible en une phrase sans "et".
• Lisible à 32 px : les espaces ne se referment pas, rien ne devient de la bouillie. Rien de plus étroit que 10 unités.
• Une largeur d'espace et une épaisseur de trait (ou un rapport clair de 1:2) dans toute la marque. Respectez l'espace de l'ensemble (22 unités entre les parties séparées) : les contrôles Gap, Weight et Soften du site mesurent les parties et les espaces de chaque marque, et fonctionnent mieux lorsqu'ils sont réguliers. La seule exception est un pli ou une couture SEAM de 11 (marques Crease et Strap, sous "Plis de pliage et sangles"), et uniquement lorsque la silhouette seule est lisible à 32 px.
• Ne ressemble jamais à une icône. C'est la règle à laquelle les marques échouent le plus. Demandez-vous : serait-elle à l'aise dans un ensemble d'icônes (Material, Lucide, SF Symbols) ? Si oui, supprimez-la, aussi bien dessinée soit-elle. Un logomark est un signe abstrait ou stylisé qui appartient à une seule marque, pas un pictogramme d'une chose ou d'une action. Plus précisément, pas une icône d'interface : pas de flèches, play, accueil, engrenage, écrou, cloche, cadenas, téléchargement, copie, bulle de chat, épingle de carte, arcs Wi-Fi, graphiques (y compris parts de tarte), image/montagne-et-soleil, barre "entrée interdite", anneaux de points de spinner, boîte de colis. Les dessins au trait d'objets du quotidien glissent vite vers des icônes : tasse, bouteille, lunettes, trophée, haut-de-forme, fusée, vélo et gemme se lisent tous comme des icônes.
• Pas une partie du corps par accident : surveillez les formes d'amande et de lentille entre des anneaux qui se chevauchent.
• Pas un symbole avec un sens : pas de symboles religieux, politiques ou occultes (hexagramme, pentagramme, croix, croissant-et-étoile, triquetra, torii, tomoe, svastika dans toute

…

[tronqué pour la traduction]