Logomarks

---

name: logomarks description: Diseña nuevos logomarcas geométricas (símbolos, logotipos de letras y monogramas) como SVG limpios de un solo color según el estándar del conjunto gratuito Logomarks en logomarks.ai: la cuadrícula 512, ajuste exacto, el kit de construcción, las comprobaciones internas y el estilo característico del conjunto. Úsalo al diseñar nuevas marcas geométricas, dibujar o iterar sobre un logotipo, símbolo de marca, letra o monograma, verificar una marca SVG según las reglas internas, o editar, remezclar o glitchear uno de los Logomarks existentes.

¿Qué hace Logomarks?

3.797 logomarcas geométricas gratuitas de David Sherlock, todas dibujadas bajo un mismo estándar: https://logomarks.ai (CC0, dominio público). Este skill explica cómo diseñar nuevas marcas que pertenezcan a ese conjunto, y cómo verificar, editar y reutilizar las existentes. (Para elegir una marca existente para un proyecto y configurarla, usa el skill Logomarks picker).

Contenido de esta carpeta:

• SKILL.md: este archivo.
• scripts/kit.mjs: el kit de geometría con el que se construyó el conjunto (formas, booleanos reales, tejido, cubos iso y sólidos iso). Requiere npm install polygon-clipping (se incluye un package.json).
• scripts/fit.mjs: ajusta cualquier marca SVG al estándar y la verifica. Sin dependencias.
• scripts/examples.mjs: seis marcas reales del conjunto, reconstruidas con el kit.
• examples/: sus salidas, ya ajustadas.

Usar las marcas existentes

El sitio funciona como una API estática. No requiere instalación:

• https://logomarks.ai/marks.json: el nombre, slug, archivo, etiquetas (redondo, cuadrado, letra, número, simétrico, radial, sólido, claro, ancho, alto, nuevo) y el tamaño dibujado de cada marca.
• https://logomarks.ai/svg/<slug>.svg: la marca en sí.
• https://logomarks.ai/marks/<slug>: su página, con descargas de PNG, favicon y maquetas de marca.
• https://logomarks.ai/logomarks.zip: todas ellas.

Antes de diseñar desde cero, verifica si una marca existente (o una remezcla de una) se ajusta al briefing. Obtén marks.json y filtra por etiquetas y nombres.

El estándar (no negociable)

• viewBox="0 0 512 512".

• El lado más largo de la marca mide exactamente 448, centrado: un margen de 32, medido sobre el contorno real. Una marca ancha mide 448 de ancho y es más corta; una alta mide 448 de alto. Nunca dimensiones a ojo: ejecuta fit.mjs.

• Mide la geometría, nunca el lienzo. Mientras construyes, una marca puede desbordar el rango 0–512 (los sólidos iso y las pilas altas suelen hacerlo). Esto está bien siempre que el paso de ajuste mida el contorno real. No obtengas los límites de una marca renderizándola dentro de su viewBox: cualquier cosa fuera es invisible para ese render, el "ajuste" luego la deja fuera, y el archivo final se corta en el borde. fit.mjs mide cada punto y curva, por lo que maneja marcas dibujadas en cualquier lugar; fit.mjs --check rechaza cualquier marca que aún se salga del lienzo.

• El archivo completo:

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

• Solo trazados rellenos, en currentColor. Sin trazos (exprésalos), <g>, transform, style, máscaras, clip paths, IDs ni texto. Los agujeros son agujeros reales (evenodd o winding inverso), nunca una forma pintada con un color de fondo.

• Coordenadas con un decimal.

Flujo de trabajo

