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

Símbolo: farola en un aro, como un sello de tienda de graffiti

Browse source
This commit is contained in:
hacklab 2026-10-14 12:46:00 +02:00
parent 0264caa2d0
commit b67ebf2132
12 changed files with 35 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -255,7 +255,7 @@ Tres piezas, cada una con su uso:
![Hoja de marca](docs/marca/hoja.png)
- **Símbolo** (`docs/marca/simbolo*.svg`): una farola al estilo de los *throw-ups* de los writers: relleno naranja, contorno negro grueso, brillos blancos, chorreones y destellos en la luz. Es la luz que se queda encendida en la plaza. Se genera con `python3 tools/farola.py docs/marca`. Sirve para el favicon, los avatares de redes y las pegatinas, y se lee hasta a 16 px. Tres versiones: positivo, negativo y sobre naranja.
- **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 el cono de luz en naranja. 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.

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"/><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#fff" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#111" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#111" stroke="#111" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#111"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#111"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#111"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#fff"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#f04e23" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#f04e23" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#f04e23" stroke="#111" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#fff" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#111" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 615 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"/><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#fff" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#fff" stroke="#fff" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#fff"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#fff"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#fff"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#fff" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 615 B

Before After
Before After

1
docs/marca/simbolo-pegatina.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="48"/></clipPath></defs><circle cx="50" cy="50" r="48" fill="#f04e23"/><g clip-path="url(#c)"><path d="M33,99 V38 Q33,22 49,22 H58" fill="none" stroke="#111" stroke-width="9"/></g><rect x="52" y="17" width="30" height="11" rx="3" fill="#111"/><path d="M58,35 L50,52" stroke="#fff" stroke-width="4" stroke-linecap="round"/><path d="M67,36 L67,56" stroke="#fff" stroke-width="4" stroke-linecap="round"/><path d="M76,35 L84,52" stroke="#fff" stroke-width="4" stroke-linecap="round"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 623 B

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"><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#111" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#111" stroke="#111" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#111"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#111"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#111"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#111" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#111" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 571 B

Before After
Before After

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"><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#111" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#111" stroke="#111" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#111"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#111"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#111"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#111" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#111" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 571 B

Before After
Before After

2
sites/takethestreet/img/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"/><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#fff" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#fff" stroke="#fff" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#fff"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#fff"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#fff"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#fff" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 615 B

Before After
Before After

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"><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#111" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#111" stroke="#111" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#111"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#111"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#111"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#111" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#111" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 571 B

Before After
Before After

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"><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#111" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#111" stroke="#111" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#111"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#111"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#111"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#111" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#111" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 571 B

Before After
Before After

2
sites/tomalacalle/img/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"/><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#fff" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#fff" stroke="#fff" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#fff"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#fff"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#fff"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#fff" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 615 B

Before After
Before After

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"><path d="M63,22 H88 L98,90 H50 Z" fill="#f2b705" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="#f04e23" opacity=".35"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#111" stroke-width="17" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#111" stroke="#111" stroke-width="7" stroke-linejoin="round"/><path d="M21.3,60 L25.7,60 L25.04,72 Q23.5,75.74 21.96,72 Z" fill="#111"/><path d="M63.2,20 L66.8,20 L66.26,28 Q65,31.06 63.74,28 Z" fill="#111"/><path d="M88.5,19 L91.5,19 L91.05,25 Q90,27.55 88.95,25 Z" fill="#111"/><path d="M27,99 V38 Q27,15 50,15 H62" fill="none" stroke="#f04e23" stroke-width="8" stroke-linecap="round"/><path d="M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z" fill="#f04e23"/><path d="M24.5,80 V52 M24.5,46 V43" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M62,10 Q66,7 74,7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M76,39 Q78.86,49.14 89,52 Q78.86,54.86 76,65 Q73.14,54.86 63,52 Q73.14,49.14 76,39 Z" fill="#f2b705" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/><path d="M62,67 Q63.54,72.46 69,74 Q63.54,75.54 62,81 Q60.46,75.54 55,74 Q60.46,72.46 62,67 Z" fill="#fff" stroke="#111" stroke-width="2" stroke-linejoin="round"/></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><path d="M57,33 H77 L98,92 H36 Z" fill="#f04e23" clip-path="url(#c)"/><ellipse cx="67" cy="86" rx="22" ry="5" fill="#111" clip-path="url(#c)" opacity=".25"/><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: 1.4 KiB

After

Width:  |  Height:  |  Size: 571 B

Before After
Before After

50
tools/farola.py
View file

