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

Farola: la luz con una onda suave y un naranja menos rojo

Browse source
This commit is contained in:
hacklab 2026-10-14 12:49:55 +02:00
parent 0af7d5f937
commit ab10b3af38
11 changed files with 22 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 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: 615 B

After

Width:  |  Height:  |  Size: 662 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><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 615 B

After

Width:  |  Height:  |  Size: 662 B

Before After
Before After

2
docs/marca/simbolo-pegatina.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="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>
<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="#f45a1c"/><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 Swipe Overlay

Before

Width:  |  Height:  |  Size: 623 B

After

Width:  |  Height:  |  Size: 623 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><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 571 B

After

Width:  |  Height:  |  Size: 618 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"><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 571 B

After

Width:  |  Height:  |  Size: 618 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"/><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 615 B

After

Width:  |  Height:  |  Size: 662 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"><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 571 B

After

Width:  |  Height:  |  Size: 618 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"><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 571 B

After

Width:  |  Height:  |  Size: 618 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"/><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 615 B

After

Width:  |  Height:  |  Size: 662 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"><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>
<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 C80.7,53.8 94.3,71.2 98,92 H36 C46.3,73.5 46.7,51.5 57,33 Z" fill="#f45a1c" 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: 571 B

After

Width:  |  Height:  |  Size: 618 B

Before After
Before After

15
tools/farola.py
View file

@ -1,11 +1,20 @@
import sys
NAR, INK, BL = "#f04e23", "#111", "#fff"
NAR, LUZ, INK, BL = "#f04e23", "#f45a1c", "#111", "#fff"
def farola(estilo="aro", ink=INK, luz=NAR, fondo=None, papel=BL):
def onda(a, b, amp):
(x0, y0), (x1, y1) = a, b
dx, dy = x1 - x0, y1 - y0
L = (dx * dx + dy * dy) ** .5
px, py = -dy / L * amp, dx / L * amp
c1 = (x0 + dx / 3 + px, y0 + dy / 3 + py)
c2 = (x0 + dx * 2 / 3 - px, y0 + dy * 2 / 3 - py)
return f"C{c1[0]:.1f},{c1[1]:.1f} {c2[0]:.1f},{c2[1]:.1f} {x1},{y1}"
def farola(estilo="aro", ink=INK, luz=LUZ, fondo=None, papel=BL):
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>'
cono = f'<path d="M57,33 H77 L98,92 H36 Z" fill="{luz}" clip-path="url(#c)"/>'
cono = f'<path d="M57,33 H77 {onda((77, 33), (98, 92), 3.5)} H36 {onda((36, 92), (57, 33), 3.5)} 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}"/>'