1. Lee el briefing. Nombre, qué hace el negocio, la sensación (tranquilo, técnico, divertido, premium) y dónde vivirá la marca (icono de app, favicon, señalización). El uso en tamaño pequeño favorece marcas audaces con pocas partes.
2. Elige una familia (abajo). No mezcles familias en una misma marca.
3. Escribe 4–6 ideas de una línea. Cada una debe ser una idea: "un disco partido por un canal en forma de S", no "un disco con una S, un punto y rayos". Los logotipos de letras usan la inicial del nombre.
4. Construye las mejores 2–3 con el kit: un script corto que combine primitivas con booleanos y llame a write(). Solo escribe los datos del trazado a mano para marcas muy sencillas (consulta "Escribir trazados a mano").
5. Ajusta: node scripts/fit.mjs out/ las dimensiona todas al estándar.
6. Revisa según la lista de verificación. Mira cada una renderizada, a 32 px y a 512 px. Descarta cualquier cosa que falle e itera sobre las supervivientes.
7. Entrega cada marca con un nombre corto y único (una o dos palabras: "Ventana Cubo", "Amanecer"), su idea de una línea y el SVG.

Lo que el conjunto favorece

De las revisiones del propietario: marcas sólidas y audaces con una idea de espacio negativo y espacios gruesos y uniformes; sólidos iso y cubos; marcas detalladas construidas a partir de un elemento repetido; marcas de puntos y píxeles minimalistas; animales cerámicos de figurita lindos. Sobre todo, cualquier cosa que parezca una marca moderna de tecnología, IA o techwear: precisa, diseñada, un poco futurista. Bandas entrelazadas, baldosas modulares (la favorita), dibujos monotrazo y multitrayecto, cortes achaflanados y oblicuos, anillos y órbitas precisos, sistemas de cuadrícula, letras de estarcido y utilitarias, cortes glitch, monogramas. Pero nunca un icono de UI, red, chip o circuito, un grafo de nodos de red neuronal, un cerebro, ni nada cercano a una marca de IA conocida (un nudo hexagonal, un asterisco, un destello de cuatro puntas).

Las familias

Cada marca en el conjunto pertenece a una familia. Una vez que hayas elegido una (paso 2 del flujo de trabajo), lee su sección en referencias/familias.md antes de construir: cómo se construye, sus números en el lienzo 512, y qué se probó y se descartó. Las secciones que este archivo nombra entre comillas ("Sólidos iso", "Ediciones glitch") también están allí.

Las familias: Espacio negativo audaz; Rejilla suiza; Letras estarcidas; Monogramas; Letras serif y monogramas (lote 230); Insignias de letras; Tejido; Cubos iso; Sólidos iso; Superposiciones (XOR); Línea (monotrazo); Multilínea (pistas); Oblicuo; Cuadrículas de puntos; Animales; Animales en los estilos de la casa; Hoja y semilla; Sólidos de semitono; Degradado de tramado (lotes 167, 186); Detallado; Inflado; Cortes glitch; Letras de cizalla y alambre (lotes 112–113); Letras inline (lote 124); Letras de carril y trazo (lote 166); Letras eco (lote 202); Marcas de tecnología (lote 213); Modular; Órbitas; Símbolos de letras, símbolos, criaturas ocultas y formas (lote 168); Techwear (lote 107); Marcas industriales (lotes 95–97); Probado y descartado (lote 51); Plegado (origami); Costuras y correas de pliegues (lote 170); Iso · Planos (lote 215); Audaz · Emblemas (lote 216); Audaz · Y2K (lote 232); Letras · Góticas y Audaz · Fragmento (lote 231).

El kit (scripts/kit.mjs)

Las formas son conjuntos de polígonos en el lienzo 512 (y apunta hacia abajo, C = 256 es el centro).

