branding v1
This commit is contained in:
124
web/public/attune-logo-navbar.svg
Normal file
124
web/public/attune-logo-navbar.svg
Normal file
@@ -0,0 +1,124 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 215 690 210" width="690" height="210">
|
||||
<defs>
|
||||
<!-- Primary gradient: deep indigo to vibrant blue -->
|
||||
<linearGradient id="grad-primary" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#4F46E5" />
|
||||
<stop offset="50%" stop-color="#6366F1" />
|
||||
<stop offset="100%" stop-color="#818CF8" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Accent gradient: teal to cyan for flow lines -->
|
||||
<linearGradient id="grad-accent" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#14B8A6" />
|
||||
<stop offset="100%" stop-color="#22D3EE" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Text gradient (left to right for horizontal text) -->
|
||||
<linearGradient id="grad-text" x1="0%" y1="0%" x2="100%" y2="20%">
|
||||
<stop offset="0%" stop-color="#4F46E5" />
|
||||
<stop offset="50%" stop-color="#6366F1" />
|
||||
<stop offset="100%" stop-color="#818CF8" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Subtle shadow for depth -->
|
||||
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#4F46E5" flood-opacity="0.2" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Resonance arcs — left side (centered on crossbar y=330) -->
|
||||
<g transform="translate(0,0)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0; -4 0; 0 0" dur="3s" repeatCount="indefinite" />
|
||||
<path d="M 118 274 Q 88 330 118 386"
|
||||
fill="none" stroke="url(#grad-accent)" stroke-width="6" stroke-linecap="round" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3s" repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-width" values="4;8;4" dur="3s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(0,0)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0; -5 0; 0 0" dur="3s" begin="0.3s" repeatCount="indefinite" />
|
||||
<path d="M 98 254 Q 58 330 98 406"
|
||||
fill="none" stroke="url(#grad-accent)" stroke-width="4.5" stroke-linecap="round" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="3s" begin="0.3s" repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-width" values="3;6;3" dur="3s" begin="0.3s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(0,0)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0; -6 0; 0 0" dur="3s" begin="0.6s" repeatCount="indefinite" />
|
||||
<path d="M 80 234 Q 30 330 80 426"
|
||||
fill="none" stroke="url(#grad-accent)" stroke-width="3" stroke-linecap="round" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="3s" begin="0.6s" repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-width" values="2;4;2" dur="3s" begin="0.6s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Stylized 'A' — inverted tuning fork (no handle/stem) -->
|
||||
<g filter="url(#shadow)">
|
||||
<!-- Single U-shaped resonator: left foot → up left leg → curve through apex → down right leg → right foot -->
|
||||
<path d="M 170 412 L 170 278 Q 170 248 200 228 Q 206 224 212 228 Q 242 248 242 278 L 242 412"
|
||||
fill="none" stroke="url(#grad-primary)" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
<!-- Crossbar of the A -->
|
||||
<path d="M 174 330 L 238 330"
|
||||
fill="none" stroke="url(#grad-primary)" stroke-width="14" stroke-linecap="round" />
|
||||
</g>
|
||||
|
||||
<!-- Crossbar event node dots on the A -->
|
||||
<circle cx="194" cy="330" r="10" fill="#14B8A6" opacity="0.8">
|
||||
<animate attributeName="r" values="8;11;8" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="218" cy="330" r="10" fill="#22D3EE" opacity="0.8">
|
||||
<animate attributeName="r" values="8;11;8" dur="2s" begin="0.5s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="2s" begin="0.5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- Left branching dot from the A crossbar -->
|
||||
<circle cx="154" cy="330" r="5" fill="url(#grad-accent)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="2.5s" begin="0.5s" repeatCount="indefinite" />
|
||||
<animate attributeName="r" values="3;6;3" dur="2.5s" begin="0.5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<line x1="169" y1="330" x2="159" y2="330" stroke="url(#grad-accent)" stroke-width="2" stroke-linecap="round" opacity="0.5" />
|
||||
|
||||
<!-- "ttune" text — vertically centered on crossbar y=330 -->
|
||||
<text x="260" y="372"
|
||||
font-family="'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
|
||||
font-size="130"
|
||||
font-weight="600"
|
||||
letter-spacing="-2"
|
||||
fill="url(#grad-text)"
|
||||
filter="url(#shadow)">ttune</text>
|
||||
|
||||
<!-- Right-side branching dot (connects text to resonance arcs) -->
|
||||
<circle cx="583" cy="330" r="5" fill="url(#grad-accent)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="2.5s" repeatCount="indefinite" />
|
||||
<animate attributeName="r" values="3;6;3" dur="2.5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<line x1="570" y1="330" x2="578" y2="330" stroke="url(#grad-accent)" stroke-width="2" stroke-linecap="round" opacity="0.5" />
|
||||
|
||||
<!-- Resonance arcs — right side (close to the 'e', centered on y=330) -->
|
||||
<g transform="translate(0,0)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0; 4 0; 0 0" dur="3s" repeatCount="indefinite" />
|
||||
<path d="M 609 274 Q 639 330 609 386"
|
||||
fill="none" stroke="url(#grad-accent)" stroke-width="6" stroke-linecap="round" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3s" repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-width" values="4;8;4" dur="3s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(0,0)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0; 5 0; 0 0" dur="3s" begin="0.3s" repeatCount="indefinite" />
|
||||
<path d="M 629 254 Q 669 330 629 406"
|
||||
fill="none" stroke="url(#grad-accent)" stroke-width="4.5" stroke-linecap="round" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="3s" begin="0.3s" repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-width" values="3;6;3" dur="3s" begin="0.3s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(0,0)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0; 6 0; 0 0" dur="3s" begin="0.6s" repeatCount="indefinite" />
|
||||
<path d="M 647 234 Q 697 330 647 426"
|
||||
fill="none" stroke="url(#grad-accent)" stroke-width="3" stroke-linecap="round" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="3s" begin="0.6s" repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-width" values="2;4;2" dur="3s" begin="0.6s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.9 KiB |
Reference in New Issue
Block a user