@ -1,32 +1,30 @@
import sys
NAR, AMA, INK = "#f04e23", "#f2b705", "#111"
NAR, INK, BL = "#f04e23", "#111", "#fff"
def estrella(cx, cy, r, col, borde=None, bw=0):
k = r * .22
d = (f"M{cx},{cy - r} Q{cx + k},{cy - k} {cx + r},{cy} Q{cx + k},{cy + k} {cx},{cy + r} "
f"Q{cx - k},{cy + k} {cx - r},{cy} Q{cx - k},{cy - k} {cx},{cy - r} Z")
b = f' stroke="{borde}" stroke-width="{bw}" stroke-linejoin="round"' if borde else ""
return f'<path d="{d}" fill="{col}"{b}/>'
def farola(ink=INK, rell=NAR, fondo=None, brillo="#fff"):
def farola(estilo="aro", ink=INK, luz=NAR, fondo=None, papel=BL):
bg = f'<rect width="100" height="100" fill="{fondo}"/>' if fondo else ""
eje = "M27,99 V38 Q27,15 50,15 H62"
cabeza = "M56,9 Q60,4 74,4 Q90,4 94,12 Q96,18 88,20 H62 Q54,20 54,15 Q54,11 56,9 Z"
luz = f'<path d="M63,22 H88 L98,90 H50 Z" fill="{AMA}" opacity=".28"/><path d="M68,22 H83 L88,90 H58 Z" fill="{rell}" opacity=".35"/>'
gotas = "".join(f'<path d="M{x - w},{y0} L{x + w},{y0} L{x + w * .7},{y1} Q{x},{y1 + w * 1.7} {x - w * .7},{y1} Z" fill="{ink}"/>'
for x, w, y0, y1 in ((23.5, 2.2, 60, 72), (65, 1.8, 20, 28), (90, 1.5, 19, 25)))
return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">{bg}{luz}'
f'<path d="{eje}" fill="none" stroke="{ink}" stroke-width="17" stroke-linecap="round"/>'
f'<path d="{cabeza}" fill="{ink}" stroke="{ink}" stroke-width="7" stroke-linejoin="round"/>'
f'{gotas}'
f'<path d="{eje}" fill="none" stroke="{rell}" stroke-width="8" stroke-linecap="round"/>'
f'<path d="{cabeza}" fill="{rell}"/>'
f'<path d="M24.5,80 V52 M24.5,46 V43" stroke="{brillo}" stroke-width="2.4" stroke-linecap="round"/>'
f'<path d="M62,10 Q66,7 74,7" fill="none" stroke="{brillo}" stroke-width="2.4" stroke-linecap="round"/>'
f'{estrella(76, 52, 13, AMA, ink, 2.5)}{estrella(62, 74, 7, brillo, ink, 2)}</svg>\n')
if estilo == "aro":
defs = '<defs><clipPath id="c"><circle cx="50" cy="50" r="42"/></clipPath></defs>'
cono = f'<path d="M57,33 H77 L98,92 H36 Z" fill="{luz}" clip-path="url(#c)"/>'
suelo = f'<ellipse cx="67" cy="86" rx="22" ry="5" fill="{ink}" clip-path="url(#c)" opacity=".25"/>'
poste = f'<path d="M37,96 V40 Q37,25 52,25 H60" fill="none" stroke="{ink}" stroke-width="8"/>'
cabeza = f'<rect x="55" y="21" width="27" height="11" rx="3" fill="{ink}"/>'
aro = f'<circle cx="50" cy="50" r="45" fill="none" stroke="{ink}" stroke-width="7"/>'
return defs + cono + suelo + f'<g clip-path="url(#c)">{poste}</g>' + cabeza + aro
pegatina = f'<circle cx="50" cy="50" r="48" fill="{luz}"/>'
poste = f'<path d="M33,99 V38 Q33,22 49,22 H58" fill="none" stroke="{ink}" stroke-width="9"/>'
cabeza = f'<rect x="52" y="17" width="30" height="11" rx="3" fill="{ink}"/>'
rayos = "".join(f'<path d="M{x0},{y0} L{x1},{y1}" stroke="{papel}" stroke-width="4" stroke-linecap="round"/>'
for x0, y0, x1, y1 in ((58, 35, 50, 52), (67, 36, 67, 56), (76, 35, 84, 52)))
return f'<defs><clipPath id="c"><circle cx="50" cy="50" r="48"/></clipPath></defs>{pegatina}<g clip-path="url(#c)">{poste}</g>{cabeza}{rayos}'
def svg(cuerpo, fondo=None):
bg = f'<rect width="100" height="100" fill="{fondo}"/>' if fondo else ""
return f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">{bg}{cuerpo}</svg>\n'
if __name__ == "__main__":
d = sys.argv[1]
open(f"{d}/simbolo.svg", "w").write(farola())
open(f"{d}/simbolo-negativo.svg", "w").write(farola(fondo=INK, ink="#fff"))
open(f"{d}/simbolo-naranja.svg", "w").write(farola(fondo=NAR, rell="#fff", brillo=NAR))
open(f"{d}/simbolo.svg", "w").write(svg(farola()))
open(f"{d}/simbolo-negativo.svg", "w").write(svg(farola(ink=BL, papel=INK), INK))
open(f"{d}/simbolo-naranja.svg", "w").write(svg(farola(luz=BL, papel=NAR), NAR))
open(f"{d}/simbolo-pegatina.svg", "w").write(svg(farola("pegatina")))