Función	Qué crea
circle(cx, cy, r), ellipse(cx, cy, rx, ry, deg)	Discos
rect(x, y, w, h), rr(x, y, w, h, r | [tl, tr, br, bl])	Rectángulos, redondeados o parcialmente redondeados
squircle(cx, cy, R, n)	Una superelipse: el cuadrado suave de las insignias (n 4.5)
regular(cx, cy, r, lados, deg), roundPoly(puntos, corte)	Polígonos regulares; cualquier polígono con esquinas redondeadas
poly([[x, y], …])	Cualquier polígono
annulus(cx, cy, r, w)	Un anillo de ancho w; r es la línea central, no el borde exterior
sector(cx, cy, r, a0, a1), arcBand(cx, cy, r, w, a0, a1, redondo)	Una porción de tarta; un arco grueso, opcionalmente con extremos redondeados
lens(cx, cy, largo, ancho, deg)	Una vesica / hoja
drop(centro, r, punta)	Una lágrima
pill(a, b, w), bar(a, b, w)	Una línea con extremos redondos o cuadrados, para formas o para cortar espacios
stroke(puntos, w), sample(f, t0, t1, n)	Una polilínea gruesa (se permite ancho variable) y puntos a lo largo de una curva
weave(hilos, w, espacio), ring(cx, cy, r)	Hilos por encima y por debajo
iso(borde), cubes(lista, borde, ox, oy, espacio)	Puntos isométricos; arreglos de cubos
isoPrism, isoBlock, isoRing, isoPile	Sólidos iso (consulta "Sólidos iso")
dedupe(puntos)	Elimina puntos repetidos antes de stroke()
grow(forma, d), soften(forma, r1, r2)	Un desplazamiento redondo real (negativo encoge); redondea esquinas interiores por r1 y exteriores por r2 (formas infladas)
robust()	Llámalo una vez al inicio de un script: cada booleano reintenta con una pequeña perturbación cuando polygon-clipping lanza una excepción
grown(forma, w), over(fondo, frente, w)	La forma más una banda de ancho 2w (restarla para cortar una parte libre); frente delante de fondo, cortada libre por w
egg(cx, cy, rx, ry, deg, k)	Un huevo, para cuerpos de figuritas
slices(forma, cortes, desplazamientos, { deg, g })	Cortes glitch: corta en bandas con espacios g, cada banda deslizada a lo largo del corte
BADGE, knockout(tipo, letra), clearance()	Las siete formas de insignia; una letra centrada y recortada, reducida si se acerca a menos de 50 del borde
PIX7, pixels(filas, p), checker(filas)	El alfabeto grueso de 8 bits; un glifo de píxel como sólido; cualquier contacto solo en esquinas
dsegs(segmentos, t, g)	Segmentos de visualización con extremos puntiagudos, separados por un espacio uniforme
SKEL, skelSolid(k, H, T)	Un sans geométrico como líneas centrales; trazado sólido con extremos cuadrados
tracks(pts, { n, pitch, w }), fillet(pts, r), balloon(pts, w0, w1)	Pistas paralelas; una polilínea con esquinas redondeadas; un trazo globo
filletClosed(pts, r), trackLoop(pts, { n, pitch, w })	Un polígono cerrado con cada esquina redondeada (r por esquina permitido); tres pistas alrededor de un contorno cerrado (pitch 42 para animales)
walk(at, deg, pasos)	Un camino de tortuga: pasos ['L', largo] y ['A', giro°, radio], arcos de radio exacto (animales de pista abierta)
seeded(cadena)	Un Math.random con semilla: configúralo por marca para que la perturbación de robust() y el lote se regeneren byte-idénticos
svgShape(svgText), pathRings(d)	Lee el SVG de una marca (o los datos del trazado) de vuelta a una forma: curvas y arcos muestreados, agujeros evenodd o nonzero respetados
glitchMark(svgText, { tipo, cortes, desplazamiento, deg })	Una edición glitch de una marca existente (consulta "Ediciones glitch")
U, D, I, X	Unión, resta, intersección, exclusión
rot(forma, deg, cx, cy), rotN(forma, n), move, scale, flipX	Transformaciones; rotN repite alrededor del centro
polar(r, deg, cx, cy)	Un punto en un ángulo (0° = derecha, 90° = abajo)
segmentLines(lineas, { t, box }), segments(nodos, trazos, o)	Letras de segmento: cada trazo su propio segmento, las uniones separadas a lo largo de las bisectrices
isoPieces(piezas, u)	Piezas de cubo unitario con caras sin costuras, espacios solo entre piezas y en pliegues (Iso Lock)
blocks(lista, W, H), nest(W, H, n, lados, corte)	Un rectángulo embaldosado con bloques sólidos con un espacio uniforme (Golden y los Blocks); una subdivisión pelada
linkage(barras, pines)	Cápsulas unidas por pines, cada una sobre las anteriores
write(archivo, forma), svg(forma)	Salida

