hacklab/takethestreet
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Farola: la luz ondea en una S pronunciada antes de llegar al suelo; más propuestas en S

Browse source
This commit is contained in:
hacklab 2026-10-14 14:54:50 +02:00
parent d645ab270b
commit 85480a7edd
23 changed files with 72 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -257,7 +257,7 @@ Tres piezas, cada una con su uso:
![Hoja de marca](docs/marca/hoja.png)
- **Símbolo** (`docs/marca/simbolo*.svg`): una farola moderna dentro de un aro grueso, como un emblema de tienda de graffiti (en la línea del sello de Writers Madrid), con la luz en naranja: baja de la cabeza en forma de campana, llega al suelo y se abre en un charco con el centro más claro. Las otras propuestas (onda suave, onda marcada, campana con línea de suelo y la recta) están en `docs/marca/propuestas/`. Plano y rotundo, para que se lea en un favicon, una pegatina o un avatar. Versiones: positivo, negativo, sobre naranja y pegatina (círculo naranja). Se genera con `python3 tools/farola.py docs/marca`.
- **Símbolo** (`docs/marca/simbolo*.svg`): una farola moderna dentro de un aro grueso, como un emblema de tienda de graffiti (en la línea del sello de Writers Madrid), con la luz en naranja: baja de la cabeza ondeando en una S pronunciada, llega al suelo y se abre en un charco con el centro más claro. Las otras propuestas (onda suave, campana, onda marcada, campana con línea de suelo, S fuerte, S en espejo y la recta) están en `docs/marca/propuestas/`. Plano y rotundo, para que se lea en un favicon, una pegatina o un avatar. Versiones: positivo, negativo, sobre naranja y pegatina (círculo naranja). Se genera con `python3 tools/farola.py docs/marca`.
- **Logotipo** (`docs/marca/logotipo*.svg`): «TAKE THE STREET» en **Grindy Brush**, todo en negro (o en blanco sobre negro). Va convertido a trazados, así que no hace falta la fuente. Hay versión en una línea y en dos.
- **Firma**: símbolo + logotipo. Es lo que va arriba a la izquierda de la web.
- **Ilustración** (`docs/calle.svg`): la imagen principal de la portada, nunca en la cabecera. Ver el apartado 6.

1
docs/marca/propuestas/farola-5-s.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C64,48 102,60 92,76 H40 C58,60 40,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 641 B

1
docs/marca/propuestas/farola-6-s-media.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 640 B

1
docs/marca/propuestas/farola-7-s-espejo.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C66,50 100,58 92,76 H38 C30,58 68,50 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 641 B

1
docs/marca/propuestas/farola-8-s-espejo-media.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,50 94,58 92,76 H38 C36,58 64,50 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 640 B

2
docs/marca/simbolo-naranja.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect width="100" height="100" fill="#f04e23"/><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z" fill="#fff"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#fff"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffe2a8"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect width="100" height="100" fill="#f04e23"/><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#fff"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#fff"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffe2a8"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 681 B

After

Width:  |  Height:  |  Size: 681 B

Before After
Before After

2
docs/marca/simbolo-negativo.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect width="100" height="100" fill="#111"/><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#fff" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#fff"/><circle cx="50" cy="50" r="45" fill="none" stroke="#fff" stroke-width="7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect width="100" height="100" fill="#111"/><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#fff" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#fff"/><circle cx="50" cy="50" r="45" fill="none" stroke="#fff" stroke-width="7"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 684 B

After

Width:  |  Height:  |  Size: 684 B

Before After
Before After

2
docs/marca/simbolo.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 640 B

After

Width:  |  Height:  |  Size: 640 B

Before After
Before After

10
sites/takethestreet/es/index.html
View file

File diff suppressed because one or more lines are too long

2
sites/takethestreet/favicon.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 640 B

After

Width:  |  Height:  |  Size: 640 B

Before After
Before After

10
sites/takethestreet/fr/index.html
View file

File diff suppressed because one or more lines are too long

2
sites/takethestreet/img/simbolo.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 640 B

After

Width:  |  Height:  |  Size: 640 B

Before After
Before After

10
sites/takethestreet/index.html
View file

File diff suppressed because one or more lines are too long

10
sites/takethestreet/it/index.html
View file

