mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
jwinterm
261cb04667
- Voice unified on the title-tag register: the homepage h1 now says what we sell (Custom E-commerce, Apps & Crypto Tools); 'Precision engineering for everyone' is demoted to the supporting line. The structured-data and manifest descriptions now match the OG description instead of carrying their own registers. - The off-palette cyan/blue gradients are gone: .hero-title and the new .brand-gradient-text use the four-colour system (light palette on light, dark palette on dark, per the pack). Splash cover text, services and portfolio headings, the hero aura, and button shadows all follow. - The splash now dismisses once 40% scrolled past instead of requiring the whole screen to leave the viewport (it was already once-per-session and reduced-motion-skipping). - Portfolio: heading 'Portfolio', subtitle 'Products & projects', meta title to match; grid grows to three columns on xl in a max-w-6xl container. - anim3_matrix slimmed: single-layer glow, unfiltered crackle and orbs, and the border cycles stroke colour instead of animating filter:hue-rotate -- the filter animation forced a full filter re-render per frame and pegged a core on the page hosting it.
81 lines
7.5 KiB
XML
81 lines
7.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
|
<defs><filter id="sg-mglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="sg-clip"><rect width="200" height="200" rx="26"/></clipPath><radialGradient id="sg-shock-s"><stop offset="0" stop-color="#35925c" stop-opacity="0.6"/><stop offset="1" stop-color="#35925c" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-u"><stop offset="0" stop-color="#e8689e" stop-opacity="0.6"/><stop offset="1" stop-color="#e8689e" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-c"><stop offset="0" stop-color="#4aade0" stop-opacity="0.6"/><stop offset="1" stop-color="#4aade0" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-h"><stop offset="0" stop-color="#3ad4c6" stop-opacity="0.6"/><stop offset="1" stop-color="#3ad4c6" stop-opacity="0"/></radialGradient></defs>
|
|
<style>
|
|
.rn { animation: sg-rain linear infinite; }
|
|
@keyframes sg-rain { from { transform: translateY(-100px); } to { transform: translateY(320px); } }
|
|
.rn0 { animation-duration: 2.1s; animation-delay: 0.73s; }
|
|
.rn1 { animation-duration: 1.8s; animation-delay: 0.175s; }
|
|
.rn2 { animation-duration: 2.5s; animation-delay: 1.75s; }
|
|
.rn3 { animation-duration: 1.6s; animation-delay: 0.054s; }
|
|
.rn4 { animation-duration: 2.8s; animation-delay: 1.06s; }
|
|
.rn5 { animation-duration: 2.0s; animation-delay: 1.67s; }
|
|
.rn6 { animation-duration: 1.7s; animation-delay: 0.778s; }
|
|
.rn7 { animation-duration: 2.3s; animation-delay: 1.69s; }
|
|
.rn8 { animation-duration: 1.9s; animation-delay: 0.094s; }
|
|
.rn9 { animation-duration: 2.6s; animation-delay: 2.3s; }
|
|
.rn10 { animation-duration: 2.2s; animation-delay: 0.91s; }
|
|
.rn11 { animation-duration: 1.5s; animation-delay: 0.155s; }
|
|
.zap { animation: sg-zap 1.5s linear infinite; }
|
|
@keyframes sg-zap { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -603.9; } }
|
|
.ctr { animation: sg-zap 1.5s linear infinite; animation-delay: -0.5s; }
|
|
.crk { animation: sg-zap 2.3s linear infinite, sg-flick 0.7s linear infinite; }
|
|
@keyframes sg-flick { 0%,100% { opacity: 0.3; } 20% { opacity: 0.6; } 40% { opacity: 0.1; } 60% { opacity: 0.5; } 80% { opacity: 0.2; } }
|
|
.shock { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-shock 6.0s linear infinite; }
|
|
@keyframes sg-shock { 0%, 14% { transform: scale(0); opacity: 0; } 15% { transform: scale(0); opacity: 0.5; } 25% { transform: scale(1); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
|
|
.slam { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-slam 6.0s linear infinite; }
|
|
@keyframes sg-slam { 0%, 2% { transform: scale(0); } 5% { transform: scale(1.15); } 8% { transform: scale(1); } 85% { transform: scale(1); } 95% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
|
|
.orb { transform-box: fill-box; transform-origin: center; animation: sg-orb 1.5s ease-in-out infinite; }
|
|
@keyframes sg-orb { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(2); opacity: 1; } }
|
|
.bdr { animation: sg-bcycle 4s linear infinite, sg-breathe-o 2s ease-in-out infinite; }
|
|
@keyframes sg-bcycle { 0%,100% { stroke: #7ddfbe; } 25% { stroke: #e8689e; } 50% { stroke: #4aade0; } 75% { stroke: #35925c; } }
|
|
@keyframes sg-breathe-o { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
|
|
.slam-s { animation-delay: 0s; }
|
|
.shock-s { animation-delay: 0s; }
|
|
.slam-u { animation-delay: 0.9s; }
|
|
.shock-u { animation-delay: 0.9s; }
|
|
.slam-c { animation-delay: 1.8s; }
|
|
.shock-c { animation-delay: 1.8s; }
|
|
.slam-h { animation-delay: 2.7s; }
|
|
.shock-h { animation-delay: 2.7s; }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rn, .zap, .ctr, .crk, .shock { display: none; }
|
|
.slam { animation: none; transform: scale(1); }
|
|
.orb { animation: none; }
|
|
.bdr { animation: none; }
|
|
}
|
|
</style>
|
|
<rect width="200" height="200" rx="26" fill="#050508"/>
|
|
<g clip-path="url(#sg-clip)" opacity="0.12" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="10" fill="#45c99e">
|
|
<text class="rn rn0" x="10" y="0">01</text>
|
|
<text class="rn rn1" x="25" y="0">{ }</text>
|
|
<text class="rn rn2" x="42" y="0">S</text>
|
|
<text class="rn rn3" x="58" y="0">10</text>
|
|
<text class="rn rn4" x="74" y="0">U</text>
|
|
<text class="rn rn5" x="90" y="0">0x</text>
|
|
<text class="rn rn6" x="106" y="0">C</text>
|
|
<text class="rn rn7" x="122" y="0">fn</text>
|
|
<text class="rn rn8" x="138" y="0">H</text>
|
|
<text class="rn rn9" x="154" y="0">;</text>
|
|
<text class="rn rn10" x="170" y="0">=></text>
|
|
<text class="rn rn11" x="185" y="0">[]</text>
|
|
</g>
|
|
<circle class="shock shock-s" cx="60" cy="59.25" r="60" fill="url(#sg-shock-s)"/>
|
|
<circle class="shock shock-u" cx="137" cy="59.25" r="60" fill="url(#sg-shock-u)"/>
|
|
<circle class="shock shock-c" cx="60" cy="141" r="60" fill="url(#sg-shock-c)"/>
|
|
<circle class="shock shock-h" cx="137" cy="141" r="60" fill="url(#sg-shock-h)"/>
|
|
<path d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#45c99e" stroke-width="2" opacity="0.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
<path class="zap" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#7ddfbe" stroke-width="3" opacity="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none" filter="url(#sg-mglow)" stroke-dasharray="15 588.9"/>
|
|
<path class="ctr" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#ffffff" stroke-width="1.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="5 598.9"/>
|
|
<path class="crk" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58" stroke="#45c99e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="3 40 8 60 2 80 5 400"/>
|
|
<g>
|
|
<g transform="translate(20,28)"><g class="orb" style="animation-delay:0s"><circle r="2.5" fill="#45c99e"/></g></g>
|
|
<g transform="translate(104,100)"><g class="orb" style="animation-delay:0.5s"><circle r="2.5" fill="#45c99e"/></g></g>
|
|
<g transform="translate(172,172)"><g class="orb" style="animation-delay:1s"><circle r="2.5" fill="#45c99e"/></g></g>
|
|
</g>
|
|
<rect class="bdr" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#7ddfbe" stroke-width="3.5"/>
|
|
<g transform="translate(3,0)"><g class="slam slam-s"><path 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"/></g></g>
|
|
<g transform="translate(-3,0)"><g class="slam slam-u"><path 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"/></g></g>
|
|
<g transform="translate(3,0)"><g class="slam slam-c"><path d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></g></g>
|
|
<g transform="translate(-3,0)"><g class="slam slam-h"><path 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"/></g></g>
|
|
</svg>
|
