mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
jwinterm
c73b9f1c04
All branding and animation assets now come from packs/such-software/pack.json
(such-graphics feat/brand-full-blast) instead of hand-maintained files:
- anim1_pulse / anim3_matrix / anim_type_v4 (both themes): regenerated with
the corrected U bowl, measured pulse timing (the hand-authored node delays
ran ~17% fast), and CSS animation with real prefers-reduced-motion support.
- clean marks, lockups (clean_*_w_text), favicons (svg + 192px png), and the
OG banner: regenerated; the OG card is the pack's 1200x630 projection.
- splash-such: rebuilt from the pack -- the old one carried the divergent U,
an off-palette cyan frame, and the pre-correction radius. Now theme-aware:
two inlined data URIs (hero-splash shows the light palette on light, the
dark palette on dark) since the pack's dark hues are tuned for near-black.
- new assets available: games_pulse (the launch arch with the rocket, wired
into /apps), morph, ambient_{atom,mesh,leaf}, favicon_dots, favicon_live,
icon-192/512 + maskable-512 (wired into manifest.json), /favicon.ico.
- animation embeds switched <img> -> <object>: Chrome freezes CSS animations
inside SVG-as-img (the old files animated because they were SMIL); an
object hosts a real SVG document where CSS animation and the
reduced-motion query both work. Verified live in Chrome.
48 lines
12 KiB
XML
48 lines
12 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
|
<defs><filter id="sg-sym-glow"><feGaussianBlur stdDeviation="2.2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
|
<style>
|
|
.d { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-dot-in 420ms ease-in-out forwards, sg-dot-out 420ms ease-in-out forwards; }
|
|
@keyframes sg-dot-in { to { transform: scale(1); } }
|
|
@keyframes sg-dot-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.55); opacity: 0; } }
|
|
.sym { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.62); animation: sg-sym-in 420ms ease-in-out forwards, sg-sym-out 900ms ease-in-out forwards; }
|
|
@keyframes sg-sym-in { to { opacity: 1; transform: scale(1); } }
|
|
@keyframes sg-sym-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.55); } }
|
|
.g { stroke-dasharray: 400; stroke-dashoffset: 400; animation: sg-draw 1600ms ease-in-out forwards; }
|
|
@keyframes sg-draw { to { stroke-dashoffset: 0; } }
|
|
.frame { opacity: 0; animation: sg-fade 900ms ease-out forwards; }
|
|
@keyframes sg-fade { to { opacity: var(--frame-opacity, 0.45); } }
|
|
.d-s { animation-delay: 0ms, 540ms; }
|
|
.sym-s { animation-delay: 540ms, 1640ms; }
|
|
.g-s { animation-delay: 1640ms; }
|
|
.d-u { animation-delay: 180ms, 720ms; }
|
|
.sym-u { animation-delay: 720ms, 1820ms; }
|
|
.g-u { animation-delay: 1820ms; }
|
|
.d-c { animation-delay: 360ms, 900ms; }
|
|
.sym-c { animation-delay: 900ms, 2000ms; }
|
|
.g-c { animation-delay: 2000ms; }
|
|
.d-h { animation-delay: 540ms, 1080ms; }
|
|
.sym-h { animation-delay: 1080ms, 2180ms; }
|
|
.g-h { animation-delay: 2180ms; }
|
|
.frame { animation-delay: 1640ms; }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.d, .sym { display: none; }
|
|
.g { animation: none; stroke-dashoffset: 0; }
|
|
.frame { animation: none; opacity: 0.45; }
|
|
}
|
|
</style>
|
|
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
|
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
|
<g transform="translate(60,59.25)"><g class="d d-s"><circle r="24" fill="#35925c"/></g></g>
|
|
<g transform="translate(38,39.71) scale(0.4247)"><g class="sym sym-s"><path d="M4.3 -0.10000000000000853H12.5Q15.5 -0.20000000000000284 18.0 1.3999999999999986Q20.5 3.0 21.700000000000003 5.599999999999994H95.80000000000001Q99.2 5.599999999999994 101.4 8.399999999999999Q103.60000000000001 11.200000000000003 102.7 14.700000000000003L95.30000000000001 42.199999999999996Q94.2 46.6 90.7 49.2Q87.2 51.8 82.80000000000001 51.8H30.8L31.700000000000003 56.9Q32.0 58.4 33.2 59.4Q34.4 60.4 36.0 60.5H88.0Q89.80000000000001 60.599999999999994 91.0 61.8Q92.2 63.0 92.30000000000001 64.8Q92.2 66.6 91.0 67.8Q89.80000000000001 69.0 88.0 69.1H36.0Q31.400000000000002 69.2 27.800000000000004 66.2Q24.200000000000003 63.2 23.3 58.599999999999994L14.0 9.700000000000003Q13.8 8.5 12.5 8.5H4.3Q2.4000000000000004 8.399999999999991 1.2000000000000002 7.199999999999996Q0.0 6.0 0.0 4.199999999999996Q0.0 2.3999999999999915 1.2000000000000002 1.1999999999999957Q2.4000000000000004 0.0 4.3 -0.10000000000000853ZM23.1 83.5Q23.1 79.9 25.6 77.4Q28.1 74.9 31.700000000000003 74.9Q35.2 74.9 37.800000000000004 77.4Q40.400000000000006 79.9 40.400000000000006 83.5Q40.400000000000006 87.0 37.800000000000004 89.6Q35.2 92.2 31.700000000000003 92.2Q28.1 92.2 25.6 89.6Q23.1 87.0 23.1 83.5ZM83.7 74.9Q87.30000000000001 74.9 89.80000000000001 77.4Q92.30000000000001 79.9 92.30000000000001 83.5Q92.30000000000001 87.0 89.80000000000001 89.6Q87.30000000000001 92.2 83.7 92.2Q80.2 92.2 77.6 89.6Q75.0 87.0 75.0 83.5Q75.0 79.9 77.6 77.4Q80.2 74.9 83.7 74.9Z" fill="#35925c" filter="url(#sg-sym-glow)"/></g></g>
|
|
<g transform="translate(137,59.25)"><g class="d d-u"><circle r="24" fill="#e8689e"/></g></g>
|
|
<g transform="translate(120.6,37.35) scale(0.4762)"><g class="sym sym-u"><path d="M55.2 43.599999999999994Q69.0 46.8 67.7 61.599999999999994Q66.9 71.2 60.5 75.2Q54.1 79.2 42.0 79.8V92.2H33.2V80.2Q28.700000000000003 80.2 26.3 80.0V92.2H17.5V79.8H0.0L1.7000000000000002 69.4Q8.4 69.6 9.5 69.2Q11.0 68.6 11.3 66.6V27.4Q11.100000000000001 25.799999999999997 10.3 24.999999999999996Q9.5 24.199999999999996 8.3 23.799999999999997Q7.1000000000000005 23.4 5.300000000000001 23.4Q3.5 23.4 1.4000000000000001 23.4Q0.5 23.4 0.0 23.4V14.200000000000003H17.5V-0.20000000000000284H26.3V13.799999999999997Q28.6 13.799999999999997 33.2 13.799999999999997V-0.20000000000000284H42.0V14.200000000000003Q51.2 15.0 56.6 18.4Q62.0 21.799999999999997 62.7 29.0Q63.6 39.199999999999996 55.2 43.599999999999994ZM26.5 24.0V41.599999999999994Q26.700000000000003 41.599999999999994 28.5 41.599999999999994Q30.3 41.599999999999994 31.1 41.599999999999994Q32.0 41.599999999999994 33.900000000000006 41.5Q35.800000000000004 41.4 37.0 41.2Q38.2 41.0 39.900000000000006 40.599999999999994Q41.7 40.199999999999996 42.7 39.5Q43.7 38.8 44.7 38.0Q45.7 37.199999999999996 46.300000000000004 35.8Q46.800000000000004 34.4 46.800000000000004 32.8Q46.800000000000004 30.799999999999997 46.0 29.199999999999996Q45.1 27.599999999999994 43.5 26.599999999999994Q41.900000000000006 25.599999999999994 40.5 25.0Q39.1 24.4 36.5 24.199999999999996Q33.9 24.0 32.7 24.0Q31.5 24.0 29.1 24.0Q26.700000000000003 24.0 26.5 24.0ZM26.5 69.4Q26.900000000000002 69.6 28.900000000000002 69.6Q30.900000000000002 69.6 31.900000000000002 69.6Q33.1 69.6 35.300000000000004 69.4Q37.5 69.4 38.900000000000006 69.1Q40.300000000000004 68.8 42.400000000000006 68.4Q44.5 68.0 45.7 67.2Q46.900000000000006 66.4 48.1 65.4Q49.300000000000004 64.4 49.900000000000006 63.0Q50.5 61.599999999999994 50.5 59.8Q50.5 57.599999999999994 49.5 55.8Q48.5 54.0 46.7 53.0Q44.7 52.0 43.0 51.4Q41.300000000000004 50.8 38.300000000000004 50.599999999999994Q35.300000000000004 50.4 33.9 50.2Q32.5 50.2 29.6 50.2Q26.700000000000003 50.2 26.5 50.2Z" fill="#e8689e" filter="url(#sg-sym-glow)"/></g></g>
|
|
<g transform="translate(60,141)"><g class="d d-c"><circle r="24" fill="#4aade0"/></g></g>
|
|
<g transform="translate(38,119) scale(0.4793)"><g class="sym sym-c"><path d="M70.9 12.599999999999994Q62.300000000000004 12.599999999999994 57.0 15.099999999999994Q51.7 12.599999999999994 45.85 12.599999999999994Q40.0 12.599999999999994 34.800000000000004 15.099999999999994Q29.5 12.599999999999994 20.900000000000002 12.599999999999994Q15.200000000000001 12.599999999999994 10.0 21.599999999999994Q5.7 28.699999999999996 2.7 39.699999999999996Q0.0 49.3 0.0 54.4Q0.0 56.9 3.7 59.05Q7.4 61.2 13.100000000000001 62.2Q15.200000000000001 69.2 23.700000000000003 74.0Q32.2 78.8 43.800000000000004 79.4V61.4Q37.6 57.5 37.5 54.4Q37.5 51.7 41.800000000000004 50.7Q43.800000000000004 50.099999999999994 45.900000000000006 50.099999999999994L48.0 50.3Q50.5 50.7 52.1 51.5Q54.2 52.5 54.300000000000004 54.4Q54.300000000000004 57.5 48.0 61.4V79.4Q59.5 78.8 68.05000000000001 74.0Q76.60000000000001 69.2 78.7 62.2Q84.4 61.2 88.10000000000001 59.05Q91.80000000000001 56.9 91.80000000000001 54.4Q91.80000000000001 49.3 89.10000000000001 39.699999999999996Q86.2 28.799999999999997 81.80000000000001 21.599999999999994Q76.60000000000001 12.599999999999994 70.9 12.599999999999994ZM13.3 53.8Q10.600000000000001 53.3 8.4 52.3Q9.0 46.8 11.3 39.4Q13.600000000000001 32.8 16.450000000000003 27.299999999999997Q19.3 21.799999999999997 21.1 21.0Q23.200000000000003 21.0 26.400000000000002 21.4H26.6Q20.900000000000002 27.799999999999997 17.0 38.4Q14.5 45.6 13.3 53.8ZM33.4 46.0Q31.6 46.0 30.450000000000003 44.849999999999994Q29.3 43.699999999999996 29.3 41.89999999999999Q29.3 40.099999999999994 30.450000000000003 38.849999999999994Q31.6 37.599999999999994 33.400000000000006 37.599999999999994Q35.2 37.599999999999994 36.35 38.849999999999994Q37.5 40.099999999999994 37.5 41.89999999999999Q37.5 43.699999999999996 36.35 44.849999999999994Q35.2 46.0 33.4 46.0ZM58.400000000000006 46.0Q56.6 46.0 55.45 44.849999999999994Q54.300000000000004 43.699999999999996 54.300000000000004 41.89999999999999Q54.300000000000004 40.099999999999994 55.45 38.849999999999994Q56.6 37.599999999999994 58.400000000000006 37.599999999999994Q60.2 37.599999999999994 61.35 38.849999999999994Q62.5 40.099999999999994 62.5 41.89999999999999Q62.5 43.699999999999996 61.35 44.849999999999994Q60.2 46.0 58.400000000000006 46.0ZM78.5 53.8Q77.30000000000001 45.6 74.8 38.4Q70.9 27.9 65.2 21.4H65.4Q68.5 21.0 70.7 21.0Q72.5 21.799999999999997 75.30000000000001 27.249999999999996Q78.10000000000001 32.699999999999996 80.5 39.4Q82.80000000000001 46.9 83.4 52.3Q81.4 53.3 78.5 53.8Z" fill="#4aade0" filter="url(#sg-sym-glow)"/></g></g>
|
|
<g transform="translate(137,141)"><g class="d d-h"><circle r="24" fill="#3ad4c6"/></g></g>
|
|
<g transform="translate(115.7,113.6) scale(0.5962)"><g class="sym sym-h"><path d="M35.800000000000004 41.9Q37.6 41.9 38.75 43.05Q39.900000000000006 44.199999999999996 39.900000000000006 46.0Q39.900000000000006 47.8 38.75 48.949999999999996Q37.6 50.099999999999994 35.8 50.099999999999994Q34.0 50.099999999999994 32.85 48.949999999999996Q31.700000000000003 47.8 31.700000000000003 46.0Q31.700000000000003 44.199999999999996 32.85 43.05Q34.0 41.9 35.800000000000004 41.9ZM3.4000000000000004 13.599999999999994Q7.9 9.099999999999994 16.650000000000002 10.749999999999993Q25.400000000000002 12.399999999999991 35.800000000000004 19.199999999999996Q46.2 12.399999999999991 54.95 10.749999999999993Q63.7 9.099999999999994 68.2 13.599999999999994Q72.7 18.099999999999994 71.05000000000001 26.849999999999994Q69.4 35.599999999999994 62.6 46.0Q69.4 56.4 71.05000000000001 65.15Q72.7 73.9 68.2 78.4Q63.7 82.9 54.95 81.25Q46.2 79.6 35.800000000000004 72.8Q25.400000000000002 79.6 16.650000000000002 81.25Q7.9 82.9 3.4000000000000004 78.4Q-1.1 73.9 0.55 65.15Q2.2 56.4 9.0 46.0Q2.2 35.599999999999994 0.55 26.849999999999994Q-1.1 18.099999999999994 3.4000000000000004 13.599999999999994ZM50.6 31.199999999999996Q54.1 34.9 57.7 39.199999999999996Q62.0 32.4 63.25 27.099999999999998Q64.5 21.799999999999997 62.25 19.549999999999997Q60.0 17.299999999999997 54.75 18.549999999999997Q49.5 19.799999999999997 42.6 24.099999999999994Q46.900000000000006 27.699999999999996 50.6 31.199999999999996ZM21.0 60.8Q17.5 57.099999999999994 13.9 52.8Q9.600000000000001 59.599999999999994 8.350000000000001 64.9Q7.1000000000000005 70.2 9.350000000000001 72.45Q11.600000000000001 74.7 16.85 73.45Q22.1 72.2 29.0 67.9Q24.700000000000003 64.3 21.0 60.8ZM9.200000000000001 19.4Q7.1000000000000005 21.699999999999996 8.350000000000001 26.999999999999996Q9.600000000000001 32.3 13.9 39.199999999999996Q17.400000000000002 34.9 21.050000000000004 31.249999999999996Q24.700000000000003 27.599999999999994 29.0 24.099999999999994Q22.200000000000003 19.799999999999997 16.85 18.549999999999997Q11.5 17.299999999999997 9.200000000000001 19.4ZM27.0 54.8Q31.1 58.9 35.800000000000004 62.8Q40.5 58.9 44.6 54.8Q48.7 50.7 52.6 46.0Q48.7 41.3 44.6 37.199999999999996Q40.5 33.099999999999994 35.800000000000004 29.199999999999996Q31.1 33.099999999999994 27.0 37.199999999999996Q22.900000000000002 41.3 19.0 46.0Q22.900000000000002 50.7 27.0 54.8ZM62.400000000000006 72.6Q64.5 70.3 63.25 65.0Q62.0 59.7 57.7 52.8Q54.2 57.099999999999994 50.550000000000004 60.75Q46.900000000000006 64.4 42.6 67.9Q49.400000000000006 72.2 54.75 73.45Q60.1 74.7 62.400000000000006 72.6Z" fill="#3ad4c6" filter="url(#sg-sym-glow)"/></g></g>
|
|
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#35925c" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
|
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
|
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
|
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
|
</svg>
|