File diff suppressed because one or more lines are too long

10
sites/takethestreet/pt/index.html
View file

File diff suppressed because one or more lines are too long

10
sites/tomalacalle/en/index.html
View file

File diff suppressed because one or more lines are too long

2
sites/tomalacalle/favicon.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 640 B

After

Width:  |  Height:  |  Size: 640 B

Before After
Before After

10
sites/tomalacalle/fr/index.html
View file

File diff suppressed because one or more lines are too long

2
sites/tomalacalle/img/simbolo.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="27" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.7" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs><g clip-path="url(#c)"><path d="M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="26" ry="5.5" fill="#f45a1c"/><ellipse cx="65" cy="76" rx="16.1" ry="3.0" fill="#ffb03a"/></g><g clip-path="url(#c)"><path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="#111" stroke-width="8"/></g><rect x="55" y="21" width="27" height="11" rx="3" fill="#111"/><circle cx="50" cy="50" r="45" fill="none" stroke="#111" stroke-width="7"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 640 B

After

Width:  |  Height:  |  Size: 640 B

Before After
Before After

10
sites/tomalacalle/index.html
View file

File diff suppressed because one or more lines are too long

10
sites/tomalacalle/it/index.html
View file

File diff suppressed because one or more lines are too long

10
sites/tomalacalle/pt/index.html
View file

File diff suppressed because one or more lines are too long

12
tools/farola.py
View file

@ -7,8 +7,14 @@ CONOS = {
"onda-suave": "M57,33 H77 C82,46 85,55 85,62 C85,69 88,73 89,76 H41 C42,72 45,69 45,62 C45,54 51,45 57,33 Z",
"campana": "M57,33 H77 C78,52 82,66 92,76 H38 C48,66 56,52 57,33 Z",
"onda": "M57,33 H77 C86,42 80,52 86,61 C90,67 91,72 90,76 H40 C39,72 41,67 44,61 C48,52 44,42 57,33 Z",
# S pronunciada: los dos lados ondean hacia el mismo lado, como una bandera
"s": "M57,33 H77 C64,48 102,60 92,76 H40 C58,60 40,48 57,33 Z",
"s-media": "M57,33 H77 C70,48 96,60 92,76 H40 C54,60 46,48 57,33 Z",
# S en espejo: se estrecha arriba y se abre abajo como una llama
"s-espejo": "M57,33 H77 C66,50 100,58 92,76 H38 C30,58 68,50 57,33 Z",
"s-espejo-media": "M57,33 H77 C70,50 94,58 92,76 H38 C36,58 64,50 57,33 Z",
}
CHARCO = {"onda-suave": 24, "campana": 27, "onda": 25}
CHARCO = {"onda-suave": 24, "campana": 27, "onda": 25, "s": 26, "s-media": 26, "s-espejo": 27, "s-espejo-media": 27}
def luz_(cono, luz, clara, ink, suelo=False):
out = f'<path d="{CONOS[cono]}" fill="{luz}"/>'
@ -22,7 +28,7 @@ def luz_(cono, luz, clara, ink, suelo=False):
out += f'<path d="M8,84 H92" stroke="{ink}" stroke-width="3"/>'
return out
def farola(estilo="aro", ink=INK, luz=LUZ, fondo=None, papel=BL, clara=CLARA, cono="campana", suelo=False):
def farola(estilo="aro", ink=INK, luz=LUZ, fondo=None, papel=BL, clara=CLARA, cono="s-media", suelo=False):
bg = f'<rect width="100" height="100" fill="{fondo}"/>' if fondo else ""
if estilo == "aro":
defs = '<defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs>'
@ -54,3 +60,5 @@ if __name__ == "__main__":
for n, (cono, suelo) in enumerate((("onda-suave", False), ("campana", False), ("onda", False), ("campana", True)), 1):
open(f"{d}/propuestas/farola-{n}-{cono}{'-suelo' if suelo else ''}.svg", "w").write(svg(farola(cono=cono, suelo=suelo)))
open(f"{d}/propuestas/farola-recta.svg", "w").write(svg(farola(cono="recta")))
for n, cono in enumerate(("s", "s-media", "s-espejo", "s-espejo-media"), 5):
open(f"{d}/propuestas/farola-{n}-{cono}.svg", "w").write(svg(farola(cono=cono)))