Typstry.jl
Typstry.jl copied to clipboard
jakobjpeters
Logo tweaks
Hi! I think Typstry is awesome, and I hope it's very successful!
While visiting this page a few times, I started having a few thoughts about the logo.
I think it's really good - stacked windows... But you could also say "pages" by turning the corner down:
Also, because it's all about typesetting, I think you could usefully add some type. The Typst "t" (font Buenard Bold) works OK and aids recognition:
I suppose you could arrange the pages in a grid to create a more rectangular logo:
I played with an idea to fuse the glyph and the tiles together, which doesn't look too bad:
Anyway, feel free to ignore my idle thoughts!
Thank you for the appreciation and the time you've spent on these designs. I'm definitely not a designer, and am grateful for your insights. I especially like your design with both the turned-corner, the "t", using stacked pages! I'll mull it over for a bit but am currently leaning towards using that design :D
Do you happen to have the code available to generate the logo with stacked pages, the turned corner, and the t? If not, no worries!
code for stacked pages picture
using Luxor, Colors
# will draw the letter "t" in the "Buenard-Bold" font
function t()
Path([
PathMove(Point(3.30078125, 21.1484375)),
PathCurve(Point(3.30078125, 24.94921875), Point(3.8515625, 27.5), Point(4.953125, 28.80078125)),
PathCurve(Point(6.05078125, 30.1015625), Point(8.078125, 30.75), Point(11.02734375, 30.75)),
PathCurve(Point(13.9765625, 30.75), Point(17.80078125, 29.25), Point(22.5, 26.25)),
PathLine(Point(25.5, 31.19921875)),
PathCurve(Point(16.69921875, 38.5), Point(9.453125, 42.1484375), Point(3.75, 42.1484375)),
PathCurve(Point(-1.94921875, 42.1484375), Point(-6.44921875, 40.7734375), Point(-9.75, 38.0234375)),
PathCurve(Point(-13.05078125, 35.2734375), Point(-14.69921875, 30.3984375), Point(-14.69921875, 23.3984375)),
PathLine(Point(-14.69921875, -15.8984375)),
PathLine(Point(-22.19921875, -15.8984375)),
PathLine(Point(-23.3984375, -21.44921875)),
PathLine(Point(-14.69921875, -24.1484375)),
PathLine(Point(-14.69921875, -31.5)),
PathLine(Point(3.30078125, -39.75)),
PathLine(Point(3.30078125, -23.25)),
PathLine(Point(21.0, -24.6015625)),
PathLine(Point(19.3515625, -14.8515625)),
PathLine(Point(3.30078125, -15.44921875))
])
end
function drawpaper(pos, w, h;
maincolor=colorant"black",
tabcolor=colorant"grey29",
edgecolor=colorant"grey70")
@layer begin
translate(pos)
p = box(O, w, h)
insert!(p, 3, between(p[2], p[3], (w - w / 4) / w))
p[4] = Point(p[4].x, p[4].y + (w / 4))
sethue(maincolor)
poly(p, :fillpreserve, close=true)
@layer begin
sethue(edgecolor)
strokepath()
end
col = HSL(maincolor)
sethue(HSL(tabcolor))
tp = Point(p[3].x, p[4].y)
poly([p[3], tp, p[4]], :fillpreserve, close=true)
@layer begin
sethue(edgecolor)
strokepath()
end
end
end
function main()
Drawing(500, 500, "/tmp/typstlogo.svg")
origin()
squircle(O, 245, 245, :clip, rt=0.3)
background("black")
setlinejoin("bevel")
cols = [Luxor.julia_purple, Luxor.julia_green, Luxor.julia_red, Luxor.julia_blue]
w, h = paper_sizes["A4"] ./ 3
setline(3)
for i in 1:4
col1 = RGB(cols[i]...)
col2 = RGB(1.4 .* cols[i]...) # lighter
pt = between(boxtopright(), boxbottomleft(), rescale.(i, 1, 4, 0.4, 0.6))
drawpaper(pt, w, h,
maincolor = col1,
tabcolor = col2,
edgecolor = col2
)
i == 4 && begin
# the typst "t"
@layer begin
translate(pt)
scale(2)
sethue("white")
drawpath(t(), :fill)
end
end
end
finish()
preview()
end
main()
I wanted to blend our styles a bit, here's what I have so far! It still needs to center and scale the t, but I'm otherwise pretty pleased!
code
using Luxor:
Drawing, PathCurve, PathLine, PathMove, Path, Point,
julia_blue, julia_green, julia_purple, julia_red, paper_sizes,
drawpath, finish, poly, rect, sethue
path_curves(xs::NTuple{3, NTuple{2, Float64}}...) = map(x -> PathCurve(Point.(x)...), xs)
logo = joinpath(ENV["HOME"], "logo.svg")
sheet_width, sheet_height = paper_sizes["A4"] ./ 4
spacing = 0.2
drawing_width, drawing_height = (3 * spacing + 1) .* (sheet_width, sheet_height)
fold_height = spacing * sheet_height
Drawing(drawing_width, drawing_height, :svg, logo)
for (color, top_left) in zip(
[julia_purple, julia_green, julia_red, julia_blue],
map(i -> Point((3 * spacing - i) * sheet_width, i * sheet_height), 0:spacing:(3 * spacing))
)
bottom_left = top_left + Point(0, sheet_height)
bottom_right = bottom_left + Point(sheet_width, 0)
top_rights = (top_left + Point(sheet_width, 0)) .+ (
Point(0, fold_height), Point(-fold_height, 0)
)
sethue(color)
poly([top_left, bottom_left, bottom_right, top_rights...]; action = :fill)
sethue(1.4 .* color)
poly([top_rights..., Point(top_rights[2].x, top_rights[1].y)]; action = :fill)
end
# TODO: scale and center
using Luxor: translate
translate(Point(0.5 .* (drawing_width, drawing_height) .+ (-40, 80)))
sethue("white")
drawpath(Path([
PathMove(Point(3.30078125, 21.1484375)),
path_curves(
((3.30078125, 24.94921875), (3.8515625, 27.5), (4.953125, 28.80078125)),
((6.05078125, 30.1015625), (8.078125, 30.75), (11.02734375, 30.75)),
((13.9765625, 30.75), (17.80078125, 29.25), (22.5, 26.25))
)...,
PathLine(Point(25.5, 31.19921875)),
path_curves(
((16.69921875, 38.5), (9.453125, 42.1484375), (3.75, 42.1484375)),
((-1.94921875, 42.1484375), (-6.44921875, 40.7734375), (-9.75, 38.0234375)),
((-13.05078125, 35.2734375), (-14.69921875, 30.3984375), (-14.69921875, 23.3984375))
)...,
PathLine.(Point.((
(-14.69921875, -15.8984375),
(-22.19921875, -15.8984375),
(-23.3984375, -21.44921875),
(-14.69921875, -24.1484375),
(-14.69921875, -31.5),
(3.30078125, -39.75),
(3.30078125, -23.25),
(21.0, -24.6015625),
(19.3515625, -14.8515625),
(3.30078125, -15.44921875)
)))...
]), :fill)
finish()
using Luxor: preview
preview()
Any ideas on how to debug this?
# this works
fontface("Buenard")
# this does not work; silently uses a fallback font
fontface("Buenard-Bold")
fontsize(128)
text("t", sheet_width / 4, 3 * fold_height + 3 * sheet_height / 4)
> fc-list | rg Buenard
/usr/share/fonts/Buenard/Buenard-Medium.ttf: Buenard,Buenard Medium:style=Medium,Regular
/usr/share/fonts/Buenard/Buenard-Regular.ttf: Buenard:style=Regular
/usr/share/fonts/Buenard/Buenard-SemiBold.ttf: Buenard,Buenard SemiBold:style=SemiBold,Regular
/usr/share/fonts/Buenard/Buenard-Bold.ttf: Buenard:style=Bold
It can be tricky sometimes. It works for me on my Mac ... 🤔
Perhaps try
setfont("Buenard Bold", 180)
settext("t")
and restarting Julia can help when you're playing with fonts...
That code works, thank you! Maybe I need to restart my laptop for the other way to work.
I was going to suggest using Typstry (:)) but I had trouble finding the Bold too.
using Luxor
using Typstry
d1 = Drawing(400, 400, :svg)
origin()
background("#ddd")
text(typst"""
#set page(width: 150pt, height: 200pt, fill: rgb("#eee"))
#set text(font: "Buenard", baseline: 100pt, size: 200pt, weight: 700)
t
""", O)
finish()
d2 = Drawing(400, 400, :svg)
origin()
background("#dde")
text(typst"""
#set page(width: 150pt, height: 200pt, fill: rgb("#eee"))
#set text(font: "Buenard", baseline: 100pt, size: 200pt)
t
""", O)
finish()
hcat(d1, d2)
I could only get it by specifying the weight (700).
Fonts are really frustrating to work with! :)
oooh that's a fun idea :) maybe I'll refactor in the future.
Anyways, thank you again for the awesome design! ✨