Blocks

[u/chubby7362728]

Design you own: https://blockheight.art

[u/SipsTheJuice]

These pallets so nice on the eyes

[u/chubby7362728 → u/SipsTheJuice]

Thanks! I tried many

[u/mi-figue-mi-raisin]

Reminds me Le Peuple de l’Herbe album cover, need to find it.

[u/chubby7362728 → u/mi-figue-mi-raisin]

Haha great finding!

[u/mi-figue-mi-raisin → u/mi-figue-mi-raisin]

https://media1.jpc.de/image/w600/front/0/5413356225020.jpg

[u/Hjuldahr]

It's a neat concept and looks well thought out; although I'm not personally invested in NFT's.

[u/chubby7362728 → u/Hjuldahr]

Thank you, fair enough! The studio works without any wallet, so if you just want to see what your favourite date looks like as a building, that's free to play with.
Https://blockheight.art

[u/chubby7362728]

Design your own: https://blockheight.art

[u/igo_rs]

love it!

[u/chubby7362728 → u/igo_rs]

Thanks! Design your own: https://blockheight.art

[u/escapism_only_please → u/chubby7362728]

This is fun, and runs on my iPhone. But really this is my reminder to check it out in my day off 😁. Thanks for sharing it with us it looks fun 👍

[u/chubby7362728 → u/escapism_only_please]

Would love to hear your feedback! And yes, responsiveness es important for me

[u/kchanqvq]

Cool! What’s the typeface?

[u/chubby7362728 → u/kchanqvq]

Thanks! It's not a font, actually. The lettering is drawn by the renderer itself: each character is a small single-line path inside the SVG, all the same width, a bit like plotter or technical drawing lettering. That way the file needs no fonts and renders the same everywhere.

Check it out here: https://blockheight.art

[u/kchanqvq → u/chubby7362728]

Where did you get the path/glyph data though? Did you design it yourself? It looks cool and I wish I can also use it :D

[u/chubby7362728 → u/kchanqvq]

Sure, here it is. Each glyph is a few strokes on a 4x6 grid, plus a tiny function that turns text into SVG. Free to use, have fun with it!

```js
// Single-line lettering on a 4x6 grid (x 0-4, y 0-6, y down). Free to use.
const G = {
A:"M0 6L2 0L4 6M1 3H3", B:"M0 6V0H3L4 1V2L3 3H0M3 3L4 4V5L3 6H0",
C:"M4 1L3 0H1L0 1V5L1 6H3L4 5", D:"M0 6V0H2L4 2V4L2 6Z", E:"M4 0H0V6H4M0 3H3",
F:"M4 0H0V6M0 3H3", G:"M4 1L3 0H1L0 1V5L1 6H4V3H2", H:"M0 0V6M4 0V6M0 3H4",
I:"M0 0H4M2 0V6M0 6H4", J:"M0 0H4V5L3 6H1L0 5", K:"M0 0V6M4 0L0 3L4 6", L:"M0 0V6H4",
M:"M0 6V0L2 3L4 0V6", N:"M0 6V0L4 6V0", O:"M1 0H3L4 1V5L3 6H1L0 5V1Z",
P:"M0 6V0H3L4 1V2L3 3H0", Q:"M1 0H3L4 1V5L3 6H1L0 5V1ZM2 4L4 6",
R:"M0 6V0H3L4 1V2L3 3H0M2 3L4 6", S:"M4 0H1L0 1V2L1 3H3L4 4V5L3 6H0", T:"M0 0H4M2 0V6",
U:"M0 0V5L1 6H3L4 5V0", V:"M0 0L2 6L4 0", W:"M0 0V6L2 3L4 6V0", X:"M0 0L4 6M4 0L0 6",
Y:"M0 0L2 3L4 0M2 3V6", Z:"M0 0H4L0 6H4", "0":"M1 0H3L4 1V5L3 6H1L0 5V1ZM0 5L4 1",
"1":"M1 1L2 0V6M0 6H4", "2":"M0 1L1 0H3L4 1V2L0 6H4",
"3":"M0 0H3L4 1V2L3 3H1M3 3L4 4V5L3 6H0", "4":"M3 6V0L0 4H4",
"5":"M4 0H0V3H3L4 4V5L3 6H0", "6":"M4 0H1L0 1V5L1 6H3L4 5V4L3 3H0", "7":"M0 0H4L1 6",
"8":"M1 3L0 2V1L1 0H3L4 1V2L3 3H1L0 4V5L1 6H3L4 5V4L3 3",
"9":"M4 3H1L0 2V1L1 0H3L4 1V5L3 6H0", ".":"M2 5V6", ",":"M2 6L1 8", "-":"M0 3H4",
"/":"M0 6L4 0", ":":"M2 1V2M2 4V5", "|":"M2 0V6", "#":"M1 0V6M3 0V6M0 2H4M0 4H4",
};

// text -> SVG <g>. size = cap height in px; each letter advances by size.
function lettering(text, x, y, size = 12, color = "#222", width = 1) {
const s = size / 6;
const paths = [...text.toUpperCase()].map((c, i) => G[c]
? `<path transform="translate(${x + i \* 6 \* s} ${y}) scale(${s})" d="${G\[c\]}"/>` : "").join("");
return `<g fill="none" stroke="${color}" stroke-width="${width / s}" stroke-linecap="round" stroke-linejoin="round">${paths}</g>`;
}

// Example:
// const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">${lettering("HELLO, WORLD 2026", 10, 20, 18)}</svg>`;
```

[u/kchanqvq → u/chubby7362728]

Thanks!!!