Corta espacios restando bar()s (o un annulus() delgado) del ancho del espacio. Haz flotar una parte en un foso restando una copia escalada de la misma, luego añadiendo la parte de nuevo (Hex Gem). Si polygon-clipping lanza "Unable to complete output ring", las formas comparten un borde exacto: desplaza una por 0.01. Si eso no es suficiente, reintenta toda la construcción con una pequeña perturbación en el contorno y la profundidad (algunos intentos desde 1e-4 hasta ~0.02), o redibuja la cara como un contorno limpio en lugar de una unión de rectángulos. "Degenerate segment at [NaN, NaN]" significa que una polilínea tiene un punto repetido: usa dedupe(). Los ayudantes del kit (stroke(), pill(), grown()) también llaman a los booleanos, por lo que una perturbación en tu propio código no puede alcanzarlos: llama a robust() una vez en su lugar, y los fallos dentro de ellos reintentan por su cuenta.

grow() antes del lote 64 no hacía nada útil: simplificaba cada anillo repitiendo su primer punto al final, lo que colapsaba el anillo a ese único punto, por lo que solo añadía o eliminaba un círculo allí. Corregido; si una copia del kit es anterior, grow(rect(0, 0, 100, 100), -10) lo muestra.

Revisa en grande, en ambos fondos. Las miniaturas pequeñas claras sobre oscuras engañan: una abertura puede parecer llena, o una astilla puede esconderse. Antes de cortar o enviar una marca, renderízala a 400 px, oscura sobre clara.

Escribir trazados a mano

Para una marca simple puedes escribir el trazado directamente:

• Un círculo son dos arcos: M cx-r cy a r r 0 1 0 2r 0 a r r 0 1 0 -2r 0 z.
• Un anillo son dos círculos en un mismo trazado con fill-rule="evenodd". El interior se convierte en un agujero.
• Con evenodd, las partes superpuestas también se convierten en agujeros. Para sólidos superpuestos, fúndelos en el kit o usa la regla nonzero predeterminada con cada sólido dibujado en sentido horario y cada agujero en sentido antihorario.
• Luego ejecuta fit.mjs. No intentes alcanzar 448 a mano, y no recortes al lienzo: si parte del dibujo está fuera de 0–512, fit.mjs lo traerá de vuelta.

Lista de verificación de revisión

Descarta o reelabora cualquier marca que falle uno de estos:

• Una idea, describible en una oración sin "y".
• Se lee a 32 px: los espacios no se cierran, nada se vuelve borroso. Nada más estrecho de 10 unidades.
• Un ancho de espacio y un grosor de trazo (o una relación clara 1:2) en toda la marca. Mantén el espacio del conjunto (22 unidades entre partes separadas): los controles Gap, Weight y Soften del sitio miden las partes y espacios de cada marca, y funcionan mejor cuando son uniformes. La única excepción es una costura de pliegue o superposición de 11 (marcas Crease y Strap, bajo "Costuras y correas de pliegues"), y solo donde la silueta sola se lee a 32 px.
• Nunca se lee como un icono. Esta es la regla que las marcas fallan más. Pregunta: ¿se sentiría cómodo en un conjunto de iconos (Material, Lucide, SF Symbols)? Si es así, descártalo, por muy bien dibujado que esté. Un logomarca es un signo abstracto o estilizado que pertenece a una sola marca, no un pictograma de una cosa o una acción. Específicamente, no es un icono de UI: sin flechas, play, inicio, engranaje, tuerca, campana, candado, descarga, copiar, burbuja de chat, pin de mapa, arcos Wi-Fi, gráficos (también porciones de tarta), imagen/montaña-y-sol, barra de "prohibido el paso", anillos de puntos tipo spinner, caja de paquete. Los dibujos lineales de objetos cotidianos se deslizan rápidamente hacia iconos: taza, botella, gafas, trofeo, sombrero de copa, cohete, bicicleta y gema se leen como iconos.
• No es una parte del cuerpo por accidente: cuida las formas de almendra y lente entre anillos superpuestos.
• No es un símbolo con significado: sin símbolos religiosos, políticos u ocultos (hexagrama, pentagrama, cruz, creciente-y-estrella, triquetra, torii, tomoe, esvástica en cualquier

...

[truncado para traducción]