Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
116
logo-mockups/core-options-preview.html
Normal file
116
logo-mockups/core-options-preview.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kalei Core Options — Side by Side</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30px 20px;
|
||||
transition: background 0.4s, color 0.4s;
|
||||
}
|
||||
h1 { font-size: 24px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 4px; }
|
||||
.subtitle { font-size: 13px; opacity: 0.5; margin-bottom: 30px; letter-spacing: 1px; }
|
||||
.bg-toggle {
|
||||
position: fixed; top: 16px; right: 16px;
|
||||
display: flex; gap: 6px; z-index: 10;
|
||||
}
|
||||
.bg-toggle button {
|
||||
padding: 6px 14px; border: 1px solid rgba(128,128,128,0.3); border-radius: 16px;
|
||||
cursor: pointer; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s;
|
||||
}
|
||||
.bg-toggle button.active { font-weight: 700; }
|
||||
body.dark { background: #0a0e1a; color: #e0e0e0; }
|
||||
body.light { background: #f5f5f5; color: #1a1a1a; }
|
||||
body.checker { background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 20px 20px; color: #1a1a1a; }
|
||||
body.dark .bg-toggle button { background: #1a1f2e; color: #ccc; }
|
||||
body.dark .bg-toggle button.active { background: #2a3040; border-color: #6366F1; color: #fff; }
|
||||
body.light .bg-toggle button, body.checker .bg-toggle button { background: #fff; color: #333; }
|
||||
body.light .bg-toggle button.active, body.checker .bg-toggle button.active { background: #e8e8e8; border-color: #6366F1; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
|
||||
.card {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 10px;
|
||||
padding: 16px; border-radius: 12px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
body.dark .card { background: rgba(255,255,255,0.03); }
|
||||
body.light .card { background: rgba(0,0,0,0.03); }
|
||||
body.checker .card { background: rgba(255,255,255,0.6); }
|
||||
.card object { width: 320px; height: 320px; }
|
||||
.card-label {
|
||||
font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 12px; opacity: 0.55; text-align: center; line-height: 1.5; max-width: 280px;
|
||||
}
|
||||
.original-ref {
|
||||
margin-top: 30px; padding-top: 20px;
|
||||
border-top: 1px solid rgba(128,128,128,0.2);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.original-ref object { width: 200px; height: 200px; }
|
||||
.original-ref span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark">
|
||||
<div class="bg-toggle">
|
||||
<button onclick="setBg('dark')" class="active">Dark</button>
|
||||
<button onclick="setBg('light')">Light</button>
|
||||
<button onclick="setBg('checker')">Transparent</button>
|
||||
</div>
|
||||
|
||||
<h1>Kalei — Core Options</h1>
|
||||
<p class="subtitle">Same iris blades, four different cores</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<object type="image/svg+xml" data="kalei-gemini-core-A-prismatic-orb.svg"></object>
|
||||
<span class="card-label">A — Prismatic Orb</span>
|
||||
<span class="card-desc">Soft glowing crystal sphere with specular highlights and rainbow color cycling. Warm and luminous.</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<object type="image/svg+xml" data="kalei-gemini-core-B-nebula-vortex.svg"></object>
|
||||
<span class="card-label">B — Nebula Vortex</span>
|
||||
<span class="card-desc">Overlapping color clouds counter-rotating to create a dreamy, organic swirl with twinkling stars.</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<object type="image/svg+xml" data="kalei-gemini-core-C-starburst.svg"></object>
|
||||
<span class="card-label">C — Starburst</span>
|
||||
<span class="card-desc">Radiating light rays with staggered sparkle, like energy bursting through a prism. Bold and dynamic.</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<object type="image/svg+xml" data="kalei-gemini-core-D-bloom.svg"></object>
|
||||
<span class="card-label">D — Bloom Within</span>
|
||||
<span class="card-desc">A miniature flower inside the iris that counter-rotates — fractal recursion echoing the kaleidoscope brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="original-ref">
|
||||
<object type="image/svg+xml" data="kalei-gemini-animated.svg"></object>
|
||||
<span>Original (hexagon core) for reference</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setBg(mode) {
|
||||
document.body.className = mode;
|
||||
document.querySelectorAll('.bg-toggle button').forEach(b => b.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
234
logo-mockups/finalists/compare.html
Normal file
234
logo-mockups/finalists/compare.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kalei Logo Finalists</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 40px 20px 20px;
|
||||
background: linear-gradient(135deg, #0f0a1a 0%, #1a1025 50%, #0f0a1a 100%);
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.15em;
|
||||
background: linear-gradient(135deg, #C4B5FD, #93C5FD, #6EE7B7, #FDE68A, #FBCFE8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.header p {
|
||||
font-size: 0.9rem;
|
||||
color: #94a3b8;
|
||||
font-weight: 300;
|
||||
}
|
||||
.comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30px 20px 40px;
|
||||
position: relative;
|
||||
}
|
||||
.panel:first-child { border-right: 1px solid rgba(139,92,246,0.15); }
|
||||
.panel h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.panel .subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.logo-container {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.logo-container object {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.changes {
|
||||
max-width: 300px;
|
||||
font-size: 0.72rem;
|
||||
color: #94a3b8;
|
||||
line-height: 1.6;
|
||||
text-align: left;
|
||||
}
|
||||
.changes strong {
|
||||
color: #C4B5FD;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.changes ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.changes ul li {
|
||||
padding-left: 14px;
|
||||
position: relative;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.changes ul li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #C4B5FD, #93C5FD);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Background toggle */
|
||||
.bg-toggle {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
background: rgba(15,10,26,0.9);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: 10px;
|
||||
padding: 6px;
|
||||
z-index: 100;
|
||||
}
|
||||
.bg-toggle button {
|
||||
border: none;
|
||||
padding: 6px 14px;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
transition: all 0.2s;
|
||||
color: #94a3b8;
|
||||
background: transparent;
|
||||
}
|
||||
.bg-toggle button.active {
|
||||
background: rgba(139,92,246,0.25);
|
||||
color: #C4B5FD;
|
||||
}
|
||||
|
||||
body.bg-dark { background: #0f0a1a; }
|
||||
body.bg-dark .panel { background: transparent; }
|
||||
|
||||
body.bg-mid { background: #1e1b2e; }
|
||||
body.bg-mid .panel { background: transparent; }
|
||||
|
||||
body.bg-light { background: #f8fafc; }
|
||||
body.bg-light .panel { background: transparent; }
|
||||
body.bg-light .header { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
|
||||
body.bg-light .header p { color: #64748b; }
|
||||
body.bg-light .panel h2 { color: #1e293b; }
|
||||
body.bg-light .panel .subtitle { color: #64748b; }
|
||||
body.bg-light .panel:first-child { border-right-color: rgba(139,92,246,0.1); }
|
||||
body.bg-light .changes { color: #475569; }
|
||||
body.bg-light .changes strong { color: #7c3aed; }
|
||||
|
||||
body.bg-white { background: #ffffff; }
|
||||
body.bg-white .panel { background: transparent; }
|
||||
body.bg-white .header { background: #ffffff; }
|
||||
body.bg-white .header p { color: #94a3b8; }
|
||||
body.bg-white .panel h2 { color: #0f172a; }
|
||||
body.bg-white .panel .subtitle { color: #94a3b8; }
|
||||
body.bg-white .panel:first-child { border-right-color: rgba(0,0,0,0.06); }
|
||||
body.bg-white .changes { color: #64748b; }
|
||||
body.bg-white .changes strong { color: #7c3aed; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-dark">
|
||||
|
||||
<div class="header">
|
||||
<h1>KALEI FINALISTS</h1>
|
||||
<p>Refined from semi-finalist round — white circle removed, details polished</p>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="panel">
|
||||
<h2>Glass Facets</h2>
|
||||
<p class="subtitle">Bloom variant — stained-glass petals</p>
|
||||
<div class="logo-container">
|
||||
<object type="image/svg+xml" data="glass-facets-final.svg"></object>
|
||||
</div>
|
||||
<div class="changes">
|
||||
<strong>Changes from semi-finalist:</strong>
|
||||
<ul>
|
||||
<li>Removed dashed white counter-rotating ring (r=100)</li>
|
||||
<li>Removed dashed white inner core ring (r=22)</li>
|
||||
<li>Added soft prismatic inter-petal color wash for depth</li>
|
||||
<li>Inner core ring now uses prismatic gradient instead of white</li>
|
||||
<li>Rotating dot ring now color-tinted per brand palette</li>
|
||||
<li>Added petal tip glow points at each apex</li>
|
||||
<li>Refined refraction lines (softer, rounded caps)</li>
|
||||
<li>Enhanced specular highlights with tertiary pinpoint</li>
|
||||
<li>Slightly larger core for better presence</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Soft Elegance</h2>
|
||||
<p class="subtitle">Starburst variant — crystalline blades</p>
|
||||
<div class="logo-container">
|
||||
<object type="image/svg+xml" data="soft-elegance-final.svg"></object>
|
||||
</div>
|
||||
<div class="changes">
|
||||
<strong>Changes from semi-finalist:</strong>
|
||||
<ul>
|
||||
<li>Removed hard white stroke circle (r=50) around core</li>
|
||||
<li>Replaced with organic prismatic glow transition</li>
|
||||
<li>Edge shimmers now color-tinted per blade (not plain white)</li>
|
||||
<li>Added blade tip glow points at outer edges</li>
|
||||
<li>Added warm amber specular accent in core</li>
|
||||
<li>Core-to-blade transition now smooth radial gradient</li>
|
||||
<li>Prismatic halo ring refined for subtlety</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-toggle">
|
||||
<button class="active" onclick="setBg('dark')">Dark</button>
|
||||
<button onclick="setBg('mid')">Mid</button>
|
||||
<button onclick="setBg('light')">Light</button>
|
||||
<button onclick="setBg('white')">White</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setBg(mode) {
|
||||
document.body.className = 'bg-' + mode;
|
||||
document.querySelectorAll('.bg-toggle button').forEach(b => b.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
logo-mockups/finalists/finalists.rar
Normal file
BIN
logo-mockups/finalists/finalists.rar
Normal file
Binary file not shown.
219
logo-mockups/finalists/glass-facets-final.svg
Normal file
219
logo-mockups/finalists/glass-facets-final.svg
Normal file
@@ -0,0 +1,219 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Petal gradients with animated color shifting -->
|
||||
<linearGradient id="b1" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="4s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#6D28D9"><animate attributeName="stop-color" values="#6D28D9;#8B5CF6;#6D28D9" dur="4s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b2" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#60A5FA"><animate attributeName="stop-color" values="#60A5FA;#93C5FD;#60A5FA" dur="4.5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#1E40AF"><animate attributeName="stop-color" values="#1E40AF;#3B82F6;#1E40AF" dur="4.5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b3" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#34D399"><animate attributeName="stop-color" values="#34D399;#6EE7B7;#34D399" dur="5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#065F46"><animate attributeName="stop-color" values="#065F46;#10B981;#065F46" dur="5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b4" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.2s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#92400E"><animate attributeName="stop-color" values="#92400E;#D97706;#92400E" dur="4.2s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b5" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#F472B6"><animate attributeName="stop-color" values="#F472B6;#FBCFE8;#F472B6" dur="4.8s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#9D174D"><animate attributeName="stop-color" values="#9D174D;#EC4899;#9D174D" dur="4.8s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b6" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#818CF8"><animate attributeName="stop-color" values="#818CF8;#A5B4FC;#818CF8" dur="4.3s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#3730A3"><animate attributeName="stop-color" values="#3730A3;#6366F1;#3730A3" dur="4.3s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
|
||||
<!-- Rotating prismatic gradient for core -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8" dur="6s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura gradient -->
|
||||
<radialGradient id="aura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.15"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#C4B5FD" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Inter-petal glow gradient (replaces dashed circle) -->
|
||||
<radialGradient id="interPetalGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0"/>
|
||||
<stop offset="45%" stop-color="#A78BFA" stop-opacity="0.06"><animate attributeName="stop-color" values="#A78BFA;#60A5FA;#34D399;#FCD34D;#F472B6;#A78BFA" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="65%" stop-color="#8B5CF6" stop-opacity="0.04"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#D97706;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="14" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="sparkle" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="petalTipGlow" x="-200%" y="-200%" width="500%" height="500%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Breathing outer aura -->
|
||||
<circle cx="200" cy="200" r="180" fill="url(#aura)">
|
||||
<animate attributeName="r" values="160;185;160" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Main logo group with very slow rotation -->
|
||||
<g transform="translate(200,200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="120s" repeatCount="indefinite" additive="replace"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="200,200" dur="120s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Soft inter-petal color wash (replaces old dashed circle) -->
|
||||
<circle r="120" fill="url(#interPetalGlow)">
|
||||
<animate attributeName="opacity" values="0.5;0.9;0.5" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Petals with stained-glass outlines and tighter spacing -->
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b1)" opacity="0.9" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b2)" opacity="0.87" transform="rotate(60)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b3)" opacity="0.87" transform="rotate(120)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b4)" opacity="0.87" transform="rotate(180)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b5)" opacity="0.87" transform="rotate(240)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b6)" opacity="0.82" transform="rotate(300)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.78;0.95;0.78" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Petal tip glow points — soft colored lights at each petal apex -->
|
||||
<g filter="url(#petalTipGlow)">
|
||||
<circle cx="-5" cy="-153" r="3" fill="#C4B5FD" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-5" cy="-153" r="3" fill="#93C5FD" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="4.5s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-5" cy="-153" r="3" fill="#6EE7B7" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-5" cy="-153" r="3" fill="#FDE68A" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="4.2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-5" cy="-153" r="3" fill="#FBCFE8" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="4.8s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-5" cy="-153" r="3" fill="#A5B4FC" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="4.3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Subtle refraction light lines radiating from center (refined — softer, shorter) -->
|
||||
<g opacity="0.18">
|
||||
<line x1="0" y1="0" x2="0" y2="-140" stroke="#fff" stroke-width="0.4" stroke-linecap="round">
|
||||
<animate attributeName="opacity" values="0.05;0.3;0.05" dur="3.5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-140" stroke="#fff" stroke-width="0.4" stroke-linecap="round" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.05;0.3;0.05" dur="3.5s" begin="0.58s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-140" stroke="#fff" stroke-width="0.4" stroke-linecap="round" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.05;0.3;0.05" dur="3.5s" begin="1.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-140" stroke="#fff" stroke-width="0.4" stroke-linecap="round" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.05;0.3;0.05" dur="3.5s" begin="1.75s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-140" stroke="#fff" stroke-width="0.4" stroke-linecap="round" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.05;0.3;0.05" dur="3.5s" begin="2.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-140" stroke="#fff" stroke-width="0.4" stroke-linecap="round" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.05;0.3;0.05" dur="3.5s" begin="2.91s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing prismatic core (slightly larger, richer glow) -->
|
||||
<circle r="32" fill="url(#prismatic)" filter="url(#softGlow)">
|
||||
<animate attributeName="r" values="30;35;30" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Core inner depth — soft concentric prismatic ring instead of dashed white circle -->
|
||||
<circle r="22" fill="none" stroke="url(#prismatic)" stroke-width="1.2" opacity="0.25">
|
||||
<animate attributeName="r" values="20;25;20" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Rotating inner dot ring (8 dots — now prismatic-tinted, not white) -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="15s" repeatCount="indefinite"/>
|
||||
<circle cx="18" cy="0" r="1" fill="#C4B5FD" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="0s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12.73" cy="12.73" r="1" fill="#93C5FD" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="0.625s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="0" cy="18" r="1" fill="#6EE7B7" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="1.25s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-12.73" cy="12.73" r="1" fill="#FDE68A" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="1.875s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-18" cy="0" r="1" fill="#FBCFE8" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-12.73" cy="-12.73" r="1" fill="#A5B4FC" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="3.125s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="0" cy="-18" r="1" fill="#C4B5FD" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="3.75s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12.73" cy="-12.73" r="1" fill="#93C5FD" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" begin="4.375s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Primary specular highlight on core (enhanced) -->
|
||||
<circle cx="-7" cy="-9" r="9" fill="white" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.25;0.5;0.25" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;10;8" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary highlight -->
|
||||
<circle cx="4" cy="6" r="4" fill="white" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tertiary pinpoint highlight (new — adds glass depth) -->
|
||||
<circle cx="-3" cy="3" r="1.5" fill="white" opacity="0.1">
|
||||
<animate attributeName="opacity" values="0.05;0.2;0.05" dur="2.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Floating sparkle particles orbiting the logo -->
|
||||
<g filter="url(#sparkle)">
|
||||
<circle r="2" fill="#C4B5FD" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 1 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2.5;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#93C5FD" opacity="0">
|
||||
<animateMotion dur="10s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 1 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2;1" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#6EE7B7" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.6;0;0.6;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#FDE68A" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.8;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#FBCFE8" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-145 A145,145 0 1 0 -0.1,-145"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0;0.5;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#fff" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-110 A110,110 0 1 1 -0.1,-110"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
329
logo-mockups/finalists/soft-elegance-final.svg
Normal file
329
logo-mockups/finalists/soft-elegance-final.svg
Normal file
@@ -0,0 +1,329 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo -->
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Core transition glow (replaces hard white circle) -->
|
||||
<radialGradient id="coreHalo" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
<stop offset="60%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
<stop offset="80%" stop-color="#C4B5FD" stop-opacity="0.08"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/><animate attributeName="stop-opacity" values="0.05;0.12;0.05" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="bladeTipGlow" x="-200%" y="-200%" width="500%" height="500%">
|
||||
<feGaussianBlur stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer with color tint -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#C4B5FD" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#93C5FD" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#6EE7B7" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FDE68A" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FBCFE8" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#A5B4FC" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Blade tip glow points — soft colored pulses at outer tips of each blade -->
|
||||
<g filter="url(#bladeTipGlow)">
|
||||
<circle cx="-30" cy="160" r="4" fill="#A78BFA" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#3B82F6" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.5s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#10B981" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="5s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#F59E0B" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#EC4899" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.8s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#6366F1" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - SOFT ELEGANCE FINALIST -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Organic core transition glow (replaces hard white circle) -->
|
||||
<circle r="55" fill="url(#coreHalo)">
|
||||
<animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly -->
|
||||
<g opacity="0.35">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="150s" repeatCount="indefinite"/>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.4s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.3s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.5s" begin="2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths -->
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="75s" repeatCount="indefinite"/>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(90)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(150)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(210)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(270)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(330)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Central bright white-to-prismatic circle with heavy glow and pulsing -->
|
||||
<circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95">
|
||||
<animate attributeName="r" values="10;14;10" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner refraction crescent -->
|
||||
<circle cx="-4" cy="-4" r="6" fill="#ffffff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.2;0.35;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tiny sharp specular highlight off-center -->
|
||||
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Additional warm specular (new — adds dimension) -->
|
||||
<circle cx="-2" cy="5" r="2" fill="#FDE68A" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.15;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 21 KiB |
BIN
logo-mockups/full-logo-set.rar
Normal file
BIN
logo-mockups/full-logo-set.rar
Normal file
Binary file not shown.
271
logo-mockups/gemini semi finals/gemini-1.svg
Normal file
271
logo-mockups/gemini semi finals/gemini-1.svg
Normal file
@@ -0,0 +1,271 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Dark-First Space Background -->
|
||||
<radialGradient id="bgGlow" cx="50%" cy="50%" r="65%">
|
||||
<stop offset="0%" stop-color="#0F1424" />
|
||||
<stop offset="60%" stop-color="#0A0E1A" />
|
||||
<stop offset="100%" stop-color="#050508" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- Prismatic Core Exact Brand Gradient -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/>
|
||||
<stop offset="25%" stop-color="#3B82F6"/>
|
||||
<stop offset="50%" stop-color="#10B981"/>
|
||||
<stop offset="75%" stop-color="#F59E0B"/>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade 0: Amethyst -->
|
||||
<linearGradient id="g0_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/>
|
||||
<stop offset="100%" stop-color="#2E1065"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade 1: Sapphire -->
|
||||
<linearGradient id="g1_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="4.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/>
|
||||
<stop offset="100%" stop-color="#172554"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade 2: Emerald -->
|
||||
<linearGradient id="g2_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/>
|
||||
<stop offset="100%" stop-color="#022C22"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade 3: Amber -->
|
||||
<linearGradient id="g3_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/>
|
||||
<stop offset="100%" stop-color="#451A03"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade 4: Rose -->
|
||||
<linearGradient id="g4_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#FCE7F3;#FBCFE8" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/>
|
||||
<stop offset="100%" stop-color="#4C0519"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade 5: Indigo -->
|
||||
<linearGradient id="g5_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#C7D2FE"><animate attributeName="stop-color" values="#C7D2FE;#E0E7FF;#C7D2FE" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/>
|
||||
<stop offset="100%" stop-color="#1E1B4B"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Ethereal Glow Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="24" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Deep Dark Universe Background -->
|
||||
<rect width="100%" height="100%" fill="url(#bgGlow)" />
|
||||
|
||||
<!-- Ambient Pulsing Backlight -->
|
||||
<circle cx="200" cy="200" r="130" fill="url(#prismatic)" opacity="0.12" filter="url(#wideGlow)">
|
||||
<animate attributeName="opacity" values="0.08;0.16;0.08" dur="6s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- Main Iris Structure -->
|
||||
<g transform="translate(200, 200)">
|
||||
|
||||
<!-- Outer rotation for the kaleidoscopic shards -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="150s" repeatCount="indefinite" />
|
||||
|
||||
<!-- Blade 0 (Amethyst) -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4s" repeatCount="indefinite" />
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Blade 1 (Sapphire) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4.5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4.5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Blade 2 (Emerald) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Blade 3 (Amber) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4.2s" repeatCount="indefinite" />
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4.2s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Blade 4 (Rose) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4.8s" repeatCount="indefinite" />
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4.8s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Blade 5 (Indigo) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="5.2s" repeatCount="indefinite" />
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||||
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="5.2s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- The Core Aperture and Prismatic Light Source -->
|
||||
<g>
|
||||
<!-- Reverse rotation for the core to detach it optically from the blades -->
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="100s" repeatCount="indefinite" />
|
||||
|
||||
<!-- Inner Dark Chamber to provide depth against the backlight -->
|
||||
<polygon points="40,0 20,34.641 -20,34.641 -40,0 -20,-34.641 20,-34.641" fill="#0A0E1A" />
|
||||
|
||||
<!-- Core Prismatic Glow bleeding over the inner cut edges -->
|
||||
<circle r="26" fill="url(#prismatic)" opacity="0.85" filter="url(#coreGlow)">
|
||||
<animate attributeName="r" values="24;30;24" dur="4s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0.65;0.95;0.65" dur="4s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- Crisp Prismatic Hexagon Mirror inside the chamber -->
|
||||
<polygon points="30,0 15,25.98 -15,25.98 -30,0 -15,-25.98 15,-25.98" fill="url(#prismatic)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.75;1;0.75" dur="3s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
|
||||
<!-- Optical Lens Refractions (The Instrument) -->
|
||||
<circle r="18" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.4" />
|
||||
<circle r="8" fill="none" stroke="#FFFFFF" stroke-width="1.5" opacity="0.8" filter="url(#glow)"/>
|
||||
|
||||
<!-- Central Blinding Transformation Point -->
|
||||
<circle r="4" fill="#FFFFFF" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="r" values="3.5;5;3.5" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- 12 Optical Refraction Rays -->
|
||||
<g opacity="0.6">
|
||||
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(30)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(60)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(90)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(120)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(150)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(180)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(210)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(240)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(270)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(300)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(330)"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Floating Crystalline Sparkles (Motes) Orbiting the Instrument -->
|
||||
<g filter="url(#glow)">
|
||||
<!-- Counter-rotating orbit -->
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="90s" repeatCount="indefinite" />
|
||||
|
||||
<!-- Amethyst Mote -->
|
||||
<g transform="rotate(0) translate(0, -150)">
|
||||
<polygon points="0,-4 1,-1 4,0 1,1 0,4 -1,1 -4,0 -1,-1" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="5s" begin="0s" repeatCount="indefinite" />
|
||||
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="5s" begin="0s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Mote -->
|
||||
<g transform="rotate(60) translate(0, -130)">
|
||||
<polygon points="0,-4 1,-1 4,0 1,1 0,4 -1,1 -4,0 -1,-1" fill="#3B82F6">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="6s" begin="1s" repeatCount="indefinite" />
|
||||
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="6s" begin="1s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Mote -->
|
||||
<g transform="rotate(120) translate(0, -160)">
|
||||
<polygon points="0,-3 1,-1 3,0 1,1 0,3 -1,1 -3,0 -1,-1" fill="#10B981">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="4.5s" begin="2s" repeatCount="indefinite" />
|
||||
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="4.5s" begin="2s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Amber Mote -->
|
||||
<g transform="rotate(180) translate(0, -145)">
|
||||
<polygon points="0,-5 1,-1 5,0 1,1 0,5 -1,1 -5,0 -1,-1" fill="#F59E0B">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="5.5s" begin="3s" repeatCount="indefinite" />
|
||||
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="5.5s" begin="3s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Rose Mote -->
|
||||
<g transform="rotate(240) translate(0, -135)">
|
||||
<polygon points="0,-4 1,-1 4,0 1,1 0,4 -1,1 -4,0 -1,-1" fill="#EC4899">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="4.8s" begin="1.5s" repeatCount="indefinite" />
|
||||
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="4.8s" begin="1.5s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Mote -->
|
||||
<g transform="rotate(300) translate(0, -155)">
|
||||
<polygon points="0,-3 1,-1 3,0 1,1 0,3 -1,1 -3,0 -1,-1" fill="#818CF8">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="5.2s" begin="2.5s" repeatCount="indefinite" />
|
||||
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="5.2s" begin="2.5s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
152
logo-mockups/kalei-claude-animated.svg
Normal file
152
logo-mockups/kalei-claude-animated.svg
Normal file
@@ -0,0 +1,152 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Petal gradients with animated color shifting -->
|
||||
<linearGradient id="b1" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="4s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#6D28D9"><animate attributeName="stop-color" values="#6D28D9;#8B5CF6;#6D28D9" dur="4s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b2" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#60A5FA"><animate attributeName="stop-color" values="#60A5FA;#93C5FD;#60A5FA" dur="4.5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#1E40AF"><animate attributeName="stop-color" values="#1E40AF;#3B82F6;#1E40AF" dur="4.5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b3" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#34D399"><animate attributeName="stop-color" values="#34D399;#6EE7B7;#34D399" dur="5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#065F46"><animate attributeName="stop-color" values="#065F46;#10B981;#065F46" dur="5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b4" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.2s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#92400E"><animate attributeName="stop-color" values="#92400E;#D97706;#92400E" dur="4.2s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b5" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#F472B6"><animate attributeName="stop-color" values="#F472B6;#FBCFE8;#F472B6" dur="4.8s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#9D174D"><animate attributeName="stop-color" values="#9D174D;#EC4899;#9D174D" dur="4.8s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b6" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#818CF8"><animate attributeName="stop-color" values="#818CF8;#A5B4FC;#818CF8" dur="4.3s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#3730A3"><animate attributeName="stop-color" values="#3730A3;#6366F1;#3730A3" dur="4.3s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
|
||||
<!-- Rotating prismatic gradient for core -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8" dur="6s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura gradient -->
|
||||
<radialGradient id="aura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.15"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#C4B5FD" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="14" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="sparkle" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Breathing outer aura -->
|
||||
<circle cx="200" cy="200" r="180" fill="url(#aura)">
|
||||
<animate attributeName="r" values="160;185;160" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Main logo group with very slow rotation -->
|
||||
<g transform="translate(200,200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="120s" repeatCount="indefinite" additive="replace"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="200,200" dur="120s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Inner counter-rotating light ring -->
|
||||
<circle r="100" fill="none" stroke="url(#prismatic)" stroke-width="0.5" opacity="0.3" stroke-dasharray="8 12">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="30s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Petals with staggered breathing opacity -->
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b1)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b2)" opacity="0.87" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b3)" opacity="0.87" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b4)" opacity="0.87" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b5)" opacity="0.87" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b6)" opacity="0.82" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.78;0.95;0.78" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Refraction light lines radiating from center -->
|
||||
<g opacity="0.25">
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing prismatic core -->
|
||||
<circle r="30" fill="url(#prismatic)" filter="url(#softGlow)">
|
||||
<animate attributeName="r" values="28;33;28" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner core detail ring -->
|
||||
<circle r="22" fill="none" stroke="#fff" stroke-width="0.8" opacity="0.4">
|
||||
<animate attributeName="r" values="20;24;20" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular highlight on core -->
|
||||
<circle cx="-6" cy="-8" r="8" fill="white" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="7;9;7" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary highlight -->
|
||||
<circle cx="4" cy="6" r="4" fill="white" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Floating sparkle particles orbiting the logo -->
|
||||
<g filter="url(#sparkle)">
|
||||
<circle r="2" fill="#C4B5FD" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 1 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2.5;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#93C5FD" opacity="0">
|
||||
<animateMotion dur="10s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 1 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2;1" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#6EE7B7" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.6;0;0.6;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#FDE68A" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.8;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#FBCFE8" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-145 A145,145 0 1 0 -0.1,-145"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0;0.5;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#fff" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-110 A110,110 0 1 1 -0.1,-110"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
229
logo-mockups/kalei-gemini-animated.svg
Normal file
229
logo-mockups/kalei-gemini-animated.svg
Normal file
@@ -0,0 +1,229 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#F59E0B"><animate attributeName="stop-color" values="#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"><animate attributeName="stop-color" values="#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Pulsing prismatic hexagon -->
|
||||
<polygon points="38,0 19,32.909 -19,32.909 -38,0 -19,-32.909 19,-32.909" fill="url(#prismatic)">
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.06;1" dur="3s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
|
||||
<!-- Animated mirror lines with sequential flash -->
|
||||
<line x1="-38" y1="0" x2="38" y2="0" stroke="#ffffff" stroke-width="1.5" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="-19" y1="-32.909" x2="19" y2="32.909" stroke="#ffffff" stroke-width="1.5" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="19" y1="-32.909" x2="-19" y2="32.909" stroke="#ffffff" stroke-width="1.5" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Pulsing center refraction point -->
|
||||
<circle r="4" fill="#ffffff" filter="url(#glow)">
|
||||
<animate attributeName="r" values="3;5.5;3" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge with pulse -->
|
||||
<polygon points="38,0 19,32.909 -19,32.909 -38,0 -19,-32.909 19,-32.909" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.06;1" dur="3s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
260
logo-mockups/kalei-gemini-core-A-prismatic-orb.svg
Normal file
260
logo-mockups/kalei-gemini-core-A-prismatic-orb.svg
Normal file
@@ -0,0 +1,260 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#F59E0B"><animate attributeName="stop-color" values="#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"><animate attributeName="stop-color" values="#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Warm inner glow halo for the orb -->
|
||||
<radialGradient id="warmHalo" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FCD34D" stop-opacity="0.4"><animate attributeName="stop-color" values="#FCD34D;#F59E0B;#FCD34D" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="60%" stop-color="#F59E0B" stop-opacity="0.1"/>
|
||||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Soft glow filter for the orb -->
|
||||
<filter id="softGlow" x="-60%" y="-60%" width="220%" height="220%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE: Prismatic Orb -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Warm inner glow halo -->
|
||||
<circle r="38" fill="url(#warmHalo)">
|
||||
<animate attributeName="r" values="36;40;36" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Main pulsing prismatic orb -->
|
||||
<circle r="38" fill="url(#prismatic)" filter="url(#softGlow)">
|
||||
<animate attributeName="r" values="36;42;36" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Subtle breathing outer ring -->
|
||||
<circle r="32" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.4">
|
||||
<animate attributeName="r" values="30;35;30" dur="3.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular highlight 1 (upper left) -->
|
||||
<circle cx="-10" cy="-12" r="10" fill="white" opacity="0.25" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.15;0.4;0.15" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="9;12;9" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular highlight 2 (lower right) -->
|
||||
<circle cx="8" cy="10" r="6" fill="white" opacity="0.18" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.1;0.28;0.1" dur="3.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="5;7;5" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular highlight 3 (top) -->
|
||||
<circle cx="0" cy="-15" r="5" fill="white" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.12;0.32;0.12" dur="3.8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="4;6;4" dur="3.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Pulsing center refraction point -->
|
||||
<circle r="5" fill="#ffffff" filter="url(#glow)" opacity="0.9">
|
||||
<animate attributeName="r" values="4;6.5;4" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge with pulse (circular) -->
|
||||
<circle r="38" fill="none" stroke="#ffffff" stroke-width="1.2" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="38;42;38" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
265
logo-mockups/kalei-gemini-core-B-nebula-vortex.svg
Normal file
265
logo-mockups/kalei-gemini-core-B-nebula-vortex.svg
Normal file
@@ -0,0 +1,265 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#F59E0B"><animate attributeName="stop-color" values="#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"><animate attributeName="stop-color" values="#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Dark nebula base gradient -->
|
||||
<radialGradient id="nebulaDark" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#1a0a2e" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#1a0a2e" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="nebulaCoreGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - Nebula Vortex -->
|
||||
<g filter="url(#nebulaCoreGlow)">
|
||||
<!-- Dark nebula base layer -->
|
||||
<circle cx="0" cy="0" r="45" fill="url(#nebulaDark)" opacity="0.9"/>
|
||||
|
||||
<!-- Swirling nebula ellipses with counter-rotating motion -->
|
||||
|
||||
<!-- Violet ellipse - fast clockwise -->
|
||||
<ellipse cx="0" cy="0" rx="32" ry="18" fill="#8B5CF6" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="8s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Blue ellipse - slow counter-clockwise, rotated 30 degrees -->
|
||||
<ellipse cx="0" cy="0" rx="28" ry="22" fill="#3B82F6" opacity="0.45">
|
||||
<animateTransform attributeName="transform" type="rotate" from="30" to="-330" dur="12s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Green ellipse - medium clockwise, rotated 60 degrees -->
|
||||
<ellipse cx="0" cy="0" rx="25" ry="20" fill="#10B981" opacity="0.48">
|
||||
<animateTransform attributeName="transform" type="rotate" from="60" to="420" dur="10s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Pink ellipse - very slow counter-clockwise, rotated 90 degrees -->
|
||||
<ellipse cx="0" cy="0" rx="30" ry="16" fill="#EC4899" opacity="0.42">
|
||||
<animateTransform attributeName="transform" type="rotate" from="90" to="-270" dur="15s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Twinkling star dots scattered inside -->
|
||||
<circle cx="8" cy="-12" r="1.5" fill="#ffffff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.8;0;0.6;0" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-15" cy="6" r="1" fill="#ffffff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.8;0" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12" cy="8" r="1.5" fill="#ffffff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.9;0;0.5;0" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-8" cy="-10" r="1" fill="#ffffff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.75;0;0.7;0" dur="2.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="4" cy="14" r="1.2" fill="#ffffff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.8;0;0.6;0" dur="3.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Soft white center glow with pulse -->
|
||||
<circle cx="0" cy="0" r="8" fill="#ffffff" opacity="0.3" filter="url(#glow)">
|
||||
<animate attributeName="r" values="6;8;6" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.25;0.5;0.25" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge with pulse -->
|
||||
<circle cx="0" cy="0" r="43" fill="none" stroke="#ffffff" stroke-width="1.2" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.9;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="43;45;43" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
302
logo-mockups/kalei-gemini-core-C-starburst.svg
Normal file
302
logo-mockups/kalei-gemini-core-C-starburst.svg
Normal file
@@ -0,0 +1,302 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo -->
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - STARBURST VARIANT -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly -->
|
||||
<g opacity="0.35">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="120s" repeatCount="indefinite"/>
|
||||
<!-- Violet ray -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Blue ray (60°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Green ray (120°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.4s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Amber ray (180°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Pink ray (240°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.3s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Indigo ray (300°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.5s" begin="2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths -->
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<!-- Ray 0: long (0°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 1: short (30°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 2: long (60°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 3: short (90°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(90)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 4: long (120°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 5: short (150°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(150)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 6: long (180°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 7: short (210°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(210)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 8: long (240°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 9: short (270°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(270)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 10: long (300°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 11: short (330°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(330)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Central bright white-to-prismatic circle with heavy glow and pulsing -->
|
||||
<circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95">
|
||||
<animate attributeName="r" values="10;14;10" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tiny sharp specular highlight off-center -->
|
||||
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge with pulse (adjusted for starburst radius) -->
|
||||
<circle r="50" fill="none" stroke="#ffffff" stroke-width="0.8" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
296
logo-mockups/kalei-gemini-core-D-bloom.svg
Normal file
296
logo-mockups/kalei-gemini-core-D-bloom.svg
Normal file
@@ -0,0 +1,296 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#F59E0B"><animate attributeName="stop-color" values="#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"><animate attributeName="stop-color" values="#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Bloom halo gradient (subtle soft glow) -->
|
||||
<radialGradient id="bloomHalo" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - MINIATURE BLOOM DESIGN -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Bloom halo (subtle soft glow behind petals) -->
|
||||
<circle cx="0" cy="0" r="45" fill="url(#bloomHalo)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.7;0.4" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Mini-petals rotating OPPOSITE to outer iris (counter-rotate) -->
|
||||
<!-- Each petal uses scaled bezier curve from original: M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24 -->
|
||||
<!-- Scaled by ~0.23 to fit within r=40 -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Violet petal (0°) -->
|
||||
<path d="M 0,-5.5 Q 11.5,-23 6.9,-39 Q -2.3,-39 -9.2,-32.2 Q -6.9,-18.4 0,-5.5" fill="#A78BFA" fill-opacity="0.7" stroke="none"/>
|
||||
|
||||
<!-- Blue petal (60°) -->
|
||||
<path d="M 4.75,-2.75 Q 15.75,-16.5 17.25,-30.5 Q 11,-37.25 2.3,-36.5 Q -2.3,-24.75 4.75,-2.75" fill="#60A5FA" fill-opacity="0.7" stroke="none"/>
|
||||
|
||||
<!-- Green petal (120°) -->
|
||||
<path d="M 4.75,2.75 Q 15.75,16.5 17.25,30.5 Q 11,37.25 2.3,36.5 Q -2.3,24.75 4.75,2.75" fill="#34D399" fill-opacity="0.7" stroke="none"/>
|
||||
|
||||
<!-- Amber petal (180°) -->
|
||||
<path d="M 0,5.5 Q 11.5,23 6.9,39 Q -2.3,39 -9.2,32.2 Q -6.9,18.4 0,5.5" fill="#FCD34D" fill-opacity="0.7" stroke="none"/>
|
||||
|
||||
<!-- Pink petal (240°) -->
|
||||
<path d="M -4.75,2.75 Q -15.75,16.5 -17.25,30.5 Q -11,37.25 -2.3,36.5 Q 2.3,24.75 -4.75,2.75" fill="#F472B6" fill-opacity="0.7" stroke="none"/>
|
||||
|
||||
<!-- Indigo petal (300°) -->
|
||||
<path d="M -4.75,-2.75 Q -15.75,-16.5 -17.25,-30.5 Q -11,-37.25 -2.3,-36.5 Q 2.3,-24.75 -4.75,-2.75" fill="#818CF8" fill-opacity="0.7" stroke="none"/>
|
||||
</g>
|
||||
|
||||
<!-- Individual petal breathing animations (staggered) -->
|
||||
<g transform="rotate(0)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" additive="sum"/>
|
||||
<path d="M 0,-5.5 Q 11.5,-23 6.9,-39 Q -2.3,-39 -9.2,-32.2 Q -6.9,-18.4 0,-5.5" fill="#A78BFA" fill-opacity="0.7" stroke="none">
|
||||
<animate attributeName="fill-opacity" values="0.5;0.9;0.5" dur="3s" begin="0s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<g transform="rotate(60)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" additive="sum"/>
|
||||
<path d="M 0,-5.5 Q 11.5,-23 6.9,-39 Q -2.3,-39 -9.2,-32.2 Q -6.9,-18.4 0,-5.5" fill="#60A5FA" fill-opacity="0.7" stroke="none">
|
||||
<animate attributeName="fill-opacity" values="0.5;0.9;0.5" dur="3s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<g transform="rotate(120)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" additive="sum"/>
|
||||
<path d="M 0,-5.5 Q 11.5,-23 6.9,-39 Q -2.3,-39 -9.2,-32.2 Q -6.9,-18.4 0,-5.5" fill="#34D399" fill-opacity="0.7" stroke="none">
|
||||
<animate attributeName="fill-opacity" values="0.5;0.9;0.5" dur="3s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<g transform="rotate(180)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" additive="sum"/>
|
||||
<path d="M 0,-5.5 Q 11.5,-23 6.9,-39 Q -2.3,-39 -9.2,-32.2 Q -6.9,-18.4 0,-5.5" fill="#FCD34D" fill-opacity="0.7" stroke="none">
|
||||
<animate attributeName="fill-opacity" values="0.5;0.9;0.5" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<g transform="rotate(240)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" additive="sum"/>
|
||||
<path d="M 0,-5.5 Q 11.5,-23 6.9,-39 Q -2.3,-39 -9.2,-32.2 Q -6.9,-18.4 0,-5.5" fill="#F472B6" fill-opacity="0.7" stroke="none">
|
||||
<animate attributeName="fill-opacity" values="0.5;0.9;0.5" dur="3s" begin="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<g transform="rotate(300)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" additive="sum"/>
|
||||
<path d="M 0,-5.5 Q 11.5,-23 6.9,-39 Q -2.3,-39 -9.2,-32.2 Q -6.9,-18.4 0,-5.5" fill="#818CF8" fill-opacity="0.7" stroke="none">
|
||||
<animate attributeName="fill-opacity" values="0.5;0.9;0.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Glowing prismatic center dot with color cycling -->
|
||||
<circle cx="0" cy="0" r="8" fill="url(#prismatic)" filter="url(#glow)">
|
||||
<animate attributeName="r" values="6;10;6" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular white highlight on center dot -->
|
||||
<circle cx="-2" cy="-2" r="3" fill="#ffffff" opacity="0.8" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge polygon (updated for bloom design) -->
|
||||
<circle cx="0" cy="0" r="45" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
BIN
logo-mockups/logo-mockups.rar
Normal file
BIN
logo-mockups/logo-mockups.rar
Normal file
Binary file not shown.
117
logo-mockups/preview.html
Normal file
117
logo-mockups/preview.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kalei Logo Mockups — Animated Preview</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 20px;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
opacity: 0.6;
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.bg-toggle {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.bg-toggle button {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid rgba(128,128,128,0.3);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.bg-toggle button.active { font-weight: 700; }
|
||||
body.dark { background: #0a0e1a; color: #e0e0e0; }
|
||||
body.light { background: #f5f5f5; color: #1a1a1a; }
|
||||
body.checker {
|
||||
background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
body.dark .bg-toggle button { background: #1a1f2e; color: #ccc; }
|
||||
body.dark .bg-toggle button.active { background: #2a3040; border-color: #6366F1; color: #fff; }
|
||||
body.light .bg-toggle button { background: #fff; color: #333; }
|
||||
body.light .bg-toggle button.active { background: #e8e8e8; border-color: #6366F1; }
|
||||
body.checker .bg-toggle button { background: #fff; color: #333; }
|
||||
body.checker .bg-toggle button.active { background: #e8e8e8; border-color: #6366F1; }
|
||||
|
||||
.logos {
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.logo-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.logo-card object, .logo-card img {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
}
|
||||
.logo-label {
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark">
|
||||
<div class="bg-toggle">
|
||||
<button onclick="setBg('dark')" class="active">Dark</button>
|
||||
<button onclick="setBg('light')">Light</button>
|
||||
<button onclick="setBg('checker')">Transparent</button>
|
||||
</div>
|
||||
|
||||
<h1>Kalei</h1>
|
||||
<p class="subtitle">Animated Logo Mockups</p>
|
||||
|
||||
<div class="logos">
|
||||
<div class="logo-card">
|
||||
<object type="image/svg+xml" data="kalei-claude-animated.svg"></object>
|
||||
<span class="logo-label">Claude Version — Prismatic Bloom</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<object type="image/svg+xml" data="kalei-gemini-animated.svg"></object>
|
||||
<span class="logo-label">Gemini Version — Crystalline Iris</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setBg(mode) {
|
||||
document.body.className = mode;
|
||||
document.querySelectorAll('.bg-toggle button').forEach(b => b.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
162
logo-mockups/semi-finalists/bloom-C1-deep-saturation.svg
Normal file
162
logo-mockups/semi-finalists/bloom-C1-deep-saturation.svg
Normal file
@@ -0,0 +1,162 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Petal gradients with animated color shifting - DEEPER SATURATED COLORS -->
|
||||
<linearGradient id="b1" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#9575F5"><animate attributeName="stop-color" values="#9575F5;#B89EFF;#9575F5" dur="4s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#6D28D9"><animate attributeName="stop-color" values="#6D28D9;#8B5CF6;#6D28D9" dur="4s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b2" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#4B96F5"><animate attributeName="stop-color" values="#4B96F5;#7DB8FF;#4B96F5" dur="4.5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#1E40AF"><animate attributeName="stop-color" values="#1E40AF;#3B82F6;#1E40AF" dur="4.5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b3" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#22C589"><animate attributeName="stop-color" values="#22C589;#52E0AC;#22C589" dur="5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#065F46"><animate attributeName="stop-color" values="#065F46;#10B981;#065F46" dur="5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b4" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#F5C030"><animate attributeName="stop-color" values="#F5C030;#FFDD6B;#F5C030" dur="4.2s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#92400E"><animate attributeName="stop-color" values="#92400E;#D97706;#92400E" dur="4.2s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b5" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#EF5BA5"><animate attributeName="stop-color" values="#EF5BA5;#FFA0CC;#EF5BA5" dur="4.8s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#9D174D"><animate attributeName="stop-color" values="#9D174D;#EC4899;#9D174D" dur="4.8s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b6" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#6E7BF5"><animate attributeName="stop-color" values="#6E7BF5;#9BA8FF;#6E7BF5" dur="4.3s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#3730A3"><animate attributeName="stop-color" values="#3730A3;#6366F1;#3730A3" dur="4.3s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
|
||||
<!-- Rotating prismatic gradient for core -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8" dur="6s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura gradient -->
|
||||
<radialGradient id="aura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.15"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#C4B5FD" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="14" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="sparkle" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Breathing outer aura -->
|
||||
<circle cx="200" cy="200" r="180" fill="url(#aura)">
|
||||
<animate attributeName="r" values="160;185;160" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Main logo group with slightly slower rotation -->
|
||||
<g transform="translate(200,200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="150s" repeatCount="indefinite" additive="replace"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="200,200" dur="150s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Inner counter-rotating light ring -->
|
||||
<circle r="100" fill="none" stroke="url(#prismatic)" stroke-width="0.5" opacity="0.3" stroke-dasharray="8 12">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="30s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Petals with staggered breathing opacity -->
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b1)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b2)" opacity="0.87" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b3)" opacity="0.87" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b4)" opacity="0.87" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b5)" opacity="0.87" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b6)" opacity="0.82" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.78;0.95;0.78" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Refraction light lines radiating from center -->
|
||||
<g opacity="0.25">
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing prismatic core - SMALLER -->
|
||||
<circle r="26" fill="url(#prismatic)" filter="url(#softGlow)">
|
||||
<animate attributeName="r" values="24;29;24" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Brighter center hotspot overlay - NEW -->
|
||||
<circle r="14" fill="white" opacity="0.25">
|
||||
<animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner core detail ring -->
|
||||
<circle r="22" fill="none" stroke="#fff" stroke-width="0.8" opacity="0.4">
|
||||
<animate attributeName="r" values="20;24;20" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular highlight on core -->
|
||||
<circle cx="-6" cy="-8" r="8" fill="white" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="7;9;7" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary highlight -->
|
||||
<circle cx="4" cy="6" r="4" fill="white" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tertiary highlight - NEW -->
|
||||
<circle cx="8" cy="-3" r="3" fill="white" opacity="0.1">
|
||||
<animate attributeName="opacity" values="0.05;0.18;0.05" dur="2.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Floating sparkle particles orbiting the logo -->
|
||||
<g filter="url(#sparkle)">
|
||||
<circle r="2" fill="#C4B5FD" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 1 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2.5;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#93C5FD" opacity="0">
|
||||
<animateMotion dur="10s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 1 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2;1" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#6EE7B7" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.6;0;0.6;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#FDE68A" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.8;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#FBCFE8" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-145 A145,145 0 1 0 -0.1,-145"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0;0.5;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#fff" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-110 A110,110 0 1 1 -0.1,-110"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
136
logo-mockups/semi-finalists/bloom-C2-ethereal-light.svg
Normal file
136
logo-mockups/semi-finalists/bloom-C2-ethereal-light.svg
Normal file
@@ -0,0 +1,136 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Petal gradients with animated color shifting - lighter, more pastel -->
|
||||
<linearGradient id="b1" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD3FF;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#9F7AEA"><animate attributeName="stop-color" values="#9F7AEA;#B794F6;#9F7AEA" dur="4s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b2" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BAD9FF;#93C5FD" dur="4.5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#60A5FA"><animate attributeName="stop-color" values="#60A5FA;#93C5FD;#60A5FA" dur="4.5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b3" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#34D399"><animate attributeName="stop-color" values="#34D399;#6EE7B7;#34D399" dur="5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b4" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.2s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b5" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FECDD6;#F9A8D4" dur="4.8s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#F472B6"><animate attributeName="stop-color" values="#F472B6;#F9A8D4;#F472B6" dur="4.8s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b6" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="4.3s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#818CF8"><animate attributeName="stop-color" values="#818CF8;#A5B4FC;#818CF8" dur="4.3s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
|
||||
<!-- Rotating prismatic gradient for core -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8" dur="6s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura gradient -->
|
||||
<radialGradient id="aura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.15"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#C4B5FD" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="sparkle" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Breathing outer aura - larger breath -->
|
||||
<circle cx="200" cy="200" r="180" fill="url(#aura)">
|
||||
<animate attributeName="r" values="155;190;155" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Main logo group with very slow rotation -->
|
||||
<g transform="translate(200,200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="120s" repeatCount="indefinite" additive="replace"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="200,200" dur="120s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Inner counter-rotating light ring -->
|
||||
<circle r="100" fill="none" stroke="url(#prismatic)" stroke-width="0.5" opacity="0.3" stroke-dasharray="8 12">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="30s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Petals with staggered breathing opacity -->
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b1)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b2)" opacity="0.87" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b3)" opacity="0.87" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b4)" opacity="0.87" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b5)" opacity="0.87" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b6)" opacity="0.82" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.78;0.95;0.78" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Subtle connecting arcs between petal tips -->
|
||||
<circle r="165" fill="none" stroke="#fff" stroke-width="0.4" opacity="0.15" stroke-dasharray="20 68">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="45s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.12;0.25;0.12" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Pulsing prismatic core - larger, dreamier -->
|
||||
<circle r="35" fill="url(#prismatic)" filter="url(#softGlow)">
|
||||
<animate attributeName="r" values="32;38;32" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner core detail ring -->
|
||||
<circle r="22" fill="none" stroke="#fff" stroke-width="0.8" opacity="0.4">
|
||||
<animate attributeName="r" values="20;24;20" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular highlight on core -->
|
||||
<circle cx="-6" cy="-8" r="8" fill="white" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="7;9;7" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary highlight -->
|
||||
<circle cx="4" cy="6" r="4" fill="white" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Floating sparkle particles orbiting the logo -->
|
||||
<g filter="url(#sparkle)">
|
||||
<circle r="2" fill="#C4B5FD" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 1 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2.5;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#93C5FD" opacity="0">
|
||||
<animateMotion dur="10s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 1 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2;1" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#6EE7B7" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.6;0;0.6;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#FDE68A" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.8;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#FBCFE8" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-145 A145,145 0 1 0 -0.1,-145"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0;0.5;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#fff" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-110 A110,110 0 1 1 -0.1,-110"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
181
logo-mockups/semi-finalists/bloom-C3-glass-facets.svg
Normal file
181
logo-mockups/semi-finalists/bloom-C3-glass-facets.svg
Normal file
@@ -0,0 +1,181 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Petal gradients with animated color shifting -->
|
||||
<linearGradient id="b1" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="4s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#6D28D9"><animate attributeName="stop-color" values="#6D28D9;#8B5CF6;#6D28D9" dur="4s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b2" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#60A5FA"><animate attributeName="stop-color" values="#60A5FA;#93C5FD;#60A5FA" dur="4.5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#1E40AF"><animate attributeName="stop-color" values="#1E40AF;#3B82F6;#1E40AF" dur="4.5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b3" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#34D399"><animate attributeName="stop-color" values="#34D399;#6EE7B7;#34D399" dur="5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#065F46"><animate attributeName="stop-color" values="#065F46;#10B981;#065F46" dur="5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b4" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.2s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#92400E"><animate attributeName="stop-color" values="#92400E;#D97706;#92400E" dur="4.2s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b5" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#F472B6"><animate attributeName="stop-color" values="#F472B6;#FBCFE8;#F472B6" dur="4.8s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#9D174D"><animate attributeName="stop-color" values="#9D174D;#EC4899;#9D174D" dur="4.8s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b6" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#818CF8"><animate attributeName="stop-color" values="#818CF8;#A5B4FC;#818CF8" dur="4.3s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#3730A3"><animate attributeName="stop-color" values="#3730A3;#6366F1;#3730A3" dur="4.3s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
|
||||
<!-- Rotating prismatic gradient for core -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8" dur="6s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura gradient -->
|
||||
<radialGradient id="aura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.15"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#C4B5FD" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="14" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="sparkle" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Breathing outer aura -->
|
||||
<circle cx="200" cy="200" r="180" fill="url(#aura)">
|
||||
<animate attributeName="r" values="160;185;160" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Main logo group with very slow rotation -->
|
||||
<g transform="translate(200,200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="120s" repeatCount="indefinite" additive="replace"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="200,200" dur="120s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Inner counter-rotating light ring -->
|
||||
<circle r="100" fill="none" stroke="url(#prismatic)" stroke-width="1.0" stroke-dasharray="4 3" opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="30s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Petals with stained-glass outlines and tighter spacing -->
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b1)" opacity="0.9" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b2)" opacity="0.87" transform="rotate(60)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b3)" opacity="0.87" transform="rotate(120)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b4)" opacity="0.87" transform="rotate(180)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b5)" opacity="0.87" transform="rotate(240)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 48,-98 28,-168 Q -8,-168 -38,-138 Q -28,-78 0,-24" fill="url(#b6)" opacity="0.82" transform="rotate(300)" stroke="#fff" stroke-width="0.6" stroke-opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.78;0.95;0.78" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Refraction light lines radiating from center -->
|
||||
<g opacity="0.25">
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing prismatic core -->
|
||||
<circle r="30" fill="url(#prismatic)" filter="url(#softGlow)">
|
||||
<animate attributeName="r" values="28;33;28" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner core detail ring -->
|
||||
<circle r="22" fill="none" stroke="#fff" stroke-width="1.0" stroke-dasharray="4 3" opacity="0.4">
|
||||
<animate attributeName="r" values="20;24;20" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Rotating inner dot ring (8 dots arranged in circle at r=18, rotating opposite to main) -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="15s" repeatCount="indefinite"/>
|
||||
<circle cx="18" cy="0" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="0s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12.73" cy="12.73" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="0.625s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="0" cy="18" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="1.25s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-12.73" cy="12.73" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="1.875s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-18" cy="0" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-12.73" cy="-12.73" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="3.125s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="0" cy="-18" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="3.75s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12.73" cy="-12.73" r="1" fill="#fff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="2.5s" begin="4.375s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Specular highlight on core -->
|
||||
<circle cx="-6" cy="-8" r="8" fill="white" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="7;9;7" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary highlight -->
|
||||
<circle cx="4" cy="6" r="4" fill="white" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Floating sparkle particles orbiting the logo -->
|
||||
<g filter="url(#sparkle)">
|
||||
<circle r="2" fill="#C4B5FD" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 1 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2.5;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#93C5FD" opacity="0">
|
||||
<animateMotion dur="10s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 1 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2;1" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#6EE7B7" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.6;0;0.6;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#FDE68A" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.8;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#FBCFE8" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-145 A145,145 0 1 0 -0.1,-145"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0;0.5;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#fff" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-110 A110,110 0 1 1 -0.1,-110"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
152
logo-mockups/semi-finalists/bloom-original.svg
Normal file
152
logo-mockups/semi-finalists/bloom-original.svg
Normal file
@@ -0,0 +1,152 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Petal gradients with animated color shifting -->
|
||||
<linearGradient id="b1" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="4s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#6D28D9"><animate attributeName="stop-color" values="#6D28D9;#8B5CF6;#6D28D9" dur="4s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b2" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#60A5FA"><animate attributeName="stop-color" values="#60A5FA;#93C5FD;#60A5FA" dur="4.5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#1E40AF"><animate attributeName="stop-color" values="#1E40AF;#3B82F6;#1E40AF" dur="4.5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b3" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#34D399"><animate attributeName="stop-color" values="#34D399;#6EE7B7;#34D399" dur="5s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#065F46"><animate attributeName="stop-color" values="#065F46;#10B981;#065F46" dur="5s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b4" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.2s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#92400E"><animate attributeName="stop-color" values="#92400E;#D97706;#92400E" dur="4.2s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b5" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#F472B6"><animate attributeName="stop-color" values="#F472B6;#FBCFE8;#F472B6" dur="4.8s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#9D174D"><animate attributeName="stop-color" values="#9D174D;#EC4899;#9D174D" dur="4.8s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
<linearGradient id="b6" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#818CF8"><animate attributeName="stop-color" values="#818CF8;#A5B4FC;#818CF8" dur="4.3s" repeatCount="indefinite"/></stop><stop offset="100%" stop-color="#3730A3"><animate attributeName="stop-color" values="#3730A3;#6366F1;#3730A3" dur="4.3s" repeatCount="indefinite"/></stop></linearGradient>
|
||||
|
||||
<!-- Rotating prismatic gradient for core -->
|
||||
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="25%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="75%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8" dur="6s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Outer aura gradient -->
|
||||
<radialGradient id="aura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.15"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#C4B5FD" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="14" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="sparkle" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Breathing outer aura -->
|
||||
<circle cx="200" cy="200" r="180" fill="url(#aura)">
|
||||
<animate attributeName="r" values="160;185;160" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Main logo group with very slow rotation -->
|
||||
<g transform="translate(200,200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="120s" repeatCount="indefinite" additive="replace"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="200,200" dur="120s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Inner counter-rotating light ring -->
|
||||
<circle r="100" fill="none" stroke="url(#prismatic)" stroke-width="0.5" opacity="0.3" stroke-dasharray="8 12">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="30s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Petals with staggered breathing opacity -->
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b1)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b2)" opacity="0.87" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b3)" opacity="0.87" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b4)" opacity="0.87" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b5)" opacity="0.87" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.82;0.97;0.82" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 Q 50,-100 30,-170 Q -10,-170 -40,-140 Q -30,-80 0,-24" fill="url(#b6)" opacity="0.82" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.78;0.95;0.78" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Refraction light lines radiating from center -->
|
||||
<g opacity="0.25">
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="-165" stroke="#fff" stroke-width="0.5" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing prismatic core -->
|
||||
<circle r="30" fill="url(#prismatic)" filter="url(#softGlow)">
|
||||
<animate attributeName="r" values="28;33;28" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner core detail ring -->
|
||||
<circle r="22" fill="none" stroke="#fff" stroke-width="0.8" opacity="0.4">
|
||||
<animate attributeName="r" values="20;24;20" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Specular highlight on core -->
|
||||
<circle cx="-6" cy="-8" r="8" fill="white" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="7;9;7" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary highlight -->
|
||||
<circle cx="4" cy="6" r="4" fill="white" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Floating sparkle particles orbiting the logo -->
|
||||
<g filter="url(#sparkle)">
|
||||
<circle r="2" fill="#C4B5FD" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 1 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2.5;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#93C5FD" opacity="0">
|
||||
<animateMotion dur="10s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 1 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="1;2;1" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#6EE7B7" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.6;0;0.6;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#FDE68A" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.8;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#FBCFE8" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-145 A145,145 0 1 0 -0.1,-145"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0;0.5;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#fff" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-110 A110,110 0 1 1 -0.1,-110"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
138
logo-mockups/semi-finalists/compare.html
Normal file
138
logo-mockups/semi-finalists/compare.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kalei Logo Finalists — Polished Variants</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 30px 20px 60px;
|
||||
transition: background 0.4s, color 0.4s;
|
||||
}
|
||||
h1 { font-size: 22px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 4px; }
|
||||
.subtitle { font-size: 12px; opacity: 0.45; margin-bottom: 10px; letter-spacing: 1px; }
|
||||
.controls {
|
||||
position: fixed; top: 14px; right: 14px;
|
||||
display: flex; gap: 6px; z-index: 10;
|
||||
}
|
||||
.controls button {
|
||||
padding: 5px 12px; border: 1px solid rgba(128,128,128,0.3); border-radius: 14px;
|
||||
cursor: pointer; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s;
|
||||
}
|
||||
.controls button.active { font-weight: 700; }
|
||||
body.dark { background: #0a0e1a; color: #e0e0e0; }
|
||||
body.light { background: #f5f5f5; color: #1a1a1a; }
|
||||
body.checker { background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 18px 18px; color: #1a1a1a; }
|
||||
body.dark .controls button { background: #1a1f2e; color: #ccc; }
|
||||
body.dark .controls button.active { background: #2a3040; border-color: #6366F1; color: #fff; }
|
||||
body.light .controls button, body.checker .controls button { background: #fff; color: #333; }
|
||||
body.light .controls button.active, body.checker .controls button.active { background: #e8e8e8; border-color: #6366F1; }
|
||||
|
||||
.section-title {
|
||||
font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
|
||||
margin: 28px 0 14px; opacity: 0.6;
|
||||
border-bottom: 1px solid rgba(128,128,128,0.2); padding-bottom: 6px;
|
||||
width: 100%; max-width: 1100px; text-align: center;
|
||||
}
|
||||
.row {
|
||||
display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
|
||||
max-width: 1100px; width: 100%;
|
||||
}
|
||||
.card {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||||
padding: 12px; border-radius: 10px; transition: background 0.3s;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
body.dark .card { background: rgba(255,255,255,0.03); }
|
||||
body.light .card { background: rgba(0,0,0,0.03); }
|
||||
body.checker .card { background: rgba(255,255,255,0.6); }
|
||||
.card object { width: 240px; height: 240px; }
|
||||
.card.original object { width: 180px; height: 180px; opacity: 0.6; }
|
||||
.card-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
|
||||
.card-desc { font-size: 11px; opacity: 0.5; text-align: center; line-height: 1.45; max-width: 220px; }
|
||||
.card.original .card-label { opacity: 0.5; font-size: 10px; }
|
||||
.badge {
|
||||
display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 9px;
|
||||
letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 2px;
|
||||
}
|
||||
body.dark .badge { background: rgba(99,102,241,0.15); color: #A5B4FC; }
|
||||
body.light .badge, body.checker .badge { background: rgba(99,102,241,0.1); color: #4338CA; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark">
|
||||
<div class="controls">
|
||||
<button onclick="setBg('dark')" class="active">Dark</button>
|
||||
<button onclick="setBg('light')">Light</button>
|
||||
<button onclick="setBg('checker')">Transparency</button>
|
||||
</div>
|
||||
|
||||
<h1>Kalei Finalists</h1>
|
||||
<p class="subtitle">Subtle polish variants of both logos</p>
|
||||
|
||||
<!-- STARBURST SECTION -->
|
||||
<div class="section-title">Starburst (Gemini Iris)</div>
|
||||
<div class="row">
|
||||
<div class="card original">
|
||||
<object type="image/svg+xml" data="starburst-original.svg"></object>
|
||||
<span class="card-label">Original</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="badge">S1</span>
|
||||
<object type="image/svg+xml" data="starburst-S1-warm-radiance.svg"></object>
|
||||
<span class="card-label">Warm Radiance</span>
|
||||
<span class="card-desc">Warmer gold-toned halo, larger core orb, subtle dashed inner ring, softer colored rays</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="badge">S2</span>
|
||||
<object type="image/svg+xml" data="starburst-S2-soft-elegance.svg"></object>
|
||||
<span class="card-label">Soft Elegance</span>
|
||||
<span class="card-desc">Rounded softer rays, slower animations, prismatic ring detail, inner refraction crescent</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="badge">S3</span>
|
||||
<object type="image/svg+xml" data="starburst-S3-prismatic-diamond.svg"></object>
|
||||
<span class="card-label">Prismatic Diamond</span>
|
||||
<span class="card-desc">Diamond-cut center, crisper rays, faint rotating hex wireframe, dual specular highlights</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BLOOM SECTION -->
|
||||
<div class="section-title">Prismatic Bloom (Claude Flower)</div>
|
||||
<div class="row">
|
||||
<div class="card original">
|
||||
<object type="image/svg+xml" data="bloom-original.svg"></object>
|
||||
<span class="card-label">Original</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="badge">C1</span>
|
||||
<object type="image/svg+xml" data="bloom-C1-deep-saturation.svg"></object>
|
||||
<span class="card-label">Deep Saturation</span>
|
||||
<span class="card-desc">Richer petal colors, tighter brighter core with hotspot, triple specular highlights, stately pace</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="badge">C2</span>
|
||||
<object type="image/svg+xml" data="bloom-C2-ethereal-light.svg"></object>
|
||||
<span class="card-label">Ethereal Light</span>
|
||||
<span class="card-desc">Pastel petals, larger dreamy core, deeper aura breathing, connecting arcs, no refraction lines</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="badge">C3</span>
|
||||
<object type="image/svg+xml" data="bloom-C3-glass-facets.svg"></object>
|
||||
<span class="card-label">Glass Facets</span>
|
||||
<span class="card-desc">Stained-glass petal outlines, rotating dot ring, tighter spacing, faceted inner ring</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setBg(mode) {
|
||||
document.body.className = mode;
|
||||
document.querySelectorAll('.controls button').forEach(b => b.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
307
logo-mockups/semi-finalists/starburst-S1-warm-radiance.svg
Normal file
307
logo-mockups/semi-finalists/starburst-S1-warm-radiance.svg
Normal file
@@ -0,0 +1,307 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo - WARM RADIANCE VARIANT -->
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#F3E8FF;#FDE68A" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#F59E0B"><animate attributeName="stop-color" values="#F59E0B;#A78BFA;#3B82F6;#10B981;#F59E0B" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0"><animate attributeName="stop-color" values="#F59E0B;#A78BFA;#3B82F6;#10B981;#F59E0B" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - WARM RADIANCE VARIANT -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with warm prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly - SOFTENED -->
|
||||
<g opacity="0.25">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="120s" repeatCount="indefinite"/>
|
||||
<!-- Violet ray -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0.20;0.38;0.20" dur="4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Blue ray (60°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.20;0.38;0.20" dur="4.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Green ray (120°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.20;0.38;0.20" dur="4.4s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Amber ray (180°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.20;0.38;0.20" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Pink ray (240°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.20;0.38;0.20" dur="4.3s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Indigo ray (300°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.20;0.38;0.20" dur="4.5s" begin="2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths -->
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<!-- Ray 0: long (0°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 1: short (30°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 2: long (60°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 3: short (90°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(90)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 4: long (120°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 5: short (150°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(150)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 6: long (180°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 7: short (210°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(210)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 8: long (240°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 9: short (270°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(270)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 10: long (300°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 11: short (330°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(330)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Central bright white-to-prismatic circle with heavy glow and pulsing - ENLARGED -->
|
||||
<circle r="15" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95">
|
||||
<animate attributeName="r" values="13;17;13" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tiny sharp specular highlight off-center -->
|
||||
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge with pulse (adjusted for starburst radius) -->
|
||||
<circle r="50" fill="none" stroke="#ffffff" stroke-width="0.8" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Second concentric dashed ring - SUBTLE STRUCTURE -->
|
||||
<circle r="42" fill="none" stroke="#ffffff" stroke-width="0.4" opacity="0.15" stroke-dasharray="3 6">
|
||||
<animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
312
logo-mockups/semi-finalists/starburst-S2-soft-elegance.svg
Normal file
312
logo-mockups/semi-finalists/starburst-S2-soft-elegance.svg
Normal file
@@ -0,0 +1,312 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo -->
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - STARBURST VARIANT (REFINED S2) -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Subtle second prismatic halo ring (new) -->
|
||||
<circle r="38" fill="none" stroke="url(#prismatic)" stroke-width="0.6" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly -->
|
||||
<g opacity="0.35">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="150s" repeatCount="indefinite"/>
|
||||
<!-- Violet ray -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Blue ray (60°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Green ray (120°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.4s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Amber ray (180°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Pink ray (240°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.3s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Indigo ray (300°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.5s" begin="2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths - REFINED SOFT ELEGANCE -->
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="75s" repeatCount="indefinite"/>
|
||||
<!-- Ray 0: long (0°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 1: short (30°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 2: long (60°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 3: short (90°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(90)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 4: long (120°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 5: short (150°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(150)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 6: long (180°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 7: short (210°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(210)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 8: long (240°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 9: short (270°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(270)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 10: long (300°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 11: short (330°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(330)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Central bright white-to-prismatic circle with heavy glow and pulsing - REFINED SLOWER PULSE -->
|
||||
<circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95">
|
||||
<animate attributeName="r" values="10;14;10" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner refraction crescent (new) -->
|
||||
<circle cx="-4" cy="-4" r="6" fill="#ffffff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.2;0.35;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tiny sharp specular highlight off-center -->
|
||||
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge with pulse (adjusted for starburst radius) -->
|
||||
<circle r="50" fill="none" stroke="#ffffff" stroke-width="0.8" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 20 KiB |
308
logo-mockups/semi-finalists/starburst-S3-prismatic-diamond.svg
Normal file
308
logo-mockups/semi-finalists/starburst-S3-prismatic-diamond.svg
Normal file
@@ -0,0 +1,308 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo -->
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - STARBURST VARIANT (REFINED S3) -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly -->
|
||||
<g opacity="0.35">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="120s" repeatCount="indefinite"/>
|
||||
<!-- Violet ray -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Blue ray (60°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Green ray (120°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.4s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Amber ray (180°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Pink ray (240°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.3s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Indigo ray (300°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.5s" begin="2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths -->
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<!-- Ray 0: long (0°) - increased peak opacity from 0.35 to 0.40 -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.40;0;0.2;0" dur="4s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 1: short (30°) - increased peak opacity from 0.25 to 0.30 -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 2: long (60°) - increased peak opacity from 0.35 to 0.40 -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.40;0;0.2;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 3: short (90°) - increased peak opacity from 0.25 to 0.30 -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(90)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 4: long (120°) - increased peak opacity from 0.35 to 0.40 -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.40;0;0.2;0" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 5: short (150°) - increased peak opacity from 0.25 to 0.30 -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(150)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 6: long (180°) - increased peak opacity from 0.35 to 0.40 -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.40;0;0.2;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 7: short (210°) - increased peak opacity from 0.25 to 0.30 -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(210)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 8: long (240°) - increased peak opacity from 0.35 to 0.40 -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.40;0;0.2;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 9: short (270°) - increased peak opacity from 0.25 to 0.30 -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(270)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 10: long (300°) - increased peak opacity from 0.35 to 0.40 -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.40;0;0.2;0" dur="4s" begin="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 11: short (330°) - increased peak opacity from 0.25 to 0.30 -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(330)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Very faint hexagonal wireframe - subtle callback to hex without dominating -->
|
||||
<polygon points="30,0 15,25.98 -15,25.98 -30,0 -15,-25.98 15,-25.98" fill="none" stroke="#fff" stroke-width="0.3" opacity="0.1">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="45s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.05;0.15;0.05" dur="6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
|
||||
<!-- Diamond center instead of circle: rotated square with pulsing animations -->
|
||||
<rect x="-10" y="-10" width="20" height="20" rx="2" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95" transform="rotate(45)">
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="scale" values="0.9;1.1;0.9" dur="2.5s" repeatCount="indefinite" additive="sum"/>
|
||||
</rect>
|
||||
|
||||
<!-- Primary specular highlight: increased radius from 1.5 to 2, peak opacity 1 to 0.95 -->
|
||||
<circle cx="3" cy="-3" r="2" fill="#ffffff" opacity="0.9" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;0.95;0.6" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary tiny highlight for gem-like effect: pulsing 0.4-0.7 dur 2s -->
|
||||
<circle cx="-2" cy="2" r="1" fill="#ffffff" opacity="0.4" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.4;0.7;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 20 KiB |
302
logo-mockups/semi-finalists/starburst-original.svg
Normal file
302
logo-mockups/semi-finalists/starburst-original.svg
Normal file
@@ -0,0 +1,302 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo -->
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura (replaces dark bg) -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#fff" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - STARBURST VARIANT -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly -->
|
||||
<g opacity="0.35">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="120s" repeatCount="indefinite"/>
|
||||
<!-- Violet ray -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Blue ray (60°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Green ray (120°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.4s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Amber ray (180°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Pink ray (240°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.3s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<!-- Indigo ray (300°) -->
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4.5s" begin="2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths -->
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<!-- Ray 0: long (0°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 1: short (30°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 2: long (60°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 3: short (90°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(90)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 4: long (120°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 5: short (150°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(150)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 6: long (180°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 7: short (210°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(210)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 8: long (240°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 9: short (270°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(270)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 10: long (300°) -->
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.8" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.35;0;0.2;0" dur="4s" begin="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Ray 11: short (330°) -->
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.6" opacity="0" transform="rotate(330)">
|
||||
<animate attributeName="opacity" values="0;0.25;0;0.15;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Central bright white-to-prismatic circle with heavy glow and pulsing -->
|
||||
<circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95">
|
||||
<animate attributeName="r" values="10;14;10" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tiny sharp specular highlight off-center -->
|
||||
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Outer core edge with pulse (adjusted for starburst radius) -->
|
||||
<circle r="50" fill="none" stroke="#ffffff" stroke-width="0.8" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
Reference in New Issue
Block a user