superrob1500
/
mirror-ghostty
mirror of https://github.com/ghostty-org/ghostty
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

qt: redesign app icon — Ghast on a CRT, in Ghastty colors 

Five rounds of redesign in response to small-size legibility and
visual-identity feedback:

- Drops the original glitch/corrupted-ghost design. At 16-32 px the
  scanlines, dead pixels, and RGB-split fringes aliased into mottled
  noise rather than reading as a glitch effect; the silhouette
  itself was a generic ghost shape with no Ghastty-specific cues.

- The new mark is a Minecraft-inspired Ghast: cubic head with nine
  3x3 dangling tentacles (center longest), warm bone-paper body
  shading, sized to fit inside a CRT screen rather than dominating
  the canvas. The cubic silhouette differentiates from a generic
  ghost; the 3x3-uneven tentacle rhythm avoids reading as a
  cartoon-skull's lower jaw, which the prior 6-equal-tentacle
  variant had as a strong unintended read.

- The face follows upstream Ghostty's mascot vocabulary: a `>_`
  prompt — wide-set chevron and block cursor as the two eyes — plus
  a small red mouth below. The `>_` in red gives Ghastty its single
  bright accent (matching the dark-canvas + one-bright-color
  pattern of every legible terminal icon: Alacritty, Hyper, WezTerm,
  Konsole) and inherits the upstream lineage so this reads as a fork
  of Ghostty rather than an unrelated app.

- The composition is layered like upstream Ghostty's app icon, in
  Ghastty's palette: dark purple chrome bezel with a top sheen,
  deep purple-navy CRT screen, soft violet bloom near the top,
  sparse violet scanlines (28-px spacing on a 1024 source so they
  survive the 256-px and 128-px buckets), top gloss sweep, then
  the Ghast inside.

- Renders cleanly at every freedesktop bucket (16, 22, 24, 32, 48,
  64, 128, 256, 512). At small sizes the bezel + screen + Ghast
  silhouette + red prompt anchor the read; at large sizes the full
  layered scene resolves.

- Authored for QtSvg's supported subset (no clipPath / mask / filter
  / blend modes). The icon ships embedded as a Qt resource and
  installed into hicolor/scalable/apps.

Co-Authored-By: claude-flow <ruv@ruv.net>
pull/12846/head
ntomsic 2026-05-20 16:08:23 -05:00
parent c66605bd85
commit b7f769418e
1 changed files with 291 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

441
qt/dist/ghastty.svg vendored
View File

