site, branding: skeuomorphic marks, and the new Niveus components
The marks are now drawn the way Niveus draws its keys: one light from the upper left, gloss on the faces that catch it, a specular line on the edges that face it, and soft contact shadows. - Shift: shaded slabs, each casting onto the one below. shift-mask.svg is untouched, so the kernel's logo.h coverage mask is unchanged. - Uberblock: bevelled slots in a groove; the newest slot and the root glow. - USB stick: moulded body, steel connector, a lit activity LED. - Pride flag: cloth folds and a hem over the flag's own colours. The pages use the components the new Niveus added: both terminals are .nv-window frames, the origin and first-boot sequences are .nv-steps, the numbers are a .nv-stat-group, and each feature card has an .nv-tile glyph. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01S1giNvrHTrPMPw7V6x1kQ4
This commit is contained in:
Nexoniarz
parent
a8215149a3
commit
c9790df04c
11 changed files with 623 additions and 321 deletions
|
|
@ -57,6 +57,12 @@ the kernel's name (**SchIFT**) as a shape.
|
|||
- **With or without a wordmark.** Set "SchOS" beside it in **Roboto Bold**,
|
||||
which is already in the tree (`ports/Roboto`), Apache-2.0, and already
|
||||
in `NOTICE`.
|
||||
- **Rendered as an object, drawn as a shape.** The colour `shift.svg` is lit
|
||||
the way Niveus lights a key -- one light from the upper left, a gloss across
|
||||
each top face, a specular line on the edges that face it, and a soft shadow
|
||||
from each slab onto the next. None of that is in the silhouette:
|
||||
`shift-mask.svg` is the same geometry with no shading, and it is still what
|
||||
`include/gfx/logo.h` is built from, so the kernel's mark is unchanged.
|
||||
- Non-human and non-animal, permanently. If a character is ever drawn it gets
|
||||
its own mark; a logo that starts growing a face has taken that job.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 13 KiB |
|
|
@ -8,20 +8,101 @@
|
|||
without it the slab has no thickness where it is widest, and the corner reads
|
||||
as a hole rather than an edge.
|
||||
|
||||
Drawn the way Niveus draws a key: light falls from the upper left, so every
|
||||
top face is brightest at its far-left corner and every edge that faces the
|
||||
light carries a thin specular line. The front faces are lit from above and
|
||||
darken towards the ground; the end walls face away and are darkest. Each slab
|
||||
casts a soft shadow on the one below it, which is what makes the stack read
|
||||
as three objects rather than three stripes.
|
||||
|
||||
Geometry is shared with "shift-mask.svg"; see that file.</desc>
|
||||
|
||||
<defs>
|
||||
<!-- top faces: lit corner to far corner -->
|
||||
<linearGradient id="t1" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#A48CFF"/>
|
||||
<stop offset="0.55" stop-color="#7C5CFF"/>
|
||||
<stop offset="1" stop-color="#6A48F0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="t2" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#8064E6"/>
|
||||
<stop offset="0.55" stop-color="#5B44C4"/>
|
||||
<stop offset="1" stop-color="#4E39AE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="t3" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#5A48A8"/>
|
||||
<stop offset="0.55" stop-color="#3C2E85"/>
|
||||
<stop offset="1" stop-color="#332772"/>
|
||||
</linearGradient>
|
||||
<!-- front faces: lit at the top edge, falling into shade -->
|
||||
<linearGradient id="f1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#6E50E8"/>
|
||||
<stop offset="1" stop-color="#4E35BC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="f2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#4E3AAE"/>
|
||||
<stop offset="1" stop-color="#372887"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="f3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#342874"/>
|
||||
<stop offset="1" stop-color="#231A52"/>
|
||||
</linearGradient>
|
||||
<!-- end walls: facing away from the light -->
|
||||
<linearGradient id="w1" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#4F36B4"/>
|
||||
<stop offset="1" stop-color="#3A2690"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="w2" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#3A2A86"/>
|
||||
<stop offset="1" stop-color="#2B1F68"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="w3" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#261C56"/>
|
||||
<stop offset="1" stop-color="#1A133E"/>
|
||||
</linearGradient>
|
||||
<!-- the gloss across each top face, strongest at its back edge -->
|
||||
<linearGradient id="gloss" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.38"/>
|
||||
<stop offset="0.45" stop-color="#FFFFFF" stop-opacity="0.08"/>
|
||||
<stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<filter id="soft" x="-20%" y="-40%" width="140%" height="180%">
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- contact shadows, each cast down and to the right of its slab -->
|
||||
<path fill="#000" opacity="0.35" filter="url(#soft)" d="M58 138 L160 138 L132 170 L28 170 Z"/>
|
||||
<path fill="#000" opacity="0.30" filter="url(#soft)" d="M76 96 L178 96 L150 128 L46 128 Z"/>
|
||||
<path fill="#000" opacity="0.26" filter="url(#soft)" d="M94 54 L196 54 L168 86 L64 86 Z"/>
|
||||
|
||||
<!-- bottom slab -->
|
||||
<path fill="#3C2E85" d="M54 126 L158 126 L128 156 L24 156 Z"/>
|
||||
<path fill="#31256E" d="M24 156 L128 156 L128 167 L24 167 Z"/>
|
||||
<path fill="#291F5C" d="M158 126 L158 137 L128 167 L128 156 Z"/>
|
||||
<path fill="url(#t3)" d="M54 126 L158 126 L128 156 L24 156 Z"/>
|
||||
<path fill="url(#gloss)" d="M54 126 L158 126 L128 156 L24 156 Z"/>
|
||||
<path fill="url(#f3)" d="M24 156 L128 156 L128 167 L24 167 Z"/>
|
||||
<path fill="url(#w3)" d="M158 126 L158 137 L128 167 L128 156 Z"/>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-opacity="0.35" stroke-width="1.2"
|
||||
stroke-linecap="round" d="M24.6 155.4 L54.4 126.6 L157 126.6"/>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-opacity="0.16" stroke-width="1"
|
||||
d="M24 156.5 L128 156.5"/>
|
||||
|
||||
<!-- middle slab -->
|
||||
<path fill="#5B44C4" d="M72 84 L176 84 L146 114 L42 114 Z"/>
|
||||
<path fill="#4B37A6" d="M42 114 L146 114 L146 125 L42 125 Z"/>
|
||||
<path fill="#3F2D8C" d="M176 84 L176 95 L146 125 L146 114 Z"/>
|
||||
<path fill="url(#t2)" d="M72 84 L176 84 L146 114 L42 114 Z"/>
|
||||
<path fill="url(#gloss)" d="M72 84 L176 84 L146 114 L42 114 Z"/>
|
||||
<path fill="url(#f2)" d="M42 114 L146 114 L146 125 L42 125 Z"/>
|
||||
<path fill="url(#w2)" d="M176 84 L176 95 L146 125 L146 114 Z"/>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-opacity="0.42" stroke-width="1.2"
|
||||
stroke-linecap="round" d="M42.6 113.4 L72.4 84.6 L175 84.6"/>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1"
|
||||
d="M42 114.5 L146 114.5"/>
|
||||
|
||||
<!-- top slab -->
|
||||
<path fill="#7C5CFF" d="M90 42 L194 42 L164 72 L60 72 Z"/>
|
||||
<path fill="#6949E0" d="M60 72 L164 72 L164 83 L60 83 Z"/>
|
||||
<path fill="#5B3FC9" d="M194 42 L194 53 L164 83 L164 72 Z"/>
|
||||
<path fill="url(#t1)" d="M90 42 L194 42 L164 72 L60 72 Z"/>
|
||||
<path fill="url(#gloss)" d="M90 42 L194 42 L164 72 L60 72 Z"/>
|
||||
<path fill="url(#f1)" d="M60 72 L164 72 L164 83 L60 83 Z"/>
|
||||
<path fill="url(#w1)" d="M194 42 L194 53 L164 83 L164 72 Z"/>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-opacity="0.55" stroke-width="1.2"
|
||||
stroke-linecap="round" d="M60.6 71.4 L90.4 42.6 L193 42.6"/>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-opacity="0.22" stroke-width="1"
|
||||
d="M60 72.5 L164 72.5"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 5.3 KiB |
|
|
@ -20,25 +20,88 @@
|
|||
survives include/gfx/logo.h, which is a single coverage channel and keeps no
|
||||
colour at all.
|
||||
|
||||
Drawn as Niveus draws a dial: the slots are raised keys set into a groove
|
||||
cut into the surface, bevelled by one light from the upper left, and the
|
||||
newest slot and the root are lit from inside. The geometry is unchanged.
|
||||
|
||||
Stands alone, with no reference to SchOS, as projects/schfs-linux/README.md
|
||||
requires.</desc>
|
||||
|
||||
<g fill="#3C2E85">
|
||||
<path d="M85.93 20.23 A81.00 81.00 0 0 1 114.07 20.23 L110.25 41.90 A59.00 59.00 0 0 0 89.75 41.90 Z"/>
|
||||
<path d="M162.05 47.93 A81.00 81.00 0 0 1 176.12 72.30 L155.44 79.82 A59.00 59.00 0 0 0 145.20 62.08 Z"/>
|
||||
<path d="M179.77 85.93 A81.00 81.00 0 0 1 179.77 114.07 L158.10 110.25 A59.00 59.00 0 0 0 158.10 89.75 Z"/>
|
||||
<path d="M176.12 127.70 A81.00 81.00 0 0 1 162.05 152.07 L145.20 137.92 A59.00 59.00 0 0 0 155.44 120.18 Z"/>
|
||||
<path d="M152.07 162.05 A81.00 81.00 0 0 1 127.70 176.12 L120.18 155.44 A59.00 59.00 0 0 0 137.92 145.20 Z"/>
|
||||
<path d="M114.07 179.77 A81.00 81.00 0 0 1 85.93 179.77 L89.75 158.10 A59.00 59.00 0 0 0 110.25 158.10 Z"/>
|
||||
<path d="M72.30 176.12 A81.00 81.00 0 0 1 47.93 162.05 L62.08 145.20 A59.00 59.00 0 0 0 79.82 155.44 Z"/>
|
||||
<path d="M37.95 152.07 A81.00 81.00 0 0 1 23.88 127.70 L44.56 120.18 A59.00 59.00 0 0 0 54.80 137.92 Z"/>
|
||||
<path d="M20.23 114.07 A81.00 81.00 0 0 1 20.23 85.93 L41.90 89.75 A59.00 59.00 0 0 0 41.90 110.25 Z"/>
|
||||
<path d="M23.88 72.30 A81.00 81.00 0 0 1 37.95 47.93 L54.80 62.08 A59.00 59.00 0 0 0 44.56 79.82 Z"/>
|
||||
<path d="M47.93 37.95 A81.00 81.00 0 0 1 72.30 23.88 L79.82 44.56 A59.00 59.00 0 0 0 62.08 54.80 Z"/>
|
||||
<defs>
|
||||
<!-- one light for the whole dial, so every slot is lit from the same side -->
|
||||
<linearGradient id="slot" gradientUnits="userSpaceOnUse" x1="20" y1="20" x2="180" y2="180">
|
||||
<stop offset="0" stop-color="#5A47B0"/>
|
||||
<stop offset="0.5" stop-color="#3C2E85"/>
|
||||
<stop offset="1" stop-color="#2A2066"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="lit" gradientUnits="userSpaceOnUse" x1="120" y1="10" x2="160" y2="56">
|
||||
<stop offset="0" stop-color="#B09CFF"/>
|
||||
<stop offset="0.5" stop-color="#7C5CFF"/>
|
||||
<stop offset="1" stop-color="#5A3BE0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="root" cx="0.38" cy="0.34" r="0.7">
|
||||
<stop offset="0" stop-color="#E4DCFF"/>
|
||||
<stop offset="0.3" stop-color="#9F86FF"/>
|
||||
<stop offset="0.75" stop-color="#7C5CFF"/>
|
||||
<stop offset="1" stop-color="#4E32C8"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="groove" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0.5" stop-color="#0E0B1E" stop-opacity="0"/>
|
||||
<stop offset="0.62" stop-color="#0E0B1E" stop-opacity="0.55"/>
|
||||
<stop offset="0.92" stop-color="#0E0B1E" stop-opacity="0.55"/>
|
||||
<stop offset="1" stop-color="#0E0B1E" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0" stop-color="#9F86FF" stop-opacity="0.55"/>
|
||||
<stop offset="1" stop-color="#7C5CFF" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- The bevel: the shape's own alpha, blurred into a height map and lit
|
||||
from the upper left, added back over the fill. -->
|
||||
<filter id="bevel" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1.6" result="h"/>
|
||||
<feSpecularLighting in="h" surfaceScale="3" specularConstant="0.85"
|
||||
specularExponent="16" lighting-color="#FFFFFF" result="s">
|
||||
<feDistantLight azimuth="225" elevation="40"/>
|
||||
</feSpecularLighting>
|
||||
<feComposite in="s" in2="SourceAlpha" operator="in" result="sa"/>
|
||||
<feComposite in="SourceGraphic" in2="sa" operator="arithmetic" k2="1" k3="0.55"/>
|
||||
</filter>
|
||||
<filter id="drop" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5"/>
|
||||
<feOffset dx="1.5" dy="2.5" result="o"/>
|
||||
<feComponentTransfer><feFuncA type="linear" slope="0.5"/></feComponentTransfer>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- the groove the slots sit in -->
|
||||
<circle cx="100" cy="100" r="86" fill="url(#groove)"/>
|
||||
|
||||
<g filter="url(#drop)">
|
||||
<g fill="url(#slot)" filter="url(#bevel)">
|
||||
<path d="M85.93 20.23 A81.00 81.00 0 0 1 114.07 20.23 L110.25 41.90 A59.00 59.00 0 0 0 89.75 41.90 Z"/>
|
||||
<path d="M162.05 47.93 A81.00 81.00 0 0 1 176.12 72.30 L155.44 79.82 A59.00 59.00 0 0 0 145.20 62.08 Z"/>
|
||||
<path d="M179.77 85.93 A81.00 81.00 0 0 1 179.77 114.07 L158.10 110.25 A59.00 59.00 0 0 0 158.10 89.75 Z"/>
|
||||
<path d="M176.12 127.70 A81.00 81.00 0 0 1 162.05 152.07 L145.20 137.92 A59.00 59.00 0 0 0 155.44 120.18 Z"/>
|
||||
<path d="M152.07 162.05 A81.00 81.00 0 0 1 127.70 176.12 L120.18 155.44 A59.00 59.00 0 0 0 137.92 145.20 Z"/>
|
||||
<path d="M114.07 179.77 A81.00 81.00 0 0 1 85.93 179.77 L89.75 158.10 A59.00 59.00 0 0 0 110.25 158.10 Z"/>
|
||||
<path d="M72.30 176.12 A81.00 81.00 0 0 1 47.93 162.05 L62.08 145.20 A59.00 59.00 0 0 0 79.82 155.44 Z"/>
|
||||
<path d="M37.95 152.07 A81.00 81.00 0 0 1 23.88 127.70 L44.56 120.18 A59.00 59.00 0 0 0 54.80 137.92 Z"/>
|
||||
<path d="M20.23 114.07 A81.00 81.00 0 0 1 20.23 85.93 L41.90 89.75 A59.00 59.00 0 0 0 41.90 110.25 Z"/>
|
||||
<path d="M23.88 72.30 A81.00 81.00 0 0 1 37.95 47.93 L54.80 62.08 A59.00 59.00 0 0 0 44.56 79.82 Z"/>
|
||||
<path d="M47.93 37.95 A81.00 81.00 0 0 1 72.30 23.88 L79.82 44.56 A59.00 59.00 0 0 0 62.08 54.80 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g fill="#7C5CFF">
|
||||
<path d="M132.15 11.67 A94.00 94.00 0 0 1 160.42 27.99 L137.92 54.80 A59.00 59.00 0 0 0 120.18 44.56 Z"/>
|
||||
<circle cx="100" cy="100" r="20"/>
|
||||
<!-- the newest slot and the root it names, lit from inside -->
|
||||
<circle cx="141" cy="36" r="32" fill="url(#halo)"/>
|
||||
<circle cx="100" cy="100" r="34" fill="url(#halo)"/>
|
||||
<g filter="url(#drop)">
|
||||
<g filter="url(#bevel)">
|
||||
<path fill="url(#lit)" d="M132.15 11.67 A94.00 94.00 0 0 1 160.42 27.99 L137.92 54.80 A59.00 59.00 0 0 0 120.18 44.56 Z"/>
|
||||
<circle cx="100" cy="100" r="20" fill="url(#root)"/>
|
||||
</g>
|
||||
</g>
|
||||
<ellipse cx="93" cy="92" rx="6.5" ry="4" fill="#FFFFFF" opacity="0.55"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 5.9 KiB |
Loading…
Reference in a new issue