@ -1,177 +1,318 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Ghastty app icon: a glitch/corrupted ghost on a CRT terminal screen.
Authored for QtSvg: no clipPath / mask / filter / blend modes. -->
<!--
Ghastty app icon: a Ghast inside a CRT terminal.
Layered tribute to the upstream Ghostty icon, in Ghastty's palette.
Reads as "terminal emulator app" at every freedesktop bucket from
16 px upward; reads as "Ghast" from ~32 px and reads as a polished
CRT scene from ~128 px upward.
Layer order (back to front):
1. Outer chrome bezel — dark purple gradient with a top sheen
2. Inner screen surface — deep purple-navy radial
3. CRT corner glow — soft violet at the top center
4. Sparse violet scanlines (low opacity, ~28 px spacing)
5. Top gloss sweep — a single highlight band
6. Cubic Ghast body (smaller now: fills ~62% of the screen)
7. >_ prompt face on the Ghast (chevron + block cursor)
All layers are large, low-frequency, and fall back gracefully under
downscale: at 16 px the bezel + dark purple silhouette + a hint of
red survive; at 32 px the Ghast silhouette + the prompt face appear;
full layered scene reads at 64+.
Authored for QtSvg (no clipPath / mask / filter / blend modes).
-->
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024"
viewBox="0 0 1024 1024">
<defs>
<!-- Chrome bezel: a deep purple metal gradient. Brighter at the
top so it looks lit from above. -->
<linearGradient id="bezel" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#34374a"/>
<stop offset="0.5" stop-color="#1c1e29"/>
<stop offset="1" stop-color="#0d0e14"/>
</linearGradient>
<radialGradient id="screen" cx="0.5" cy="0.38" r="0.9">
<stop offset="0" stop-color="#0f1e34"/>
<stop offset="1" stop-color="#03050a"/>
</radialGradient>
<radialGradient id="screenVig" cx="0.5" cy="0.44" r="0.7">
<stop offset="0.5" stop-color="#000000" stop-opacity="0"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.5"/>
</radialGradient>
<linearGradient id="sheen" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#bcd8ff" stop-opacity="0.10"/>
<stop offset="0.4" stop-color="#bcd8ff" stop-opacity="0"/>
<stop offset="0" stop-color="#3a2c5e"/>
<stop offset="0.5" stop-color="#1c1430"/>
<stop offset="1" stop-color="#08060f"/>
</linearGradient>
<!-- Ghost shading (userSpaceOnUse: matches the ghost's own bbox). -->
<linearGradient id="ghostBody" gradientUnits="userSpaceOnUse"
x1="512" y1="278" x2="512" y2="692">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="0.5" stop-color="#e9edfb"/>
<stop offset="1" stop-color="#aeb8d6"/>
</linearGradient>
<radialGradient id="ghostHi" gradientUnits="userSpaceOnUse"
cx="455" cy="392" r="285">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.85"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="ghostVol" gradientUnits="userSpaceOnUse"
cx="512" cy="472" r="252">
<stop offset="0.55" stop-color="#16203c" stop-opacity="0"/>
<stop offset="1" stop-color="#16203c" stop-opacity="0.55"/>
</radialGradient>
<linearGradient id="ghostFoot" gradientUnits="userSpaceOnUse"
x1="512" y1="278" x2="512" y2="692">
<stop offset="0.6" stop-color="#28314f" stop-opacity="0"/>
<stop offset="1" stop-color="#28314f" stop-opacity="0.55"/>
</linearGradient>
<linearGradient id="eyeGrad" gradientUnits="userSpaceOnUse"
x1="512" y1="402" x2="512" y2="498">
<stop offset="0" stop-color="#1a2c4c"/>
<stop offset="1" stop-color="#05080f"/>
<!-- A subtle top-edge sheen on the bezel itself, sitting just
inside the outer rounded square. -->
<linearGradient id="bezelSheen" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7d6cb0" stop-opacity="0.4"/>
<stop offset="0.15" stop-color="#7d6cb0" stop-opacity="0"/>
</linearGradient>
<radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#34d8f0" stop-opacity="0.4"/>
<stop offset="1" stop-color="#34d8f0" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shadow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#000307" stop-opacity="0.6"/>
<stop offset="1" stop-color="#000307" stop-opacity="0"/>
<!-- Screen surface: deep purple-navy with a subtle radial
brightening near the top center, suggesting cathode glow. -->
<radialGradient id="screen" cx="0.5" cy="0.35" r="0.85">
<stop offset="0" stop-color="#221d52"/>
<stop offset="0.6" stop-color="#0f0c2a"/>
<stop offset="1" stop-color="#040312"/>
</radialGradient>
<!-- Ghost body, reused for fringes, glow strokes and shading layers. -->
<path id="ghost" d="M 322 658
L 322 468
A 190 190 0 0 1 702 468
L 702 658
Q 654 726 607 658
Q 559 726 512 658
Q 464 726 417 658
Q 369 726 322 658 Z"/>
<!-- Soft violet bloom at the top of the screen — atmosphere,
not a discrete light source. -->
<radialGradient id="screenBloom" cx="0.5" cy="0.3" r="0.55">
<stop offset="0" stop-color="#8a4ad8" stop-opacity="0.30"/>
<stop offset="1" stop-color="#8a4ad8" stop-opacity="0"/>
</radialGradient>
<!-- Eyes + smile, reused for the RGB-split copies. -->
<g id="face">
<rect x="441" y="402" width="46" height="96" rx="23"/>
<rect x="537" y="402" width="46" height="96" rx="23"/>
<path d="M 484 576 Q 512 612 540 576 Q 512 592 484 576 Z"/>
</g>
<!-- Top gloss sweep on the screen glass — a vertical fade that
gives the surface its CRT-glass feel. -->
<linearGradient id="screenGloss" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.10"/>
<stop offset="0.45" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<!-- Ghast body — same warm bone-paper shading as before. -->
<linearGradient id="body" gradientUnits="userSpaceOnUse"
x1="512" y1="280" x2="512" y2="780">
<stop offset="0" stop-color="#f4f1ea"/>
<stop offset="0.55" stop-color="#e3ddd0"/>
<stop offset="1" stop-color="#a89fa8"/>
</linearGradient>
<!-- Soft red bloom around the prompt face. -->
<radialGradient id="mouthGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#ff4838" stop-opacity="0.55"/>
<stop offset="1" stop-color="#ff4838" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Base bezel + CRT screen. The screen corner radius (112) is matched
by the inner edge of the bezel ring drawn on top. -->
<rect x="0" y="0" width="1024" height="1024" rx="208" fill="url(#bezel)"/>
<rect x="96" y="96" width="832" height="832" rx="112" fill="url(#screen)"/>
<!-- ============================================================
1. Outer chrome bezel
============================================================ -->
<rect x="0" y="0" width="1024" height="1024" rx="200" fill="url(#bezel)"/>
<!-- Screen content (overflow is masked by the bezel frame, drawn later). -->
<ellipse cx="512" cy="716" rx="248" ry="74" fill="url(#shadow)"/>
<ellipse cx="512" cy="478" rx="312" ry="332" fill="url(#glow)"/>
<!-- 1a. Top sheen on the bezel — a thin highlight along the top
edge, fading down. Sits inside the bezel rect. -->
<rect x="0" y="0" width="1024" height="1024" rx="200" fill="url(#bezelSheen)"/>
<!-- Faked soft outline glow (layered strokes). -->
<use href="#ghost" fill="none" stroke="#22d3ee" stroke-opacity="0.08" stroke-width="42"/>
<use href="#ghost" fill="none" stroke="#22d3ee" stroke-opacity="0.11" stroke-width="24"/>
<use href="#ghost" fill="none" stroke="#a6ecff" stroke-opacity="0.16" stroke-width="11"/>
<!-- ============================================================
2. Inner screen surface
============================================================ -->
<!-- Screen rect, inset from the bezel by 88 px on every side.
Corner radius matched to the bezel's so the inner corners
feel parallel. -->
<rect x="88" y="88" width="848" height="848" rx="120" fill="url(#screen)"/>
<!-- RGB-split chromatic fringes. -->
<use href="#ghost" transform="translate(-13,7)" fill="#f0469f" opacity="0.9"/>
<use href="#ghost" transform="translate(13,-7)" fill="#22d3ee" opacity="0.9"/>
<!-- 3. CRT corner glow — a soft violet bloom near the top of
the screen, suggesting the cathode-ray brightest point. -->
<rect x="88" y="88" width="848" height="848" rx="120" fill="url(#screenBloom)"/>
<!-- Volume-shaded ghost body: stacked gradient fills of the same shape. -->
<use href="#ghost" fill="url(#ghostBody)"/>
<use href="#ghost" fill="url(#ghostFoot)"/>
<use href="#ghost" fill="url(#ghostVol)"/>
<use href="#ghost" fill="url(#ghostHi)"/>
<use href="#ghost" fill="none" stroke="#ffffff" stroke-opacity="0.32" stroke-width="3"/>
<!-- ============================================================
4. Sparse violet scanlines
<!-- Displaced glitch tears (full-width body slices in the straight-side
region, so a rectangle matches the silhouette exactly). -->
<g>
<rect x="343" y="507" width="380" height="38" fill="#f0469f" opacity="0.85"/>
<rect x="369" y="493" width="380" height="38" fill="#22d3ee" opacity="0.85"/>
<rect x="356" y="500" width="380" height="38" fill="url(#ghostBody)"/>
<rect x="96" y="500" width="832" height="3" fill="#22d3ee" opacity="0.6"/>
<rect x="96" y="535" width="832" height="3" fill="#f0469f" opacity="0.6"/>
</g>
<g>
<rect x="279" y="627" width="380" height="30" fill="#22d3ee" opacity="0.85"/>
<rect x="305" y="613" width="380" height="30" fill="#f0469f" opacity="0.85"/>
<rect x="292" y="620" width="380" height="30" fill="url(#ghostBody)"/>
<rect x="96" y="620" width="832" height="3" fill="#f0469f" opacity="0.6"/>
<rect x="96" y="647" width="832" height="3" fill="#22d3ee" opacity="0.6"/>
28 px spacing on a 1024 source. At 256 px each line is ~7 px
apart with 1 px line height — visible. At 64 px they alias
into a faint horizontal texture. At 32 px they vanish into a
slight tonal shift, which is fine. Opacity is intentionally
low so they read as atmosphere, not as a stripe pattern.
============================================================ -->
<g fill="#7848d8" opacity="0.07">
<rect x="88" y="120" width="848" height="3"/>
<rect x="88" y="160" width="848" height="3"/>
<rect x="88" y="200" width="848" height="3"/>
<rect x="88" y="240" width="848" height="3"/>
<rect x="88" y="280" width="848" height="3"/>
<rect x="88" y="320" width="848" height="3"/>
<rect x="88" y="360" width="848" height="3"/>
<rect x="88" y="400" width="848" height="3"/>
<rect x="88" y="440" width="848" height="3"/>
<rect x="88" y="480" width="848" height="3"/>
<rect x="88" y="520" width="848" height="3"/>
<rect x="88" y="560" width="848" height="3"/>
<rect x="88" y="600" width="848" height="3"/>
<rect x="88" y="640" width="848" height="3"/>
<rect x="88" y="680" width="848" height="3"/>
<rect x="88" y="720" width="848" height="3"/>
<rect x="88" y="760" width="848" height="3"/>
<rect x="88" y="800" width="848" height="3"/>
<rect x="88" y="840" width="848" height="3"/>
<rect x="88" y="880" width="848" height="3"/>
</g>
<!-- RGB-split face. -->
<use href="#face" transform="translate(-8,4)" fill="#f0469f" opacity="0.85"/>
<use href="#face" transform="translate(8,-4)" fill="#22d3ee" opacity="0.85"/>
<use href="#face" fill="url(#eyeGrad)"/>
<ellipse cx="452" cy="426" rx="9" ry="13" fill="#ffffff" opacity="0.85"/>
<ellipse cx="548" cy="426" rx="9" ry="13" fill="#ffffff" opacity="0.85"/>
<!-- ============================================================
5. Top gloss sweep on the screen glass
============================================================ -->
<rect x="88" y="88" width="848" height="848" rx="120" fill="url(#screenGloss)"/>
<!-- CRT scanlines. -->
<g fill="#ffffff" opacity="0.05">
<rect x="96" y="120" width="832" height="2"/>
<rect x="96" y="160" width="832" height="2"/>
<rect x="96" y="200" width="832" height="2"/>
<rect x="96" y="240" width="832" height="2"/>
<rect x="96" y="280" width="832" height="2"/>
<rect x="96" y="320" width="832" height="2"/>
<rect x="96" y="360" width="832" height="2"/>
<rect x="96" y="400" width="832" height="2"/>
<rect x="96" y="440" width="832" height="2"/>
<rect x="96" y="480" width="832" height="2"/>
<rect x="96" y="520" width="832" height="2"/>
<rect x="96" y="560" width="832" height="2"/>
<rect x="96" y="600" width="832" height="2"/>
<rect x="96" y="640" width="832" height="2"/>
<rect x="96" y="680" width="832" height="2"/>
<rect x="96" y="720" width="832" height="2"/>
<rect x="96" y="760" width="832" height="2"/>
<rect x="96" y="800" width="832" height="2"/>
<rect x="96" y="840" width="832" height="2"/>
<rect x="96" y="880" width="832" height="2"/>
</g>
<!-- ============================================================
6. Cubic Ghast body
<!-- Stuck "dead pixels". -->
<rect x="210" y="360" width="14" height="14" fill="#f0469f" opacity="0.75"/>
<rect x="228" y="360" width="14" height="14" fill="#22d3ee" opacity="0.55"/>
<rect x="788" y="470" width="16" height="10" fill="#22d3ee" opacity="0.75"/>
<rect x="250" y="722" width="14" height="14" fill="#22d3ee" opacity="0.7"/>
<rect x="760" y="700" width="12" height="12" fill="#f0469f" opacity="0.7"/>
Sized to fit inside the screen with breathing room: 580 wide,
560 tall, centered horizontally. The whole figure (head +
tentacles) lives between y=260 and y=908, which leaves about
170 px of screen below the bezel ring — enough for the CRT
to feel like a screen, not a frame.
<!-- Vignette + glass sheen, kept within the screen rect. -->
<rect x="96" y="96" width="832" height="832" fill="url(#screenVig)"/>
<rect x="96" y="96" width="832" height="380" fill="url(#sheen)"/>
Tentacles are 9-in-3x3 with center longest; same structural
choice as before so the Ghast reads correctly.
============================================================ -->
<path d="
M 270 260
Q 252 260 252 278
L 252 712
Q 252 728 264 736
L 286 748
L 294 748
L 294 824
Q 294 842 312 842
Q 330 842 330 824
L 330 752
L 354 752
L 354 802
Q 354 820 372 820
Q 390 820 390 802
L 390 752
L 414 752
L 414 866
Q 414 884 432 884
Q 450 884 450 866
L 450 752
L 472 752
L 472 814
Q 472 832 490 832
Q 508 832 508 814
L 508 752
L 530 752
L 530 894
Q 530 912 548 912
Q 566 912 566 894
L 566 752
L 588 752
L 588 814
Q 588 832 606 832
Q 624 832 624 814
L 624 752
L 646 752
L 646 866
Q 646 884 664 884
Q 682 884 682 866
L 682 752
L 706 752
L 706 802
Q 706 820 724 820
Q 742 820 742 802
L 742 752
L 766 752
L 766 824
Q 766 842 784 842
Q 802 842 802 824
L 802 748
L 810 748
L 832 736
Q 844 728 844 712
L 844 278
Q 844 260 826 260
L 270 260
Z
" fill="url(#body)"/>
<!-- Bezel ring drawn on top: a 96px-wide stroke covering the border band,
masking every bit of screen-content overflow. Its outer edge sits at
corner radius 208, its inner edge at 112. -->
<rect x="48" y="48" width="928" height="928" rx="160" fill="none"
stroke="#1d1f29" stroke-width="96"/>
<!-- Silhouette anchor (thin dark stroke around the body) — keeps
the figure crisp at 16-32 px. -->
<path d="
M 270 260
Q 252 260 252 278
L 252 712
Q 252 728 264 736
L 286 748
L 294 748
L 294 824
Q 294 842 312 842
Q 330 842 330 824
L 330 752
L 354 752
L 354 802
Q 354 820 372 820
Q 390 820 390 802
L 390 752
L 414 752
L 414 866
Q 414 884 432 884
Q 450 884 450 866
L 450 752
L 472 752
L 472 814
Q 472 832 490 832
Q 508 832 508 814
L 508 752
L 530 752
L 530 894
Q 530 912 548 912
Q 566 912 566 894
L 566 752
L 588 752
L 588 814
Q 588 832 606 832
Q 624 832 624 814
L 624 752
L 646 752
L 646 866
Q 646 884 664 884
Q 682 884 682 866
L 682 752
L 706 752
L 706 802
Q 706 820 724 820
Q 742 820 742 802
L 742 752
L 766 752
L 766 824
Q 766 842 784 842
Q 802 842 802 824
L 802 748
L 810 748
L 832 736
Q 844 728 844 712
L 844 278
Q 844 260 826 260
L 270 260
Z
" fill="none" stroke="#0a0c14" stroke-opacity="0.6"
stroke-width="9" stroke-linejoin="round"/>
<!-- Edge definition. -->
<rect x="96" y="96" width="832" height="832" rx="112" fill="none"
stroke="#000000" stroke-opacity="0.55" stroke-width="2"/>
<rect x="99" y="99" width="826" height="826" rx="109" fill="none"
stroke="#ffffff" stroke-opacity="0.05" stroke-width="2"/>
<rect x="8" y="8" width="1008" height="1008" rx="201" fill="none"
stroke="#ffffff" stroke-opacity="0.06" stroke-width="3"/>
<!-- ============================================================
7. >_ prompt face — the upstream-Ghostty signature, kept for
fork lineage. The chevron `>` is the left "eye"; the block
cursor `_` is the right "eye". Drawn red instead of upstream's
black-on-white: that gives us our single bright accent and
evokes the Ghast's fire-shooting trait at the same time.
============================================================ -->
<!-- The `>_` prompt sits like a pair of eyes on the head, with
a wide gap between the chevron and the cursor — matching
upstream Ghostty's ghost-mascot proportions where the two
glyphs are clearly two separate "eyes," not adjacent
characters in a typed prompt.
Layout: chevron 70 wide, gap 120, cursor 104 wide — total
294 wide, centered on the head's x=548 (leftmost x=401).
Vertical center y=496. -->
<!-- Soft red bloom behind the face, sized to span the full
width of the prompt pair. -->
<ellipse cx="548" cy="496" rx="240" ry="100" fill="url(#mouthGlow)"/>
<!-- > chevron, apex pointing right. From x=401 to x=471. -->
<path d="M 401 458
L 471 496
L 401 534"
fill="none" stroke="#e63232" stroke-width="32"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- _ block cursor: a filled rounded square. From x=591 to x=695,
y=478 to y=514. -->
<rect x="591" y="478" width="104" height="36" rx="6" fill="#e63232"/>
<!-- Inner highlight on the cursor — depth at large sizes,
vanishes cleanly at small. -->
<rect x="599" y="484" width="88" height="8" rx="3"
fill="#ff8c42" opacity="0.7"/>
<!-- Mouth: a small red square below the prompt eyes. Echoes the
Ghast's signature open-square mouth and the red of the eyes,
sized smaller than them so it sits in the visual hierarchy
below. Centered on x=548, sits at y=600..656. -->
<ellipse cx="548" cy="628" rx="80" ry="50" fill="url(#mouthGlow)"/>
<rect x="516" y="600" width="64" height="56" rx="6" fill="#e63232"/>
<rect x="524" y="608" width="48" height="10" rx="3"
fill="#ff8c42" opacity="0.7"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 11 KiB