mirror of
https://github.com/TautvydasDerzinskas/Thingport.git
synced 2026-10-18 20:59:55 -05:00
feat: add different logo variations for special occasions
This commit is contained in:
Tautvydas Derzinskas committed
1 parent
c5e5ab460e
commit
2dbc92035d
26 files changed
+1136
-3
No files matched your search
@@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>First day of autumn</title>
|
||||
<style>
|
||||
.drift { animation: drift linear infinite; }
|
||||
@keyframes drift { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 25% { transform: translate(10px, 40px) rotate(70deg); } 50% { transform: translate(-6px, 80px) rotate(-30deg); } 75% { transform: translate(10px, 120px) rotate(90deg); } 90% { opacity: 1; } 100% { transform: translate(0, 160px) rotate(0); opacity: 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { .drift { display: none; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(-15 -40)"><g class="drift" style="animation-duration:7.0s;animation-delay:-1s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#e85d04" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(30 -40)"><g class="drift" style="animation-duration:7.7s;animation-delay:-3.2s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#d00000" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(75 -40)"><g class="drift" style="animation-duration:6.6s;animation-delay:-0.4s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#ffba08" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(120 -40)"><g class="drift" style="animation-duration:8.3s;animation-delay:-4.6s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#9c6644" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(165 -40)"><g class="drift" style="animation-duration:7.2s;animation-delay:-2.2s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#e85d04" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(210 -40)"><g class="drift" style="animation-duration:7.9s;animation-delay:-5.0s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#d00000" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(255 -40)"><g class="drift" style="animation-duration:6.8s;animation-delay:-1.6s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#ffba08" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(300 -40)"><g class="drift" style="animation-duration:7.5s;animation-delay:-3.8s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#9c6644" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(345 -40)"><g class="drift" style="animation-duration:7.3s;animation-delay:-2.8s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#e85d04" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(390 -40)"><g class="drift" style="animation-duration:8.1s;animation-delay:-0.9s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#d00000" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(430 -40)"><g class="drift" style="animation-duration:6.9s;animation-delay:-4.1s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#ffba08" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(475 -40)"><g class="drift" style="animation-duration:7.6s;animation-delay:-2.5s"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(0.9)" fill="#9c6644" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(424 76) rotate(-20)"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(1.2)" fill="#e85d04" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g>
|
||||
<g transform="translate(438 72) rotate(15)"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(1.2)" fill="#ffba08" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g>
|
||||
<g transform="translate(452 77) rotate(40)"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(1.2)" fill="#d00000" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g>
|
||||
<g transform="translate(466 73) rotate(-10)"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(1.2)" fill="#9c6644" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g>
|
||||
<g transform="translate(480 77) rotate(25)"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(1.2)" fill="#e85d04" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g>
|
||||
<g transform="translate(445 79) rotate(-35)"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(1.2)" fill="#ffba08" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g>
|
||||
<g transform="translate(470 80) rotate(60)"><path d="M0 -10 L2.5 -5 L7 -7 L5.5 -2 L10 -1 L6 3 L7.5 7 L1.5 5 L0 9 L-1.5 5 L-7.5 7 L-6 3 L-10 -1 L-5.5 -2 L-7 -7 L-2.5 -5 Z" transform="scale(1.2)" fill="#d00000" stroke="#00000033" stroke-width="0.6" stroke-linejoin="round"/></g>
|
||||
<g transform="translate(456 54) rotate(12)">
|
||||
<ellipse cx="0" cy="4" rx="6.5" ry="8" fill="#b5651d" stroke="#7f4512" stroke-width="1.2"/>
|
||||
<path d="M-8 -1 Q0 -9 8 -1 Z" fill="#7f4512"/>
|
||||
<path d="M0 -6 L1 -10" stroke="#7f4512" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.9 KiB |
@@ -0,0 +1,38 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Thingport's birthday</title>
|
||||
<style>
|
||||
.fall { animation: fall linear infinite; transform-box: fill-box; transform-origin: center; }
|
||||
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(160px) rotate(540deg); opacity: 0; } }
|
||||
|
||||
.sway { transform-origin: 0 0; animation: sway 3s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
|
||||
.flame { transform-origin: 0 4px; animation: flicker 0.5s ease-in-out infinite alternate; }
|
||||
@keyframes flicker { from { transform: scale(1, 1) rotate(-4deg); } to { transform: scale(0.85, 1.15) rotate(4deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall, .rise { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(50 20) rotate(10)"><g class="sway">
|
||||
<path d="M-17 0 L0 -44 L17 0 Q0 6 -17 0 Z" fill="#3a86ff" stroke="#2563c9" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M-12.5 -11 L12.5 -11 M-8 -23 L8 -23 M-4 -34 L4 -34" stroke="#ffc300" stroke-width="3.5" stroke-linecap="round"/>
|
||||
<circle cx="0" cy="-46" r="5.5" fill="#ff3d8b" stroke="#d61f6c" stroke-width="1.2"/>
|
||||
</g></g>
|
||||
<rect x="426" y="52" width="58" height="24" rx="4" fill="#f4a6c0" stroke="#d97a9c" stroke-width="1.6"/>
|
||||
<rect x="436" y="36" width="38" height="17" rx="3" fill="#f4a6c0" stroke="#d97a9c" stroke-width="1.6"/>
|
||||
<path d="M426 56 Q431 62 436 56 Q441 62 446 56 Q451 62 455 56 Q460 62 465 56 Q470 62 475 56 Q480 62 484 56 L484 54 Q484 52 482 52 L428 52 Q426 52 426 54 Z" fill="#ffffff"/>
|
||||
<path d="M436 40 Q441 45 446 40 Q451 45 455 40 Q460 45 465 40 Q470 45 474 40 L474 38 Q474 36 472 36 L438 36 Q436 36 436 38 Z" fill="#ffffff"/>
|
||||
<circle cx="436" cy="66" r="2" fill="#ffc300"/><circle cx="448" cy="68" r="2" fill="#00b4ff"/><circle cx="462" cy="66" r="2" fill="#00b800"/><circle cx="474" cy="68" r="2" fill="#ffc300"/>
|
||||
<rect x="453" y="22" width="4.5" height="14" rx="1" fill="#ffffff" stroke="#9aa4ae" stroke-width="1"/>
|
||||
<path d="M453 26 l4.5 -2 M453 31 l4.5 -2" stroke="#ff3d8b" stroke-width="1.2"/>
|
||||
<g transform="translate(455.2 14)"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g>
|
||||
<rect class="fall" x="-15" y="-42" width="5" height="3" rx="0.8" fill="#ffc300" style="animation-duration:5.5s;animation-delay:-1s"/>
|
||||
<rect class="fall" x="30" y="-42" width="5" height="3" rx="0.8" fill="#ff3d8b" style="animation-duration:6.2s;animation-delay:-3.2s"/>
|
||||
<rect class="fall" x="75" y="-42" width="5" height="3" rx="0.8" fill="#00b4ff" style="animation-duration:5.1s;animation-delay:-0.4s"/>
|
||||
<rect class="fall" x="120" y="-42" width="5" height="3" rx="0.8" fill="#00b800" style="animation-duration:6.8s;animation-delay:-4.6s"/>
|
||||
<rect class="fall" x="165" y="-42" width="5" height="3" rx="0.8" fill="#ffc300" style="animation-duration:5.7s;animation-delay:-2.2s"/>
|
||||
<rect class="fall" x="210" y="-42" width="5" height="3" rx="0.8" fill="#ff3d8b" style="animation-duration:6.4s;animation-delay:-5.0s"/>
|
||||
<rect class="fall" x="255" y="-42" width="5" height="3" rx="0.8" fill="#00b4ff" style="animation-duration:5.3s;animation-delay:-1.6s"/>
|
||||
<rect class="fall" x="300" y="-42" width="5" height="3" rx="0.8" fill="#00b800" style="animation-duration:6.0s;animation-delay:-3.8s"/>
|
||||
<rect class="fall" x="345" y="-42" width="5" height="3" rx="0.8" fill="#ffc300" style="animation-duration:5.8s;animation-delay:-2.8s"/>
|
||||
<rect class="fall" x="390" y="-42" width="5" height="3" rx="0.8" fill="#ff3d8b" style="animation-duration:6.6s;animation-delay:-0.9s"/>
|
||||
<rect class="fall" x="430" y="-42" width="5" height="3" rx="0.8" fill="#00b4ff" style="animation-duration:5.4s;animation-delay:-4.1s"/>
|
||||
<rect class="fall" x="475" y="-42" width="5" height="3" rx="0.8" fill="#00b800" style="animation-duration:6.1s;animation-delay:-2.5s"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,71 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Christmas</title>
|
||||
<style>
|
||||
.fall { fill: #a9d4f5; animation: fall linear infinite; }
|
||||
@keyframes fall { 0% { transform: translateY(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(160px); opacity: 0; } }
|
||||
.sway { transform-origin: 0 0; animation: sway 3.2s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
|
||||
.star { transform-origin: 0 0; animation: twinkle 1.8s ease-in-out infinite; }
|
||||
@keyframes twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
|
||||
.bulb { animation: blink 1.4s steps(1) infinite; }
|
||||
@keyframes blink { 50% { opacity: 0.25; } }
|
||||
.wave { transform-origin: 0 0; animation: wave 2.6s ease-in-out infinite; }
|
||||
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70%, 90% { transform: rotate(-22deg); } 80% { transform: rotate(6deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<!-- Santa hat on the mark's top corner -->
|
||||
<g transform="translate(50 19) rotate(-8)">
|
||||
<g class="sway">
|
||||
<path d="M-19 -4 C-15 -30 6 -44 30 -34 C21 -29 15 -18 19 -4 Z" fill="#d62828" stroke="#a61b1b" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<rect x="-23" y="-8" width="46" height="12" rx="6" fill="#ffffff" stroke="#c9d3dc" stroke-width="1.6"/>
|
||||
<circle cx="31" cy="-34" r="7" fill="#ffffff" stroke="#c9d3dc" stroke-width="1.6"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Tree -->
|
||||
<rect x="435" y="60" width="10" height="13" rx="1.5" fill="#8d5a2b"/>
|
||||
<path d="M440 4 L454 27 L426 27 Z M440 15 L459 43 L421 43 Z M440 29 L465 62 L415 62 Z" fill="#1f9d48" stroke="#157a37" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<circle class="bulb" cx="436" cy="20" r="2.6" fill="#e63946" style="animation-delay:0s"/>
|
||||
<circle class="bulb" cx="446" cy="25" r="2.6" fill="#ffc300" style="animation-delay:-0.4s"/>
|
||||
<circle class="bulb" cx="431" cy="37" r="2.6" fill="#3a86ff" style="animation-delay:-0.8s"/>
|
||||
<circle class="bulb" cx="447" cy="40" r="2.6" fill="#e63946" style="animation-delay:-0.2s"/>
|
||||
<circle class="bulb" cx="440" cy="33" r="2.6" fill="#ffc300" style="animation-delay:-0.6s"/>
|
||||
<circle class="bulb" cx="426" cy="55" r="2.6" fill="#ffc300" style="animation-delay:-1.0s"/>
|
||||
<circle class="bulb" cx="437" cy="51" r="2.6" fill="#e63946" style="animation-delay:-0.5s"/>
|
||||
<circle class="bulb" cx="452" cy="56" r="2.6" fill="#3a86ff" style="animation-delay:-0.9s"/>
|
||||
<circle class="bulb" cx="458" cy="48" r="2.6" fill="#ffc300" style="animation-delay:-0.3s"/>
|
||||
<g transform="translate(440 3)"><polygon class="star" points="0.00,-7.00 1.76,-2.43 6.66,-2.16 2.85,0.93 4.11,5.66 0.00,3.00 -4.11,5.66 -2.85,0.93 -6.66,-2.16 -1.76,-2.43" fill="#ffc300" stroke="#e0a800" stroke-width="1"/></g>
|
||||
<!-- Snowman -->
|
||||
<g stroke="#7a5230" stroke-width="2.2" stroke-linecap="round">
|
||||
<line x1="469" y1="40" x2="458" y2="31"/>
|
||||
<g transform="translate(487 40)"><line class="wave" x1="0" y1="0" x2="9" y2="-10"/></g>
|
||||
</g>
|
||||
<g fill="#ffffff" stroke="#b8c4cf" stroke-width="1.6">
|
||||
<circle cx="478" cy="62" r="13"/>
|
||||
<circle cx="478" cy="41" r="10"/>
|
||||
<circle cx="478" cy="24" r="8"/>
|
||||
</g>
|
||||
<rect x="469" y="14" width="18" height="3" rx="1" fill="#1f1f1f"/>
|
||||
<rect x="472" y="3" width="12" height="12" rx="1.5" fill="#1f1f1f"/>
|
||||
<rect x="472" y="11" width="12" height="2.5" fill="#d62828"/>
|
||||
<circle cx="475" cy="22" r="1.3" fill="#1f1f1f"/>
|
||||
<circle cx="481" cy="22" r="1.3" fill="#1f1f1f"/>
|
||||
<path d="M478 25 L487 26.5 L478 28 Z" fill="#f77f00"/>
|
||||
<circle cx="478" cy="37" r="1.4" fill="#1f1f1f"/>
|
||||
<circle cx="478" cy="43" r="1.4" fill="#1f1f1f"/>
|
||||
<!-- Snow they stand in -->
|
||||
<ellipse cx="456" cy="75" rx="44" ry="5.5" fill="#ffffff" stroke="#c9d6e2" stroke-width="1.6"/>
|
||||
<circle class="fall" cx="-20" cy="-42" r="3" style="animation-duration:6.5s;animation-delay:0s"/>
|
||||
<circle class="fall" cx="15" cy="-42" r="2.5" style="animation-duration:5.2s;animation-delay:-2.1s"/>
|
||||
<circle class="fall" cx="60" cy="-42" r="3.5" style="animation-duration:7s;animation-delay:-4.3s"/>
|
||||
<circle class="fall" cx="105" cy="-42" r="2.5" style="animation-duration:5.8s;animation-delay:-1.2s"/>
|
||||
<circle class="fall" cx="140" cy="-42" r="3" style="animation-duration:6.2s;animation-delay:-3.6s"/>
|
||||
<circle class="fall" cx="185" cy="-42" r="2.5" style="animation-duration:5.4s;animation-delay:-0.6s"/>
|
||||
<circle class="fall" cx="220" cy="-42" r="3.5" style="animation-duration:7.4s;animation-delay:-5.1s"/>
|
||||
<circle class="fall" cx="262" cy="-42" r="2.5" style="animation-duration:5.9s;animation-delay:-2.7s"/>
|
||||
<circle class="fall" cx="300" cy="-42" r="3" style="animation-duration:6.6s;animation-delay:-4.8s"/>
|
||||
<circle class="fall" cx="338" cy="-42" r="2.5" style="animation-duration:5.1s;animation-delay:-1.8s"/>
|
||||
<circle class="fall" cx="372" cy="-42" r="3.5" style="animation-duration:7.2s;animation-delay:-3.1s"/>
|
||||
<circle class="fall" cx="405" cy="-42" r="2.5" style="animation-duration:5.6s;animation-delay:-0.3s"/>
|
||||
<circle class="fall" cx="440" cy="-42" r="3" style="animation-duration:6.8s;animation-delay:-5.6s"/>
|
||||
<circle class="fall" cx="482" cy="-42" r="2.5" style="animation-duration:5.3s;animation-delay:-2.4s"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>International Coffee Day</title>
|
||||
<style>
|
||||
.steam { animation: steam 2.8s ease-in-out infinite; }
|
||||
@keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: 0.9; } 100% { transform: translateY(-12px); opacity: 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { .steam { opacity: 0.7; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<path class="steam" style="animation-delay:0s" d="M437 36 C431 30 443 24 437 18 C431 12 443 6 437 0" stroke="#9aa4ae" stroke-width="2.6" stroke-linecap="round"/>
|
||||
<path class="steam" style="animation-delay:-0.9s" d="M449 36 C443 30 455 24 449 18 C443 12 455 6 449 0" stroke="#9aa4ae" stroke-width="2.6" stroke-linecap="round"/>
|
||||
<path class="steam" style="animation-delay:-1.8s" d="M461 36 C455 30 467 24 461 18 C455 12 467 6 461 0" stroke="#9aa4ae" stroke-width="2.6" stroke-linecap="round"/>
|
||||
<ellipse cx="452" cy="79" rx="34" ry="5" fill="#e6e9ec" stroke="#9aa4ae" stroke-width="1.6"/>
|
||||
<path d="M476 50 C492 50 492 70 474 70" stroke="#9aa4ae" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M427 42 L477 42 L473 72 Q472 78 466 78 L438 78 Q432 78 431 72 Z" fill="#ffffff" stroke="#9aa4ae" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
<ellipse cx="452" cy="43" rx="24.5" ry="4" fill="#6f4e37" stroke="#9aa4ae" stroke-width="1.4"/>
|
||||
<path d="M452 51 L459 55 L459 63 L452 67 L445 63 L445 55 Z" fill="#00b800"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Diwali</title>
|
||||
<style>
|
||||
.flame { transform-origin: 0 4px; animation: flicker 0.5s ease-in-out infinite alternate; }
|
||||
@keyframes flicker { from { transform: scale(1, 1) rotate(-4deg); } to { transform: scale(0.85, 1.15) rotate(4deg); } }
|
||||
.twinkle { transform-origin: 0 0; animation: twinkle 1.8s ease-in-out infinite; }
|
||||
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.4; } }
|
||||
.bulb { animation: blink 1.4s steps(1) infinite; }
|
||||
@keyframes blink { 50% { opacity: 0.35; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<path d="M-25 -34 Q235 -18 495 -34" stroke="#8f7a5a" stroke-width="1.2"/>
|
||||
<circle class="bulb" style="animation-delay:0.00s" cx="-15" cy="-33.5" r="3" fill="#ffc300"/><circle class="bulb" style="animation-delay:-0.35s" cx="17" cy="-32.0" r="3" fill="#ff8c00"/><circle class="bulb" style="animation-delay:-0.70s" cx="49" cy="-30.5" r="3" fill="#ff3d8b"/><circle class="bulb" style="animation-delay:-1.05s" cx="81" cy="-29.2" r="3" fill="#ffd23f"/><circle class="bulb" style="animation-delay:0.00s" cx="113" cy="-28.1" r="3" fill="#ffc300"/><circle class="bulb" style="animation-delay:-0.35s" cx="145" cy="-27.2" r="3" fill="#ff8c00"/><circle class="bulb" style="animation-delay:-0.70s" cx="177" cy="-26.5" r="3" fill="#ff3d8b"/><circle class="bulb" style="animation-delay:-1.05s" cx="209" cy="-26.1" r="3" fill="#ffd23f"/><circle class="bulb" style="animation-delay:0.00s" cx="241" cy="-26.0" r="3" fill="#ffc300"/><circle class="bulb" style="animation-delay:-0.35s" cx="273" cy="-26.2" r="3" fill="#ff8c00"/><circle class="bulb" style="animation-delay:-0.70s" cx="305" cy="-26.7" r="3" fill="#ff3d8b"/><circle class="bulb" style="animation-delay:-1.05s" cx="337" cy="-27.5" r="3" fill="#ffd23f"/><circle class="bulb" style="animation-delay:0.00s" cx="369" cy="-28.5" r="3" fill="#ffc300"/><circle class="bulb" style="animation-delay:-0.35s" cx="401" cy="-29.7" r="3" fill="#ff8c00"/><circle class="bulb" style="animation-delay:-0.70s" cx="433" cy="-31.1" r="3" fill="#ff3d8b"/><circle class="bulb" style="animation-delay:-1.05s" cx="465" cy="-32.6" r="3" fill="#ffd23f"/>
|
||||
<g transform="translate(423 68) scale(1.2)">
|
||||
<path d="M-13 0 Q0 15 13 0 Q6 -2 0 -1 Q-6 -2 -13 0 Z" fill="#d4691f" stroke="#8f4512" stroke-width="1.4" stroke-linejoin="round"/>
|
||||
<path d="M-7 4 L-4 6 M-1 6.5 L2 6.5 M5 5.5 L8 3.5" stroke="#ffd23f" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<g transform="translate(0 -5)" style="animation-delay:0s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g>
|
||||
</g>
|
||||
<g transform="translate(455 68) scale(1.4)">
|
||||
<path d="M-13 0 Q0 15 13 0 Q6 -2 0 -1 Q-6 -2 -13 0 Z" fill="#d4691f" stroke="#8f4512" stroke-width="1.4" stroke-linejoin="round"/>
|
||||
<path d="M-7 4 L-4 6 M-1 6.5 L2 6.5 M5 5.5 L8 3.5" stroke="#ffd23f" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<g transform="translate(0 -5)" style="animation-delay:-0.2s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g>
|
||||
</g>
|
||||
<g transform="translate(487 68) scale(1.2)">
|
||||
<path d="M-13 0 Q0 15 13 0 Q6 -2 0 -1 Q-6 -2 -13 0 Z" fill="#d4691f" stroke="#8f4512" stroke-width="1.4" stroke-linejoin="round"/>
|
||||
<path d="M-7 4 L-4 6 M-1 6.5 L2 6.5 M5 5.5 L8 3.5" stroke="#ffd23f" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<g transform="translate(0 -5)" style="animation-delay:-0.35s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g>
|
||||
</g>
|
||||
<g transform="translate(440 36)"><path class="twinkle" style="animation-delay:0s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#ffc300"/></g>
|
||||
<g transform="translate(470 30)"><path class="twinkle" style="animation-delay:-0.7s" d="M0 -5 Q0.9 -0.9 5 0 Q0.9 0.9 0 5 Q-0.9 0.9 -5 0 Q-0.9 -0.9 0 -5 Z" fill="#ffc300"/></g>
|
||||
<g transform="translate(455 14)"><path class="twinkle" style="animation-delay:-1.3s" d="M0 -3.5 Q0.6 -0.6 3.5 0 Q0.6 0.6 0 3.5 Q-0.6 0.6 -3.5 0 Q-0.6 -0.6 0 -3.5 Z" fill="#ffc300"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,37 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Easter</title>
|
||||
<style>
|
||||
.twitch { transform-origin: 0 0; animation: twitch 4s ease-in-out infinite; }
|
||||
@keyframes twitch { 0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(-20deg); } 89% { transform: rotate(2deg); } 94% { transform: rotate(-12deg); } }
|
||||
.wobble { transform-origin: 0 0; animation: wobble 2.4s ease-in-out infinite; }
|
||||
@keyframes wobble { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
|
||||
.hop { animation: hop 3s ease-in-out infinite; }
|
||||
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } 90% { transform: translateY(0); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<!-- Bunny ears on the mark's top corner -->
|
||||
<g class="hop">
|
||||
<g transform="translate(41 25) rotate(-16)">
|
||||
<ellipse cx="0" cy="-19" rx="7.5" ry="20" fill="#ffffff" stroke="#c4c4c4" stroke-width="1.6"/>
|
||||
<ellipse cx="0" cy="-18" rx="3.6" ry="14" fill="#f7b6c8"/>
|
||||
</g>
|
||||
<g transform="translate(59 25) rotate(18)"><g class="twitch">
|
||||
<ellipse cx="0" cy="-19" rx="7.5" ry="20" fill="#ffffff" stroke="#c4c4c4" stroke-width="1.6"/>
|
||||
<ellipse cx="0" cy="-18" rx="3.6" ry="14" fill="#f7b6c8"/>
|
||||
</g></g>
|
||||
</g>
|
||||
<!-- Eggs in the grass -->
|
||||
<g transform="translate(428 80) scale(1.0)"><g class="wobble" style="animation-delay:0s">
|
||||
<path d="M0 0 C-13 0 -13 -15 -10.5 -21 C-7.5 -31 7.5 -31 10.5 -21 C13 -15 13 0 0 0 Z" fill="#ffd166" stroke="#d9a93a" stroke-width="1.5"/>
|
||||
<polyline points="-10.5,-12 -7,-16 -3.5,-12 0,-16 3.5,-12 7,-16 10.5,-12" stroke="#ef476f" stroke-width="2" stroke-linejoin="round" fill="none"/>
|
||||
</g></g>
|
||||
<g transform="translate(454 80) scale(1.15)"><g class="wobble" style="animation-delay:-0.8s">
|
||||
<path d="M0 0 C-13 0 -13 -15 -10.5 -21 C-7.5 -31 7.5 -31 10.5 -21 C13 -15 13 0 0 0 Z" fill="#9bdcf5" stroke="#5fb3d6" stroke-width="1.5"/>
|
||||
<circle cx="-5" cy="-20" r="1.6" fill="#3a86ff"/><circle cx="0" cy="-23" r="1.6" fill="#3a86ff"/><circle cx="5" cy="-20" r="1.6" fill="#3a86ff"/><circle cx="-6" cy="-8" r="1.6" fill="#3a86ff"/><circle cx="0" cy="-6" r="1.6" fill="#3a86ff"/><circle cx="6" cy="-8" r="1.6" fill="#3a86ff"/>
|
||||
</g></g>
|
||||
<g transform="translate(480 80) scale(1.0)"><g class="wobble" style="animation-delay:-1.6s">
|
||||
<path d="M0 0 C-13 0 -13 -15 -10.5 -21 C-7.5 -31 7.5 -31 10.5 -21 C13 -15 13 0 0 0 Z" fill="#c9adf7" stroke="#9a7ad6" stroke-width="1.5"/>
|
||||
<polyline points="-10.5,-12 -7,-16 -3.5,-12 0,-16 3.5,-12 7,-16 10.5,-12" stroke="#ffd166" stroke-width="2" stroke-linejoin="round" fill="none"/>
|
||||
</g></g>
|
||||
<path d="M410 84 L412 72 L414 84 L416 76 L418 84 L420 74 L422 84 L424 72 L426 84 L428 76 L430 84 L432 74 L434 84 L436 72 L438 84 L440 76 L442 84 L444 74 L446 84 L448 72 L450 84 L452 76 L454 84 L456 74 L458 84 L460 72 L462 84 L464 76 L466 84 L468 74 L470 84 L472 72 L474 84 L476 76 L478 84 L480 74 L482 84 L484 72 L486 84 L488 76 L490 84 L492 74 L494 84 L496 72 L498 84 Z" fill="#5cb85c" stroke="#3f9a3f" stroke-width="1" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Halloween</title>
|
||||
<style>
|
||||
.fly { animation: fly 9s linear infinite; }
|
||||
@keyframes fly { 0% { transform: translate(-40px, 0); } 25% { transform: translate(100px, -8px); } 50% { transform: translate(240px, 4px); } 75% { transform: translate(380px, -6px); } 100% { transform: translate(540px, 0); } }
|
||||
.flap { transform-origin: 0 0; animation: flap 0.35s ease-in-out infinite alternate; }
|
||||
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
|
||||
.drop { animation: drop 4.5s ease-in-out infinite; }
|
||||
@keyframes drop { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(16px); } }
|
||||
.glow { animation: glow 2.2s steps(1) infinite; }
|
||||
@keyframes glow { 30% { opacity: 0.55; } 34% { opacity: 1; } 70% { opacity: 0.75; } 74% { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) { .fly { display: none; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall, .rise { display: none; } }
|
||||
</style>
|
||||
<g fill="#2b2b3a" stroke="#8a8aa0" stroke-width="0.8" stroke-linejoin="round">
|
||||
<g class="fly" style="animation-delay:0s"><g transform="translate(0 -26) scale(1.0)"><g class="flap"><path d="M0 0 C-5 -7 -13 -8 -20 -4 C-16 -1 -15 3 -13 5 C-10 2 -6 2 0 3 Z"/><path d="M0 0 C-5 -7 -13 -8 -20 -4 C-16 -1 -15 3 -13 5 C-10 2 -6 2 0 3 Z" transform="scale(-1 1)"/></g><ellipse cx="0" cy="1" rx="3.2" ry="4.5"/><path d="M-2.5 -2.5 L-2.5 -6.5 L-0.8 -3.5 Z M2.5 -2.5 L2.5 -6.5 L0.8 -3.5 Z"/></g></g>
|
||||
<g class="fly" style="animation-delay:-4.5s"><g transform="translate(0 -12) scale(0.75)"><g class="flap"><path d="M0 0 C-5 -7 -13 -8 -20 -4 C-16 -1 -15 3 -13 5 C-10 2 -6 2 0 3 Z"/><path d="M0 0 C-5 -7 -13 -8 -20 -4 C-16 -1 -15 3 -13 5 C-10 2 -6 2 0 3 Z" transform="scale(-1 1)"/></g><ellipse cx="0" cy="1" rx="3.2" ry="4.5"/><path d="M-2.5 -2.5 L-2.5 -6.5 L-0.8 -3.5 Z M2.5 -2.5 L2.5 -6.5 L0.8 -3.5 Z"/></g></g>
|
||||
</g>
|
||||
<g transform="translate(90 -2)"><g class="drop">
|
||||
<line x1="0" y1="-120" x2="0" y2="0" stroke="#9aa4ae" stroke-width="1"/>
|
||||
<g stroke="#2b2b3a" stroke-width="1.3" fill="none" stroke-linecap="round"><path d="M-3 -3 Q-9 -8 -12 0"/><path d="M-3 -1 Q-9 -6 -12 2"/><path d="M-3 1 Q-9 -4 -12 4"/><path d="M-3 3 Q-9 -2 -12 6"/><path d="M3 -3 Q9 -8 12 0"/><path d="M3 -1 Q9 -6 12 2"/><path d="M3 1 Q9 -4 12 4"/><path d="M3 3 Q9 -2 12 6"/></g>
|
||||
<ellipse cx="0" cy="2" rx="4.5" ry="5.5" fill="#2b2b3a" stroke="#8a8aa0" stroke-width="0.8"/>
|
||||
<circle cx="-1.6" cy="0.5" r="1" fill="#ff3b3b"/><circle cx="1.6" cy="0.5" r="1" fill="#ff3b3b"/>
|
||||
</g></g>
|
||||
<rect x="452" y="34" width="6" height="10" rx="2" fill="#4a7c2a"/>
|
||||
<g fill="#f77f00" stroke="#c25e00" stroke-width="1.6">
|
||||
<ellipse cx="443" cy="60" rx="14" ry="17"/><ellipse cx="467" cy="60" rx="14" ry="17"/><ellipse cx="455" cy="60" rx="15" ry="18"/>
|
||||
</g>
|
||||
<g class="glow" fill="#ffd23f">
|
||||
<path d="M444 52 L449 60 L439 60 Z M466 52 L471 60 L461 60 Z"/>
|
||||
<path d="M441 66 L446 70 L450 66 L455 71 L460 66 L464 70 L469 66 L466 73 Q455 79 444 73 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,34 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Hanukkah</title>
|
||||
<style>
|
||||
.flame { transform-origin: 0 4px; animation: flicker 0.5s ease-in-out infinite alternate; }
|
||||
@keyframes flicker { from { transform: scale(1, 1) rotate(-4deg); } to { transform: scale(0.85, 1.15) rotate(4deg); } }
|
||||
.twinkle { transform-origin: 0 0; animation: twinkle 1.8s ease-in-out infinite; }
|
||||
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.4; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g stroke="#d9a400" stroke-width="2.4" fill="none" stroke-linecap="round"><path d="M447 33 C447 53 463 53 463 33"/><path d="M439 33 C439 54 471 54 471 33"/><path d="M431 33 C431 55 479 55 479 33"/><path d="M423 33 C423 56 487 56 487 33"/><path d="M455 27 L455 72"/></g>
|
||||
<rect x="419.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="427.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="435.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="443.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="451.5" y="22" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="459.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="467.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="475.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<rect x="483.5" y="30" width="7" height="3" rx="1" fill="#d9a400"/>
|
||||
<path d="M440 78 L470 78 L464 71 L446 71 Z" fill="#d9a400"/>
|
||||
<rect x="421" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(423 15)" style="animation-delay:0.00s"><g class="flame" style="animation-delay:0.00s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="429" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(431 15)" style="animation-delay:-0.17s"><g class="flame" style="animation-delay:-0.17s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="437" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(439 15)" style="animation-delay:-0.34s"><g class="flame" style="animation-delay:-0.34s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="445" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(447 15)" style="animation-delay:0.00s"><g class="flame" style="animation-delay:0.00s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="453" y="12" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(455 7)" style="animation-delay:-0.17s"><g class="flame" style="animation-delay:-0.17s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="461" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(463 15)" style="animation-delay:-0.34s"><g class="flame" style="animation-delay:-0.34s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="469" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(471 15)" style="animation-delay:0.00s"><g class="flame" style="animation-delay:0.00s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="477" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(479 15)" style="animation-delay:-0.17s"><g class="flame" style="animation-delay:-0.17s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<rect x="485" y="20" width="4" height="12" rx="1" fill="#5aa9ff" stroke="#2f6fbf" stroke-width="0.8"/><g transform="translate(487 15)" style="animation-delay:-0.34s"><g class="flame" style="animation-delay:-0.34s"><path class="flame" d="M0 -6 C3 -2 3.5 2 0 4 C-3.5 2 -3 -2 0 -6 Z" fill="#ffb703" stroke="#f77f00" stroke-width="0.8"/></g></g>
|
||||
<g transform="translate(120 -28)"><path class="twinkle" style="animation-delay:0s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#5aa9ff"/></g>
|
||||
<g transform="translate(230 -36)"><path class="twinkle" style="animation-delay:-0.8s" d="M0 -3.5 Q0.6 -0.6 3.5 0 Q0.6 0.6 0 3.5 Q-0.6 0.6 -3.5 0 Q-0.6 -0.6 0 -3.5 Z" fill="#5aa9ff"/></g>
|
||||
<g transform="translate(340 -26)"><path class="twinkle" style="animation-delay:-1.4s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#5aa9ff"/></g>
|
||||
<g transform="translate(-14 24)"><path class="twinkle" style="animation-delay:-0.5s" d="M0 -3.5 Q0.6 -0.6 3.5 0 Q0.6 0.6 0 3.5 Q-0.6 0.6 -3.5 0 Q-0.6 -0.6 0 -3.5 Z" fill="#5aa9ff"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Holi</title>
|
||||
<style>
|
||||
.puff { transform-origin: 0 0; animation: puff 3s ease-out infinite; }
|
||||
@keyframes puff { 0% { transform: scale(0.2); opacity: 0; } 20% { opacity: 1; } 70% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<defs><radialGradient id="g0"><stop offset="0" stop-color="#ff3d8b" stop-opacity="0.95"/><stop offset="0.6" stop-color="#ff3d8b" stop-opacity="0.55"/><stop offset="1" stop-color="#ff3d8b" stop-opacity="0"/></radialGradient><radialGradient id="g1"><stop offset="0" stop-color="#ffc300" stop-opacity="0.95"/><stop offset="0.6" stop-color="#ffc300" stop-opacity="0.55"/><stop offset="1" stop-color="#ffc300" stop-opacity="0"/></radialGradient><radialGradient id="g2"><stop offset="0" stop-color="#00b4ff" stop-opacity="0.95"/><stop offset="0.6" stop-color="#00b4ff" stop-opacity="0.55"/><stop offset="1" stop-color="#00b4ff" stop-opacity="0"/></radialGradient><radialGradient id="g3"><stop offset="0" stop-color="#00c853" stop-opacity="0.95"/><stop offset="0.6" stop-color="#00c853" stop-opacity="0.55"/><stop offset="1" stop-color="#00c853" stop-opacity="0"/></radialGradient><radialGradient id="g4"><stop offset="0" stop-color="#9b5de5" stop-opacity="0.95"/><stop offset="0.6" stop-color="#9b5de5" stop-opacity="0.55"/><stop offset="1" stop-color="#9b5de5" stop-opacity="0"/></radialGradient><radialGradient id="g5"><stop offset="0" stop-color="#ff8c00" stop-opacity="0.95"/><stop offset="0.6" stop-color="#ff8c00" stop-opacity="0.55"/><stop offset="1" stop-color="#ff8c00" stop-opacity="0"/></radialGradient></defs>
|
||||
<g transform="translate(10 10)"><circle class="puff" style="animation-delay:0s" r="22" fill="url(#g0)"/></g>
|
||||
<g transform="translate(88 -18)"><circle class="puff" style="animation-delay:-0.7s" r="18" fill="url(#g1)"/></g>
|
||||
<g transform="translate(170 -26)"><circle class="puff" style="animation-delay:-1.5s" r="20" fill="url(#g2)"/></g>
|
||||
<g transform="translate(250 -20)"><circle class="puff" style="animation-delay:-2.2s" r="17" fill="url(#g3)"/></g>
|
||||
<g transform="translate(330 -28)"><circle class="puff" style="animation-delay:-0.4s" r="19" fill="url(#g4)"/></g>
|
||||
<g transform="translate(420 -6)"><circle class="puff" style="animation-delay:-1.2s" r="22" fill="url(#g5)"/></g>
|
||||
<g transform="translate(470 40)"><circle class="puff" style="animation-delay:-1.9s" r="20" fill="url(#g0)"/></g>
|
||||
<g transform="translate(430 74)"><circle class="puff" style="animation-delay:-2.6s" r="17" fill="url(#g2)"/></g>
|
||||
<g transform="translate(-10 72)"><circle class="puff" style="animation-delay:-1.0s" r="16" fill="url(#g3)"/></g>
|
||||
<circle cx="34" cy="36" r="3" fill="#ff3d8b" opacity="0.9"/>
|
||||
<circle cx="62" cy="30" r="2.5" fill="#ffc300" opacity="0.9"/>
|
||||
<circle cx="44" cy="62" r="2.2" fill="#00b4ff" opacity="0.9"/>
|
||||
<circle cx="68" cy="56" r="3" fill="#00c853" opacity="0.9"/>
|
||||
<circle cx="52" cy="46" r="1.8" fill="#9b5de5" opacity="0.9"/>
|
||||
<circle cx="28" cy="52" r="2" fill="#ff8c00" opacity="0.9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,38 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Joninės</title>
|
||||
<style>
|
||||
.twinkle { transform-origin: 0 0; animation: twinkle 1.8s ease-in-out infinite; }
|
||||
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.4; } }
|
||||
.glow { transform-origin: 0 0; animation: glow 2.4s ease-in-out infinite; }
|
||||
@keyframes glow { 0%, 100% { transform: scale(0.85); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
|
||||
.sway { transform-origin: 0 0; animation: sway 4s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
|
||||
.firefly { animation: firefly ease-in-out infinite; }
|
||||
@keyframes firefly { 0%, 100% { transform: translate(0, 0); opacity: 0.2; } 30% { opacity: 1; } 50% { transform: translate(10px, -8px); opacity: 0.9; } 70% { opacity: 0.3; } 85% { transform: translate(-6px, 4px); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
|
||||
</style>
|
||||
<defs><radialGradient id="aura"><stop offset="0" stop-color="#fff3a0" stop-opacity="1"/><stop offset="0.45" stop-color="#ffc300" stop-opacity="0.6"/><stop offset="1" stop-color="#ff8c00" stop-opacity="0"/></radialGradient></defs>
|
||||
<path d="M23 26 Q50 12 77 26" stroke="#43a047" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M23 26 Q50 12 77 26" stroke="#2f7d32" stroke-width="1" stroke-dasharray="3 4" stroke-linecap="round"/>
|
||||
<g transform="translate(24.0 24.0)"><circle cx="2.4" cy="0.0" r="2" fill="#ffffff"/><circle cx="0.7" cy="2.3" r="2" fill="#ffffff"/><circle cx="-1.9" cy="1.4" r="2" fill="#ffffff"/><circle cx="-1.9" cy="-1.4" r="2" fill="#ffffff"/><circle cx="0.7" cy="-2.3" r="2" fill="#ffffff"/><circle r="1.4" fill="#ffc300"/></g><g transform="translate(27.5 20.5)"><circle cx="2.4" cy="0.0" r="2" fill="#7b6cf6"/><circle cx="0.7" cy="2.3" r="2" fill="#7b6cf6"/><circle cx="-1.9" cy="1.4" r="2" fill="#7b6cf6"/><circle cx="-1.9" cy="-1.4" r="2" fill="#7b6cf6"/><circle cx="0.7" cy="-2.3" r="2" fill="#7b6cf6"/><circle r="1.4" fill="#ffc300"/></g><g transform="translate(37.0 17.9)"><circle cx="2.4" cy="0.0" r="2" fill="#ff6fa5"/><circle cx="0.7" cy="2.3" r="2" fill="#ff6fa5"/><circle cx="-1.9" cy="1.4" r="2" fill="#ff6fa5"/><circle cx="-1.9" cy="-1.4" r="2" fill="#ff6fa5"/><circle cx="0.7" cy="-2.3" r="2" fill="#ff6fa5"/><circle r="1.4" fill="#ffc300"/></g><g transform="translate(50.0 17.0)"><circle cx="2.4" cy="0.0" r="2" fill="#ffffff"/><circle cx="0.7" cy="2.3" r="2" fill="#ffffff"/><circle cx="-1.9" cy="1.4" r="2" fill="#ffffff"/><circle cx="-1.9" cy="-1.4" r="2" fill="#ffffff"/><circle cx="0.7" cy="-2.3" r="2" fill="#ffffff"/><circle r="1.4" fill="#ffc300"/></g><g transform="translate(63.0 17.9)"><circle cx="2.4" cy="0.0" r="2" fill="#ffd23f"/><circle cx="0.7" cy="2.3" r="2" fill="#ffd23f"/><circle cx="-1.9" cy="1.4" r="2" fill="#ffd23f"/><circle cx="-1.9" cy="-1.4" r="2" fill="#ffd23f"/><circle cx="0.7" cy="-2.3" r="2" fill="#ffd23f"/><circle r="1.4" fill="#ffc300"/></g><g transform="translate(72.5 20.5)"><circle cx="2.4" cy="0.0" r="2" fill="#7b6cf6"/><circle cx="0.7" cy="2.3" r="2" fill="#7b6cf6"/><circle cx="-1.9" cy="1.4" r="2" fill="#7b6cf6"/><circle cx="-1.9" cy="-1.4" r="2" fill="#7b6cf6"/><circle cx="0.7" cy="-2.3" r="2" fill="#7b6cf6"/><circle r="1.4" fill="#ffc300"/></g><g transform="translate(76.0 24.0)"><circle cx="2.4" cy="0.0" r="2" fill="#ff6fa5"/><circle cx="0.7" cy="2.3" r="2" fill="#ff6fa5"/><circle cx="-1.9" cy="1.4" r="2" fill="#ff6fa5"/><circle cx="-1.9" cy="-1.4" r="2" fill="#ff6fa5"/><circle cx="0.7" cy="-2.3" r="2" fill="#ff6fa5"/><circle r="1.4" fill="#ffc300"/></g>
|
||||
<g transform="translate(456 82)"><g class="sway">
|
||||
<path d="M0 0 Q-6 -20.0 -26 -40" stroke="#2f7d32" stroke-width="1.8" fill="none"/><g fill="#43a047" stroke="#2f7d32" stroke-width="0.6"><ellipse cx="-7.3" cy="-6.9" rx="5.9" ry="2.2" transform="rotate(25 -7.3 -6.9)"/><ellipse cx="3.3" cy="-6.9" rx="5.9" ry="2.2" transform="rotate(-25 3.3 -6.9)"/><ellipse cx="-9.3" cy="-12.5" rx="5.2" ry="2.0" transform="rotate(25 -9.3 -12.5)"/><ellipse cx="0.1" cy="-12.5" rx="5.2" ry="2.0" transform="rotate(-25 0.1 -12.5)"/><ellipse cx="-11.8" cy="-18.1" rx="4.5" ry="1.7" transform="rotate(25 -11.8 -18.1)"/><ellipse cx="-3.6" cy="-18.1" rx="4.5" ry="1.7" transform="rotate(-25 -3.6 -18.1)"/><ellipse cx="-14.9" cy="-23.6" rx="3.9" ry="1.5" transform="rotate(25 -14.9 -23.6)"/><ellipse cx="-7.9" cy="-23.6" rx="3.9" ry="1.5" transform="rotate(-25 -7.9 -23.6)"/><ellipse cx="-18.6" cy="-29.2" rx="3.2" ry="1.2" transform="rotate(25 -18.6 -29.2)"/><ellipse cx="-12.8" cy="-29.2" rx="3.2" ry="1.2" transform="rotate(-25 -12.8 -29.2)"/><ellipse cx="-22.9" cy="-34.8" rx="2.6" ry="1.0" transform="rotate(25 -22.9 -34.8)"/><ellipse cx="-18.2" cy="-34.8" rx="2.6" ry="1.0" transform="rotate(-25 -18.2 -34.8)"/></g>
|
||||
<path d="M0 0 Q6 -19.0 26 -38" stroke="#2f7d32" stroke-width="1.8" fill="none"/><g fill="#43a047" stroke="#2f7d32" stroke-width="0.6"><ellipse cx="-3.3" cy="-6.6" rx="5.9" ry="2.2" transform="rotate(25 -3.3 -6.6)"/><ellipse cx="7.3" cy="-6.6" rx="5.9" ry="2.2" transform="rotate(-25 7.3 -6.6)"/><ellipse cx="-0.1" cy="-11.9" rx="5.2" ry="2.0" transform="rotate(25 -0.1 -11.9)"/><ellipse cx="9.3" cy="-11.9" rx="5.2" ry="2.0" transform="rotate(-25 9.3 -11.9)"/><ellipse cx="3.6" cy="-17.2" rx="4.5" ry="1.7" transform="rotate(25 3.6 -17.2)"/><ellipse cx="11.8" cy="-17.2" rx="4.5" ry="1.7" transform="rotate(-25 11.8 -17.2)"/><ellipse cx="7.9" cy="-22.5" rx="3.9" ry="1.5" transform="rotate(25 7.9 -22.5)"/><ellipse cx="14.9" cy="-22.5" rx="3.9" ry="1.5" transform="rotate(-25 14.9 -22.5)"/><ellipse cx="12.8" cy="-27.8" rx="3.2" ry="1.2" transform="rotate(25 12.8 -27.8)"/><ellipse cx="18.6" cy="-27.8" rx="3.2" ry="1.2" transform="rotate(-25 18.6 -27.8)"/><ellipse cx="18.2" cy="-33.1" rx="2.6" ry="1.0" transform="rotate(25 18.2 -33.1)"/><ellipse cx="22.9" cy="-33.1" rx="2.6" ry="1.0" transform="rotate(-25 22.9 -33.1)"/></g>
|
||||
<path d="M0 0 Q-4 -26.0 -2 -52" stroke="#2f7d32" stroke-width="1.8" fill="none"/><g fill="#43a047" stroke="#2f7d32" stroke-width="0.6"><ellipse cx="-6.7" cy="-7.8" rx="6.4" ry="2.4" transform="rotate(25 -6.7 -7.8)"/><ellipse cx="4.8" cy="-7.8" rx="6.4" ry="2.4" transform="rotate(-25 4.8 -7.8)"/><ellipse cx="-6.8" cy="-14.2" rx="5.8" ry="2.2" transform="rotate(25 -6.8 -14.2)"/><ellipse cx="3.6" cy="-14.2" rx="5.8" ry="2.2" transform="rotate(-25 3.6 -14.2)"/><ellipse cx="-6.8" cy="-20.5" rx="5.2" ry="2.0" transform="rotate(25 -6.8 -20.5)"/><ellipse cx="2.5" cy="-20.5" rx="5.2" ry="2.0" transform="rotate(-25 2.5 -20.5)"/><ellipse cx="-6.6" cy="-26.9" rx="4.5" ry="1.7" transform="rotate(25 -6.6 -26.9)"/><ellipse cx="1.6" cy="-26.9" rx="4.5" ry="1.7" transform="rotate(-25 1.6 -26.9)"/><ellipse cx="-6.2" cy="-33.3" rx="3.9" ry="1.5" transform="rotate(25 -6.2 -33.3)"/><ellipse cx="0.9" cy="-33.3" rx="3.9" ry="1.5" transform="rotate(-25 0.9 -33.3)"/><ellipse cx="-5.6" cy="-39.7" rx="3.3" ry="1.3" transform="rotate(25 -5.6 -39.7)"/><ellipse cx="0.4" cy="-39.7" rx="3.3" ry="1.3" transform="rotate(-25 0.4 -39.7)"/><ellipse cx="-4.8" cy="-46.0" rx="2.7" ry="1.0" transform="rotate(25 -4.8 -46.0)"/><ellipse cx="0.0" cy="-46.0" rx="2.7" ry="1.0" transform="rotate(-25 0.0 -46.0)"/></g>
|
||||
<g transform="translate(-2 -60) scale(1.5)">
|
||||
<circle class="glow" r="16" fill="url(#aura)"/>
|
||||
<path d="M0 0 C-3 -5 -2 -10 0 -11 C2 -10 3 -5 0 0 Z" transform="rotate(0)" fill="#ff4d1a" stroke="#c22d00" stroke-width="0.7"/><path d="M0 0 C-3 -5 -2 -10 0 -11 C2 -10 3 -5 0 0 Z" transform="rotate(60)" fill="#ff4d1a" stroke="#c22d00" stroke-width="0.7"/><path d="M0 0 C-3 -5 -2 -10 0 -11 C2 -10 3 -5 0 0 Z" transform="rotate(120)" fill="#ff4d1a" stroke="#c22d00" stroke-width="0.7"/><path d="M0 0 C-3 -5 -2 -10 0 -11 C2 -10 3 -5 0 0 Z" transform="rotate(180)" fill="#ff4d1a" stroke="#c22d00" stroke-width="0.7"/><path d="M0 0 C-3 -5 -2 -10 0 -11 C2 -10 3 -5 0 0 Z" transform="rotate(240)" fill="#ff4d1a" stroke="#c22d00" stroke-width="0.7"/><path d="M0 0 C-3 -5 -2 -10 0 -11 C2 -10 3 -5 0 0 Z" transform="rotate(300)" fill="#ff4d1a" stroke="#c22d00" stroke-width="0.7"/>
|
||||
<circle r="3" fill="#ffe14d"/>
|
||||
</g>
|
||||
</g></g>
|
||||
<g transform="translate(430 8)"><path class="twinkle" style="animation-delay:-0.4s" d="M0 -3.5 Q0.6 -0.6 3.5 0 Q0.6 0.6 0 3.5 Q-0.6 0.6 -3.5 0 Q-0.6 -0.6 0 -3.5 Z" fill="#ffd23f"/></g>
|
||||
<g transform="translate(478 4)"><path class="twinkle" style="animation-delay:-1.1s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#ffd23f"/></g>
|
||||
<g transform="translate(486 40)"><path class="twinkle" style="animation-delay:-0.7s" d="M0 -3 Q0.5 -0.5 3 0 Q0.5 0.5 0 3 Q-0.5 0.5 -3 0 Q-0.5 -0.5 0 -3 Z" fill="#ffd23f"/></g>
|
||||
<circle class="firefly" cx="110" cy="-22" r="2.2" fill="#e8ff7a" style="animation-delay:0s;animation-duration:4.2s"/>
|
||||
<circle class="firefly" cx="185" cy="-34" r="2.2" fill="#e8ff7a" style="animation-delay:-1.3s;animation-duration:5s"/>
|
||||
<circle class="firefly" cx="250" cy="-18" r="2.2" fill="#e8ff7a" style="animation-delay:-2.4s;animation-duration:4.6s"/>
|
||||
<circle class="firefly" cx="330" cy="-30" r="2.2" fill="#e8ff7a" style="animation-delay:-0.8s;animation-duration:5.4s"/>
|
||||
<circle class="firefly" cx="395" cy="-14" r="2.2" fill="#e8ff7a" style="animation-delay:-3.1s;animation-duration:4.4s"/>
|
||||
<circle class="firefly" cx="-10" cy="30" r="2.2" fill="#e8ff7a" style="animation-delay:-1.8s;animation-duration:5.2s"/>
|
||||
<circle class="firefly" cx="410" cy="72" r="2.2" fill="#e8ff7a" style="animation-delay:-2.9s;animation-duration:4.8s"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.5 KiB |
@@ -0,0 +1,46 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Lunar New Year</title>
|
||||
<style>
|
||||
.fall { animation: fall linear infinite; transform-box: fill-box; transform-origin: center; }
|
||||
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(160px) rotate(540deg); opacity: 0; } }
|
||||
.sway { transform-origin: 0 0; animation: sway 3.2s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(2 8)"><g class="sway" style="animation-delay:0s"><g transform="scale(0.85)">
|
||||
<line x1="0" y1="-70" x2="0" y2="-12" stroke="#c9a227" stroke-width="1.4"/>
|
||||
<rect x="-6" y="-14" width="12" height="4" rx="1" fill="#e0a800"/>
|
||||
<ellipse cx="0" cy="0" rx="14" ry="11" fill="#e63946" stroke="#b5171d" stroke-width="1.4"/>
|
||||
<path d="M-7 -9.5 Q-10 0 -7 9.5 M0 -11 L0 11 M7 -9.5 Q10 0 7 9.5" stroke="#b5171d" stroke-width="1"/>
|
||||
<rect x="-6" y="10" width="12" height="4" rx="1" fill="#e0a800"/>
|
||||
<path d="M-3 14 L-3 22 M0 14 L0 24 M3 14 L3 22" stroke="#ffc300" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</g></g></g>
|
||||
<g transform="translate(290 -26)"><g class="sway" style="animation-delay:-1.1s"><g transform="scale(0.7)">
|
||||
<line x1="0" y1="-30" x2="0" y2="-12" stroke="#c9a227" stroke-width="1.4"/>
|
||||
<rect x="-6" y="-14" width="12" height="4" rx="1" fill="#e0a800"/>
|
||||
<ellipse cx="0" cy="0" rx="14" ry="11" fill="#e63946" stroke="#b5171d" stroke-width="1.4"/>
|
||||
<path d="M-7 -9.5 Q-10 0 -7 9.5 M0 -11 L0 11 M7 -9.5 Q10 0 7 9.5" stroke="#b5171d" stroke-width="1"/>
|
||||
<rect x="-6" y="10" width="12" height="4" rx="1" fill="#e0a800"/>
|
||||
<path d="M-3 14 L-3 22 M0 14 L0 24 M3 14 L3 22" stroke="#ffc300" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</g></g></g>
|
||||
<g transform="translate(452 24)"><g class="sway" style="animation-delay:-2.0s"><g transform="scale(1.15)">
|
||||
<line x1="0" y1="-70" x2="0" y2="-12" stroke="#c9a227" stroke-width="1.4"/>
|
||||
<rect x="-6" y="-14" width="12" height="4" rx="1" fill="#e0a800"/>
|
||||
<ellipse cx="0" cy="0" rx="14" ry="11" fill="#e63946" stroke="#b5171d" stroke-width="1.4"/>
|
||||
<path d="M-7 -9.5 Q-10 0 -7 9.5 M0 -11 L0 11 M7 -9.5 Q10 0 7 9.5" stroke="#b5171d" stroke-width="1"/>
|
||||
<rect x="-6" y="10" width="12" height="4" rx="1" fill="#e0a800"/>
|
||||
<path d="M-3 14 L-3 22 M0 14 L0 24 M3 14 L3 22" stroke="#ffc300" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</g></g></g>
|
||||
<g transform="translate(-15 -40)"><g class="fall" style="animation-duration:5.5s;animation-delay:-1s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(30 -40)"><g class="fall" style="animation-duration:6.2s;animation-delay:-3.2s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(75 -40)"><g class="fall" style="animation-duration:5.1s;animation-delay:-0.4s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(120 -40)"><g class="fall" style="animation-duration:6.8s;animation-delay:-4.6s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(165 -40)"><g class="fall" style="animation-duration:5.7s;animation-delay:-2.2s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(210 -40)"><g class="fall" style="animation-duration:6.4s;animation-delay:-5.0s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(255 -40)"><g class="fall" style="animation-duration:5.3s;animation-delay:-1.6s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(300 -40)"><g class="fall" style="animation-duration:6.0s;animation-delay:-3.8s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(345 -40)"><g class="fall" style="animation-duration:5.8s;animation-delay:-2.8s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(390 -40)"><g class="fall" style="animation-duration:6.6s;animation-delay:-0.9s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(430 -40)"><g class="fall" style="animation-duration:5.4s;animation-delay:-4.1s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
<g transform="translate(475 -40)"><g class="fall" style="animation-duration:6.1s;animation-delay:-2.5s"><circle r="3.2" fill="#ffd23f" stroke="#c9a227" stroke-width="0.8"/><rect x="-1" y="-1" width="2" height="2" fill="#c9a227"/></g></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
@@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Día de los Muertos</title>
|
||||
<style>
|
||||
.flutter { transform-origin: 13px 0; animation: flutter 2.4s ease-in-out infinite; }
|
||||
@keyframes flutter { 0%, 100% { transform: skewX(0) scaleY(1); } 50% { transform: skewX(-8deg) scaleY(0.92); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<path d="M-30 -40 L500 -40" stroke="#8a8aa0" stroke-width="1.2"/>
|
||||
<g transform="translate(-22 -40)"><path class="flutter" style="animation-delay:0.0s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ff3d8b"/></g>
|
||||
<g transform="translate(12 -40)"><path class="flutter" style="animation-delay:-0.4s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ffc300"/></g>
|
||||
<g transform="translate(46 -40)"><path class="flutter" style="animation-delay:-0.8s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#00b4ff"/></g>
|
||||
<g transform="translate(80 -40)"><path class="flutter" style="animation-delay:-1.2s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#00c853"/></g>
|
||||
<g transform="translate(114 -40)"><path class="flutter" style="animation-delay:-1.6s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#9b5de5"/></g>
|
||||
<g transform="translate(148 -40)"><path class="flutter" style="animation-delay:0.0s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ff8c00"/></g>
|
||||
<g transform="translate(182 -40)"><path class="flutter" style="animation-delay:-0.4s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ff3d8b"/></g>
|
||||
<g transform="translate(216 -40)"><path class="flutter" style="animation-delay:-0.8s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ffc300"/></g>
|
||||
<g transform="translate(250 -40)"><path class="flutter" style="animation-delay:-1.2s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#00b4ff"/></g>
|
||||
<g transform="translate(284 -40)"><path class="flutter" style="animation-delay:-1.6s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#00c853"/></g>
|
||||
<g transform="translate(318 -40)"><path class="flutter" style="animation-delay:0.0s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#9b5de5"/></g>
|
||||
<g transform="translate(352 -40)"><path class="flutter" style="animation-delay:-0.4s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ff8c00"/></g>
|
||||
<g transform="translate(386 -40)"><path class="flutter" style="animation-delay:-0.8s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ff3d8b"/></g>
|
||||
<g transform="translate(420 -40)"><path class="flutter" style="animation-delay:-1.2s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#ffc300"/></g>
|
||||
<g transform="translate(454 -40)"><path class="flutter" style="animation-delay:-1.6s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#00b4ff"/></g>
|
||||
<g transform="translate(488 -40)"><path class="flutter" style="animation-delay:0.0s" d="M0 0 L26 0 L26 15 L22 19 L18 15 L13 19 L8 15 L4 19 L0 15 Z" fill="#00c853"/></g>
|
||||
<path d="M455 22 C470 22 476 33 474 45 C473 52 468 55 466 60 L444 60 C442 55 437 52 436 45 C434 33 440 22 455 22 Z" fill="#ffffff" stroke="#9aa4ae" stroke-width="1.6"/>
|
||||
<rect x="445" y="57" width="20" height="9" rx="3" fill="#ffffff" stroke="#9aa4ae" stroke-width="1.6"/>
|
||||
<path d="M450 58 L450 66 M455 58 L455 66 M460 58 L460 66" stroke="#9aa4ae" stroke-width="1.2"/>
|
||||
<g transform="translate(447 42)"><circle cx="6.5" cy="0.0" r="2.4" fill="#ff3d8b"/><circle cx="3.3" cy="5.6" r="2.4" fill="#ff3d8b"/><circle cx="-3.2" cy="5.6" r="2.4" fill="#ff3d8b"/><circle cx="-6.5" cy="0.0" r="2.4" fill="#ff3d8b"/><circle cx="-3.3" cy="-5.6" r="2.4" fill="#ff3d8b"/><circle cx="3.3" cy="-5.6" r="2.4" fill="#ff3d8b"/><circle r="4.2" fill="#2b2b3a"/></g>
|
||||
<g transform="translate(463 42)"><circle cx="6.5" cy="0.0" r="2.4" fill="#00b4ff"/><circle cx="3.3" cy="5.6" r="2.4" fill="#00b4ff"/><circle cx="-3.2" cy="5.6" r="2.4" fill="#00b4ff"/><circle cx="-6.5" cy="0.0" r="2.4" fill="#00b4ff"/><circle cx="-3.3" cy="-5.6" r="2.4" fill="#00b4ff"/><circle cx="3.3" cy="-5.6" r="2.4" fill="#00b4ff"/><circle r="4.2" fill="#2b2b3a"/></g>
|
||||
<path d="M455 50 L452.5 54 L457.5 54 Z" fill="#2b2b3a"/>
|
||||
<path d="M449 30 Q455 26 461 30" stroke="#9b5de5" stroke-width="1.6" stroke-linecap="round"/>
|
||||
<g transform="translate(430 72) scale(1.0)"><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(0)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(40)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(80)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(120)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(160)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(200)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(240)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(280)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(320)" fill="#ff8c00"/><circle r="3.5" fill="#d9480f"/></g>
|
||||
<g transform="translate(482 70) scale(1.1)"><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(0)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(40)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(80)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(120)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(160)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(200)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(240)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(280)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(320)" fill="#ff8c00"/><circle r="3.5" fill="#d9480f"/></g>
|
||||
<g transform="translate(474 18) scale(0.8)"><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(0)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(40)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(80)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(120)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(160)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(200)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(240)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(280)" fill="#ff8c00"/><ellipse cx="0" cy="-5" rx="3" ry="4.5" transform="rotate(320)" fill="#ff8c00"/><circle r="3.5" fill="#d9480f"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.8 KiB |
@@ -0,0 +1,28 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>New Year</title>
|
||||
<style>
|
||||
.pop { transform-origin: 0 0; animation: pop 2.6s ease-out infinite; }
|
||||
@keyframes pop { 0% { transform: scale(0.1); opacity: 0; } 8% { opacity: 1; } 55% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
|
||||
.fall { animation: fall linear infinite; }
|
||||
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(160px) rotate(540deg); opacity: 0; } }
|
||||
.fall { transform-box: fill-box; transform-origin: center; }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(50 -20) scale(1.0)"><g class="pop" style="animation-delay:0s" stroke="#ffc300" fill="#ffc300" stroke-width="2.4" stroke-linecap="round"><line x1="5.0" y1="0.0" x2="15.0" y2="0.0"/><line x1="5.2" y1="3.0" x2="10.4" y2="6.0"/><line x1="2.5" y1="4.3" x2="7.5" y2="13.0"/><line x1="0.0" y1="6.0" x2="0.0" y2="12.0"/><line x1="-2.5" y1="4.3" x2="-7.5" y2="13.0"/><line x1="-5.2" y1="3.0" x2="-10.4" y2="6.0"/><line x1="-5.0" y1="0.0" x2="-15.0" y2="0.0"/><line x1="-5.2" y1="-3.0" x2="-10.4" y2="-6.0"/><line x1="-2.5" y1="-4.3" x2="-7.5" y2="-13.0"/><line x1="-0.0" y1="-6.0" x2="-0.0" y2="-12.0"/><line x1="2.5" y1="-4.3" x2="7.5" y2="-13.0"/><line x1="5.2" y1="-3.0" x2="10.4" y2="-6.0"/><g stroke="none"><circle cx="18.4" cy="4.9" r="1.6"/><circle cx="13.4" cy="13.4" r="1.6"/><circle cx="4.9" cy="18.4" r="1.6"/><circle cx="-4.9" cy="18.4" r="1.6"/><circle cx="-13.4" cy="13.4" r="1.6"/><circle cx="-18.4" cy="4.9" r="1.6"/><circle cx="-18.4" cy="-4.9" r="1.6"/><circle cx="-13.4" cy="-13.4" r="1.6"/><circle cx="-4.9" cy="-18.4" r="1.6"/><circle cx="4.9" cy="-18.4" r="1.6"/><circle cx="13.4" cy="-13.4" r="1.6"/><circle cx="18.4" cy="-4.9" r="1.6"/></g></g></g>
|
||||
<g transform="translate(165 -24) scale(0.8)"><g class="pop" style="animation-delay:-0.9s" stroke="#ff3d8b" fill="#ff3d8b" stroke-width="2.4" stroke-linecap="round"><line x1="5.0" y1="0.0" x2="15.0" y2="0.0"/><line x1="5.2" y1="3.0" x2="10.4" y2="6.0"/><line x1="2.5" y1="4.3" x2="7.5" y2="13.0"/><line x1="0.0" y1="6.0" x2="0.0" y2="12.0"/><line x1="-2.5" y1="4.3" x2="-7.5" y2="13.0"/><line x1="-5.2" y1="3.0" x2="-10.4" y2="6.0"/><line x1="-5.0" y1="0.0" x2="-15.0" y2="0.0"/><line x1="-5.2" y1="-3.0" x2="-10.4" y2="-6.0"/><line x1="-2.5" y1="-4.3" x2="-7.5" y2="-13.0"/><line x1="-0.0" y1="-6.0" x2="-0.0" y2="-12.0"/><line x1="2.5" y1="-4.3" x2="7.5" y2="-13.0"/><line x1="5.2" y1="-3.0" x2="10.4" y2="-6.0"/><g stroke="none"><circle cx="18.4" cy="4.9" r="1.6"/><circle cx="13.4" cy="13.4" r="1.6"/><circle cx="4.9" cy="18.4" r="1.6"/><circle cx="-4.9" cy="18.4" r="1.6"/><circle cx="-13.4" cy="13.4" r="1.6"/><circle cx="-18.4" cy="4.9" r="1.6"/><circle cx="-18.4" cy="-4.9" r="1.6"/><circle cx="-13.4" cy="-13.4" r="1.6"/><circle cx="-4.9" cy="-18.4" r="1.6"/><circle cx="4.9" cy="-18.4" r="1.6"/><circle cx="13.4" cy="-13.4" r="1.6"/><circle cx="18.4" cy="-4.9" r="1.6"/></g></g></g>
|
||||
<g transform="translate(270 -20) scale(1.0)"><g class="pop" style="animation-delay:-1.7s" stroke="#00b4ff" fill="#00b4ff" stroke-width="2.4" stroke-linecap="round"><line x1="5.0" y1="0.0" x2="15.0" y2="0.0"/><line x1="5.2" y1="3.0" x2="10.4" y2="6.0"/><line x1="2.5" y1="4.3" x2="7.5" y2="13.0"/><line x1="0.0" y1="6.0" x2="0.0" y2="12.0"/><line x1="-2.5" y1="4.3" x2="-7.5" y2="13.0"/><line x1="-5.2" y1="3.0" x2="-10.4" y2="6.0"/><line x1="-5.0" y1="0.0" x2="-15.0" y2="0.0"/><line x1="-5.2" y1="-3.0" x2="-10.4" y2="-6.0"/><line x1="-2.5" y1="-4.3" x2="-7.5" y2="-13.0"/><line x1="-0.0" y1="-6.0" x2="-0.0" y2="-12.0"/><line x1="2.5" y1="-4.3" x2="7.5" y2="-13.0"/><line x1="5.2" y1="-3.0" x2="10.4" y2="-6.0"/><g stroke="none"><circle cx="18.4" cy="4.9" r="1.6"/><circle cx="13.4" cy="13.4" r="1.6"/><circle cx="4.9" cy="18.4" r="1.6"/><circle cx="-4.9" cy="18.4" r="1.6"/><circle cx="-13.4" cy="13.4" r="1.6"/><circle cx="-18.4" cy="4.9" r="1.6"/><circle cx="-18.4" cy="-4.9" r="1.6"/><circle cx="-13.4" cy="-13.4" r="1.6"/><circle cx="-4.9" cy="-18.4" r="1.6"/><circle cx="4.9" cy="-18.4" r="1.6"/><circle cx="13.4" cy="-13.4" r="1.6"/><circle cx="18.4" cy="-4.9" r="1.6"/></g></g></g>
|
||||
<g transform="translate(372 -25) scale(0.75)"><g class="pop" style="animation-delay:-0.4s" stroke="#00b800" fill="#00b800" stroke-width="2.4" stroke-linecap="round"><line x1="5.0" y1="0.0" x2="15.0" y2="0.0"/><line x1="5.2" y1="3.0" x2="10.4" y2="6.0"/><line x1="2.5" y1="4.3" x2="7.5" y2="13.0"/><line x1="0.0" y1="6.0" x2="0.0" y2="12.0"/><line x1="-2.5" y1="4.3" x2="-7.5" y2="13.0"/><line x1="-5.2" y1="3.0" x2="-10.4" y2="6.0"/><line x1="-5.0" y1="0.0" x2="-15.0" y2="0.0"/><line x1="-5.2" y1="-3.0" x2="-10.4" y2="-6.0"/><line x1="-2.5" y1="-4.3" x2="-7.5" y2="-13.0"/><line x1="-0.0" y1="-6.0" x2="-0.0" y2="-12.0"/><line x1="2.5" y1="-4.3" x2="7.5" y2="-13.0"/><line x1="5.2" y1="-3.0" x2="10.4" y2="-6.0"/><g stroke="none"><circle cx="18.4" cy="4.9" r="1.6"/><circle cx="13.4" cy="13.4" r="1.6"/><circle cx="4.9" cy="18.4" r="1.6"/><circle cx="-4.9" cy="18.4" r="1.6"/><circle cx="-13.4" cy="13.4" r="1.6"/><circle cx="-18.4" cy="4.9" r="1.6"/><circle cx="-18.4" cy="-4.9" r="1.6"/><circle cx="-13.4" cy="-13.4" r="1.6"/><circle cx="-4.9" cy="-18.4" r="1.6"/><circle cx="4.9" cy="-18.4" r="1.6"/><circle cx="13.4" cy="-13.4" r="1.6"/><circle cx="18.4" cy="-4.9" r="1.6"/></g></g></g>
|
||||
<g transform="translate(452 8) scale(1.1)"><g class="pop" style="animation-delay:-1.3s" stroke="#ff8c00" fill="#ff8c00" stroke-width="2.4" stroke-linecap="round"><line x1="5.0" y1="0.0" x2="15.0" y2="0.0"/><line x1="5.2" y1="3.0" x2="10.4" y2="6.0"/><line x1="2.5" y1="4.3" x2="7.5" y2="13.0"/><line x1="0.0" y1="6.0" x2="0.0" y2="12.0"/><line x1="-2.5" y1="4.3" x2="-7.5" y2="13.0"/><line x1="-5.2" y1="3.0" x2="-10.4" y2="6.0"/><line x1="-5.0" y1="0.0" x2="-15.0" y2="0.0"/><line x1="-5.2" y1="-3.0" x2="-10.4" y2="-6.0"/><line x1="-2.5" y1="-4.3" x2="-7.5" y2="-13.0"/><line x1="-0.0" y1="-6.0" x2="-0.0" y2="-12.0"/><line x1="2.5" y1="-4.3" x2="7.5" y2="-13.0"/><line x1="5.2" y1="-3.0" x2="10.4" y2="-6.0"/><g stroke="none"><circle cx="18.4" cy="4.9" r="1.6"/><circle cx="13.4" cy="13.4" r="1.6"/><circle cx="4.9" cy="18.4" r="1.6"/><circle cx="-4.9" cy="18.4" r="1.6"/><circle cx="-13.4" cy="13.4" r="1.6"/><circle cx="-18.4" cy="4.9" r="1.6"/><circle cx="-18.4" cy="-4.9" r="1.6"/><circle cx="-13.4" cy="-13.4" r="1.6"/><circle cx="-4.9" cy="-18.4" r="1.6"/><circle cx="4.9" cy="-18.4" r="1.6"/><circle cx="13.4" cy="-13.4" r="1.6"/><circle cx="18.4" cy="-4.9" r="1.6"/></g></g></g>
|
||||
<g transform="translate(458 62) scale(0.75)"><g class="pop" style="animation-delay:-2.1s" stroke="#ff3d8b" fill="#ff3d8b" stroke-width="2.4" stroke-linecap="round"><line x1="5.0" y1="0.0" x2="15.0" y2="0.0"/><line x1="5.2" y1="3.0" x2="10.4" y2="6.0"/><line x1="2.5" y1="4.3" x2="7.5" y2="13.0"/><line x1="0.0" y1="6.0" x2="0.0" y2="12.0"/><line x1="-2.5" y1="4.3" x2="-7.5" y2="13.0"/><line x1="-5.2" y1="3.0" x2="-10.4" y2="6.0"/><line x1="-5.0" y1="0.0" x2="-15.0" y2="0.0"/><line x1="-5.2" y1="-3.0" x2="-10.4" y2="-6.0"/><line x1="-2.5" y1="-4.3" x2="-7.5" y2="-13.0"/><line x1="-0.0" y1="-6.0" x2="-0.0" y2="-12.0"/><line x1="2.5" y1="-4.3" x2="7.5" y2="-13.0"/><line x1="5.2" y1="-3.0" x2="10.4" y2="-6.0"/><g stroke="none"><circle cx="18.4" cy="4.9" r="1.6"/><circle cx="13.4" cy="13.4" r="1.6"/><circle cx="4.9" cy="18.4" r="1.6"/><circle cx="-4.9" cy="18.4" r="1.6"/><circle cx="-13.4" cy="13.4" r="1.6"/><circle cx="-18.4" cy="4.9" r="1.6"/><circle cx="-18.4" cy="-4.9" r="1.6"/><circle cx="-13.4" cy="-13.4" r="1.6"/><circle cx="-4.9" cy="-18.4" r="1.6"/><circle cx="4.9" cy="-18.4" r="1.6"/><circle cx="13.4" cy="-13.4" r="1.6"/><circle cx="18.4" cy="-4.9" r="1.6"/></g></g></g>
|
||||
<g transform="translate(2 70) scale(0.6)"><g class="pop" style="animation-delay:-0.6s" stroke="#00b4ff" fill="#00b4ff" stroke-width="2.4" stroke-linecap="round"><line x1="5.0" y1="0.0" x2="15.0" y2="0.0"/><line x1="5.2" y1="3.0" x2="10.4" y2="6.0"/><line x1="2.5" y1="4.3" x2="7.5" y2="13.0"/><line x1="0.0" y1="6.0" x2="0.0" y2="12.0"/><line x1="-2.5" y1="4.3" x2="-7.5" y2="13.0"/><line x1="-5.2" y1="3.0" x2="-10.4" y2="6.0"/><line x1="-5.0" y1="0.0" x2="-15.0" y2="0.0"/><line x1="-5.2" y1="-3.0" x2="-10.4" y2="-6.0"/><line x1="-2.5" y1="-4.3" x2="-7.5" y2="-13.0"/><line x1="-0.0" y1="-6.0" x2="-0.0" y2="-12.0"/><line x1="2.5" y1="-4.3" x2="7.5" y2="-13.0"/><line x1="5.2" y1="-3.0" x2="10.4" y2="-6.0"/><g stroke="none"><circle cx="18.4" cy="4.9" r="1.6"/><circle cx="13.4" cy="13.4" r="1.6"/><circle cx="4.9" cy="18.4" r="1.6"/><circle cx="-4.9" cy="18.4" r="1.6"/><circle cx="-13.4" cy="13.4" r="1.6"/><circle cx="-18.4" cy="4.9" r="1.6"/><circle cx="-18.4" cy="-4.9" r="1.6"/><circle cx="-13.4" cy="-13.4" r="1.6"/><circle cx="-4.9" cy="-18.4" r="1.6"/><circle cx="4.9" cy="-18.4" r="1.6"/><circle cx="13.4" cy="-13.4" r="1.6"/><circle cx="18.4" cy="-4.9" r="1.6"/></g></g></g>
|
||||
<rect class="fall" x="-10" y="-42" width="5" height="3" rx="0.8" fill="#ffc300" style="animation-duration:5.5s;animation-delay:-1s"/>
|
||||
<rect class="fall" x="40" y="-42" width="5" height="3" rx="0.8" fill="#ff3d8b" style="animation-duration:6.2s;animation-delay:-3.2s"/>
|
||||
<rect class="fall" x="95" y="-42" width="5" height="3" rx="0.8" fill="#00b4ff" style="animation-duration:5.1s;animation-delay:-0.4s"/>
|
||||
<rect class="fall" x="150" y="-42" width="5" height="3" rx="0.8" fill="#00b800" style="animation-duration:6.8s;animation-delay:-4.6s"/>
|
||||
<rect class="fall" x="205" y="-42" width="5" height="3" rx="0.8" fill="#ff8c00" style="animation-duration:5.7s;animation-delay:-2.2s"/>
|
||||
<rect class="fall" x="250" y="-42" width="5" height="3" rx="0.8" fill="#ff3d8b" style="animation-duration:6.4s;animation-delay:-5.0s"/>
|
||||
<rect class="fall" x="310" y="-42" width="5" height="3" rx="0.8" fill="#ffc300" style="animation-duration:5.3s;animation-delay:-1.6s"/>
|
||||
<rect class="fall" x="355" y="-42" width="5" height="3" rx="0.8" fill="#00b4ff" style="animation-duration:6.0s;animation-delay:-3.8s"/>
|
||||
<rect class="fall" x="410" y="-42" width="5" height="3" rx="0.8" fill="#00b800" style="animation-duration:5.8s;animation-delay:-2.8s"/>
|
||||
<rect class="fall" x="470" y="-42" width="5" height="3" rx="0.8" fill="#ff8c00" style="animation-duration:6.6s;animation-delay:-0.9s"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
@@ -0,0 +1,25 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>International Programmers' Day</title>
|
||||
<style>
|
||||
.fall { font: bold 13px ui-monospace, Menlo, Consolas, monospace; fill: #00b800; animation: fall linear infinite; }
|
||||
@keyframes fall { 0% { transform: translateY(0); opacity: 0; } 10%, 80% { opacity: 0.9; } 100% { transform: translateY(160px); opacity: 0; } }
|
||||
.tag { font: bold 30px ui-monospace, Menlo, Consolas, monospace; fill: #00b800; }
|
||||
.cursor { animation: blink 1s steps(1) infinite; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall, .rise { display: none; } }
|
||||
</style>
|
||||
<text class="fall" x="-15" y="-34" style="animation-duration:5.5s;animation-delay:-1s">1</text>
|
||||
<text class="fall" x="30" y="-34" style="animation-duration:6.2s;animation-delay:-3.2s">0</text>
|
||||
<text class="fall" x="75" y="-34" style="animation-duration:5.1s;animation-delay:-0.4s">1</text>
|
||||
<text class="fall" x="120" y="-34" style="animation-duration:6.8s;animation-delay:-4.6s">1</text>
|
||||
<text class="fall" x="165" y="-34" style="animation-duration:5.7s;animation-delay:-2.2s">0</text>
|
||||
<text class="fall" x="210" y="-34" style="animation-duration:6.4s;animation-delay:-5.0s">0</text>
|
||||
<text class="fall" x="255" y="-34" style="animation-duration:5.3s;animation-delay:-1.6s">1</text>
|
||||
<text class="fall" x="300" y="-34" style="animation-duration:6.0s;animation-delay:-3.8s">0</text>
|
||||
<text class="fall" x="345" y="-34" style="animation-duration:5.8s;animation-delay:-2.8s">1</text>
|
||||
<text class="fall" x="390" y="-34" style="animation-duration:6.6s;animation-delay:-0.9s">1</text>
|
||||
<text class="fall" x="430" y="-34" style="animation-duration:5.4s;animation-delay:-4.1s">0</text>
|
||||
<text class="fall" x="475" y="-34" style="animation-duration:6.1s;animation-delay:-2.5s">1</text>
|
||||
<text class="tag" x="414" y="60"></></text>
|
||||
<rect class="cursor" x="472" y="55" width="13" height="4.5" fill="#00b800"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,26 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Ramadan and Eid al-Fitr</title>
|
||||
<style>
|
||||
.twinkle { transform-origin: 0 0; animation: twinkle 1.8s ease-in-out infinite; }
|
||||
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.4; } }
|
||||
.sway { transform-origin: 0 0; animation: sway 3.6s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<defs><mask id="crescent"><rect x="400" y="0" width="100" height="90" fill="#fff"/><circle cx="463" cy="31" r="19" fill="#000"/></mask></defs>
|
||||
<circle cx="452" cy="40" r="23" fill="#ffc94d" stroke="#e0a800" stroke-width="1.6" mask="url(#crescent)"/>
|
||||
<g transform="translate(478 58)"><path class="twinkle" style="animation-delay:0s" d="M0 -6 Q1.1 -1.1 6 0 Q1.1 1.1 0 6 Q-1.1 1.1 -6 0 Q-1.1 -1.1 0 -6 Z" fill="#ffc94d"/></g>
|
||||
<g transform="translate(484 22)"><path class="twinkle" style="animation-delay:-0.6s" d="M0 -4.5 Q0.8 -0.8 4.5 0 Q0.8 0.8 0 4.5 Q-0.8 0.8 -4.5 0 Q-0.8 -0.8 0 -4.5 Z" fill="#ffc94d"/></g>
|
||||
<g transform="translate(422 12)"><path class="twinkle" style="animation-delay:-1.2s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#ffc94d"/></g>
|
||||
<g transform="translate(120 -26)"><path class="twinkle" style="animation-delay:-0.3s" d="M0 -4.5 Q0.8 -0.8 4.5 0 Q0.8 0.8 0 4.5 Q-0.8 0.8 -4.5 0 Q-0.8 -0.8 0 -4.5 Z" fill="#ffc94d"/></g>
|
||||
<g transform="translate(215 -36)"><path class="twinkle" style="animation-delay:-1.0s" d="M0 -3.5 Q0.6 -0.6 3.5 0 Q0.6 0.6 0 3.5 Q-0.6 0.6 -3.5 0 Q-0.6 -0.6 0 -3.5 Z" fill="#ffc94d"/></g>
|
||||
<g transform="translate(372 -30)"><path class="twinkle" style="animation-delay:-1.5s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#ffc94d"/></g>
|
||||
<g transform="translate(-12 20)"><path class="twinkle" style="animation-delay:-0.8s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#ffc94d"/></g>
|
||||
<g transform="translate(300 -45)"><g class="sway">
|
||||
<line x1="0" y1="0" x2="0" y2="14" stroke="#c9a227" stroke-width="1.4"/>
|
||||
<path d="M-7 20 L0 13 L7 20 Z" fill="#e0a800"/>
|
||||
<path d="M-8 20 L8 20 L6 36 L-6 36 Z" fill="#ffe08a" stroke="#c9a227" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M0 20 L0 36 M-4 20 L-3 36 M4 20 L3 36" stroke="#c9a227" stroke-width="1"/>
|
||||
<path d="M-7 36 L7 36 L0 42 Z" fill="#e0a800"/>
|
||||
</g></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,28 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Šaltibarščių diena</title>
|
||||
<style>
|
||||
.twinkle { transform-origin: 0 0; animation: twinkle 1.8s ease-in-out infinite; }
|
||||
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.4; } }
|
||||
.pink { animation: pink 6s ease-in-out infinite; }
|
||||
@keyframes pink { 0%, 15%, 100% { opacity: 0; } 30%, 80% { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) { .pink { opacity: 1; } }
|
||||
.stir { transform-origin: 0 0; animation: stir 2.6s ease-in-out infinite; }
|
||||
@keyframes stir { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
|
||||
</style>
|
||||
<g class="pink" transform="translate(8 8)"><path d="M44.464 39.045Q42 40.468 39.536 39.045L28.164 32.48Q25.7 31.057 28.164 29.635L39.536 23.069Q42 21.646 44.464 23.069L55.836 29.635Q58.3 31.057 55.836 32.48Z" fill="#ff9ccb"/><path d="M38.209 41.343Q40.673 42.766 40.673 45.611L40.673 58.742Q40.673 61.588 38.209 60.165L26.837 53.599Q24.373 52.177 24.373 49.332L24.373 36.2Q24.373 33.355 26.837 34.778Z" fill="#ff5fa2"/><path d="M43.327 45.611Q43.327 42.766 45.791 41.343L57.163 34.778Q59.627 33.355 59.627 36.2L59.627 49.332Q59.627 52.177 57.163 53.599L45.791 60.165Q43.327 61.588 43.327 58.742Z" fill="#e0408a"/></g>
|
||||
<g transform="translate(472 50)"><g class="stir">
|
||||
<path d="M0 0 L16 -34" stroke="#b0b8c0" stroke-width="3.2" stroke-linecap="round"/>
|
||||
<ellipse cx="-1" cy="2" rx="4" ry="6" transform="rotate(25)" fill="#c9d1d8"/>
|
||||
</g></g>
|
||||
<path d="M420 51 L492 51 Q488 80 456 80 Q424 80 420 51 Z" fill="#ffffff" stroke="#9aa4ae" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
<path d="M422.5 62 Q456 70 489.5 62" stroke="#3a86ff" stroke-width="2.2"/>
|
||||
<ellipse cx="456" cy="51" rx="36" ry="6.5" fill="#ff5fa2" stroke="#e0408a" stroke-width="1.4"/>
|
||||
<ellipse cx="442" cy="50" rx="6.5" ry="4.2" fill="#ffffff" stroke="#d9d9d9" stroke-width="0.8"/><circle cx="442" cy="50" r="2.6" fill="#ffc300"/><ellipse cx="463" cy="52" rx="6.5" ry="4.2" fill="#ffffff" stroke="#d9d9d9" stroke-width="0.8"/><circle cx="463" cy="52" r="2.6" fill="#ffc300"/>
|
||||
<circle cx="452" cy="54" r="2.2" fill="#b7e4a3" stroke="#6fa85a" stroke-width="0.6"/><circle cx="480" cy="50" r="2.2" fill="#b7e4a3" stroke="#6fa85a" stroke-width="0.6"/><circle cx="430" cy="51" r="2" fill="#b7e4a3" stroke="#6fa85a" stroke-width="0.6"/>
|
||||
<g stroke="#3f9a3f" stroke-width="1.2" stroke-linecap="round"><path d="M456 50 l-3 -4" /><path d="M456 50 l3 -4" /><path d="M456 50 l0 -5" /><path d="M459 47 l3 -2" /><path d="M453 47 l-3 -2" /><path d="M474 53 l-3 -3" /><path d="M474 53 l2 -4" /><path d="M438 53 l3 -3" /><path d="M438 53 l-2 -4" /></g>
|
||||
<ellipse cx="456" cy="81" rx="30" ry="3.5" fill="#e6e9ec" stroke="#9aa4ae" stroke-width="1.2"/>
|
||||
<g transform="translate(426 34)"><path class="twinkle" style="animation-delay:0s" d="M0 -4 Q0.7 -0.7 4 0 Q0.7 0.7 0 4 Q-0.7 0.7 -4 0 Q-0.7 -0.7 0 -4 Z" fill="#7cc4f5"/></g>
|
||||
<g transform="translate(487 30)"><path class="twinkle" style="animation-delay:-0.8s" d="M0 -3.5 Q0.6 -0.6 3.5 0 Q0.6 0.6 0 3.5 Q-0.6 0.6 -3.5 0 Q-0.6 -0.6 0 -3.5 Z" fill="#7cc4f5"/></g>
|
||||
<g transform="translate(440 24)"><path class="twinkle" style="animation-delay:-1.4s" d="M0 -3 Q0.5 -0.5 3 0 Q0.5 0.5 0 3 Q-0.5 0.5 -3 0 Q-0.5 -0.5 0 -3 Z" fill="#7cc4f5"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,27 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>First day of spring</title>
|
||||
<style>
|
||||
.sway { transform-origin: 0 0; animation: sway 3s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
|
||||
.grow { transform-origin: 0 0; animation: grow 3s ease-in-out infinite; }
|
||||
@keyframes grow { 0%, 100% { transform: scale(0.9) rotate(-4deg); } 50% { transform: scale(1.05) rotate(4deg); } }
|
||||
.fly { animation: fly 10s ease-in-out infinite; }
|
||||
@keyframes fly { 0%, 100% { transform: translate(120px, -22px); } 25% { transform: translate(230px, -32px); } 50% { transform: translate(340px, -18px); } 75% { transform: translate(200px, -8px); } }
|
||||
.wing { transform-origin: 0 0; animation: wing 0.3s ease-in-out infinite alternate; }
|
||||
@keyframes wing { to { transform: scaleX(0.3); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(50 19)"><g class="grow">
|
||||
<path d="M0 0 C0 -8 1 -14 0 -22" stroke="#3f9a3f" stroke-width="2.6" stroke-linecap="round"/>
|
||||
<path d="M0 -14 C-4 -24 -14 -24 -18 -20 C-14 -12 -6 -11 0 -14 Z" fill="#5cb85c" stroke="#3f9a3f" stroke-width="1.2"/>
|
||||
<path d="M0 -18 C4 -28 14 -28 18 -24 C14 -16 6 -15 0 -18 Z" fill="#5cb85c" stroke="#3f9a3f" stroke-width="1.2"/>
|
||||
</g></g>
|
||||
<g transform="translate(426 82)"><g class="sway" style="animation-delay:0s"><path d="M0 0 L0 -32" stroke="#3f9a3f" stroke-width="2"/><g transform="translate(0 -32) scale(1.6)"><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(0)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(45)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(90)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(135)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(180)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(225)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(270)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(315)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><circle r="3.3" fill="#ffc300"/></g></g></g>
|
||||
<g transform="translate(455 82)"><g class="sway" style="animation-delay:-0.8s"><path d="M0 0 L0 -48" stroke="#3f9a3f" stroke-width="2"/><g transform="translate(0 -48) scale(1.9)"><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(0)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(45)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(90)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(135)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(180)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(225)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(270)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(315)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><circle r="3.3" fill="#ffc300"/></g></g></g>
|
||||
<g transform="translate(484 82)"><g class="sway" style="animation-delay:-1.6s"><path d="M0 0 L0 -30" stroke="#3f9a3f" stroke-width="2"/><g transform="translate(0 -30) scale(1.6)"><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(0)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(45)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(90)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(135)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(180)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(225)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(270)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><ellipse cx="0" cy="-5.5" rx="2.4" ry="4.6" transform="rotate(315)" fill="#ffffff" stroke="#c9d3dc" stroke-width="0.7"/><circle r="3.3" fill="#ffc300"/></g></g></g>
|
||||
<path d="M410 84 L412 72 L414 84 L416 76 L418 84 L420 74 L422 84 L424 72 L426 84 L428 76 L430 84 L432 74 L434 84 L436 72 L438 84 L440 76 L442 84 L444 74 L446 84 L448 72 L450 84 L452 76 L454 84 L456 74 L458 84 L460 72 L462 84 L464 76 L466 84 L468 74 L470 84 L472 72 L474 84 L476 76 L478 84 L480 74 L482 84 L484 72 L486 84 L488 76 L490 84 L492 74 L494 84 L496 72 L498 84 Z" fill="#5cb85c" stroke="#3f9a3f" stroke-width="1" stroke-linejoin="round"/>
|
||||
<g class="fly"><g class="wing">
|
||||
<path d="M0 0 C-6 -10 -15 -9 -13 -2 C-12 2 -5 2 0 0 Z M0 0 C-5 4 -11 8 -8 11 C-5 13 -1 7 0 0 Z" fill="#ff8fab" stroke="#d94a85" stroke-width="0.8"/>
|
||||
<path d="M0 0 C6 -10 15 -9 13 -2 C12 2 5 2 0 0 Z M0 0 C5 4 11 8 8 11 C5 13 1 7 0 0 Z" fill="#c9adf7" stroke="#9a7ad6" stroke-width="0.8"/>
|
||||
</g><path d="M0 -4 L0 6" stroke="#2b2b3a" stroke-width="1.8" stroke-linecap="round"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
@@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>St. Patrick's Day</title>
|
||||
<style>
|
||||
.fall { animation: fall linear infinite; transform-box: fill-box; transform-origin: center; }
|
||||
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(160px) rotate(540deg); opacity: 0; } }
|
||||
.sway { transform-origin: 0 0; animation: sway 3s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(50 21) rotate(-8)"><g class="sway">
|
||||
<ellipse cx="0" cy="0" rx="25" ry="5" fill="#1e8f3e" stroke="#13692c" stroke-width="1.4"/>
|
||||
<path d="M-15 -1 L-13 -34 L13 -34 L15 -1 Z" fill="#1e8f3e" stroke="#13692c" stroke-width="1.4" stroke-linejoin="round"/>
|
||||
<rect x="-14.5" y="-10" width="29" height="6" fill="#1f1f1f"/>
|
||||
<rect x="-5" y="-11.5" width="10" height="9" rx="1" fill="none" stroke="#ffc300" stroke-width="2"/>
|
||||
</g></g>
|
||||
<g transform="translate(470 18)"><g transform="scale(1.3)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 2 Q2 8 5 11" stroke="#2bb24c" stroke-width="1.6" stroke-linecap="round"/></g></g>
|
||||
<ellipse cx="447" cy="52" rx="20" ry="6" fill="#ffc300" stroke="#d9a400" stroke-width="1.2"/>
|
||||
<circle cx="440" cy="48" r="4" fill="#ffd23f" stroke="#d9a400"/><circle cx="450" cy="46" r="4" fill="#ffd23f" stroke="#d9a400"/><circle cx="458" cy="49" r="3.5" fill="#ffd23f" stroke="#d9a400"/>
|
||||
<path d="M425 54 Q423 78 437 80 L457 80 Q471 78 469 54 Z" fill="#2b2b2b" stroke="#555" stroke-width="1.4"/>
|
||||
<rect x="423" y="52" width="48" height="6" rx="3" fill="#3a3a3a" stroke="#555" stroke-width="1.2"/>
|
||||
<g transform="translate(-15 -40)"><g class="fall" style="animation-duration:5.5s;animation-delay:-1s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 2 Q2 8 5 11" stroke="#2bb24c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(30 -40)"><g class="fall" style="animation-duration:6.2s;animation-delay:-3.2s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 2 Q2 8 5 11" stroke="#1e8f3e" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(75 -40)"><g class="fall" style="animation-duration:5.1s;animation-delay:-0.4s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 2 Q2 8 5 11" stroke="#5cd65c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(120 -40)"><g class="fall" style="animation-duration:6.8s;animation-delay:-4.6s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 2 Q2 8 5 11" stroke="#2bb24c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(165 -40)"><g class="fall" style="animation-duration:5.7s;animation-delay:-2.2s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 2 Q2 8 5 11" stroke="#1e8f3e" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(210 -40)"><g class="fall" style="animation-duration:6.4s;animation-delay:-5.0s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 2 Q2 8 5 11" stroke="#5cd65c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(255 -40)"><g class="fall" style="animation-duration:5.3s;animation-delay:-1.6s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 2 Q2 8 5 11" stroke="#2bb24c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(300 -40)"><g class="fall" style="animation-duration:6.0s;animation-delay:-3.8s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 2 Q2 8 5 11" stroke="#1e8f3e" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(345 -40)"><g class="fall" style="animation-duration:5.8s;animation-delay:-2.8s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 2 Q2 8 5 11" stroke="#5cd65c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(390 -40)"><g class="fall" style="animation-duration:6.6s;animation-delay:-0.9s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#2bb24c"/><path d="M0 2 Q2 8 5 11" stroke="#2bb24c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(430 -40)"><g class="fall" style="animation-duration:5.4s;animation-delay:-4.1s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#1e8f3e"/><path d="M0 2 Q2 8 5 11" stroke="#1e8f3e" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
<g transform="translate(475 -40)"><g class="fall" style="animation-duration:6.1s;animation-delay:-2.5s"><g transform="scale(0.8)"><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(0) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(120) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" transform="rotate(240) translate(0 -7) scale(0.55)" fill="#5cd65c"/><path d="M0 2 Q2 8 5 11" stroke="#5cd65c" stroke-width="1.6" stroke-linecap="round"/></g></g></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.1 KiB |
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>First day of summer</title>
|
||||
<style>
|
||||
.spin { transform-origin: 0 0; animation: spin 14s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.glint { animation: glint 3.5s ease-in-out infinite; }
|
||||
@keyframes glint { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(455 38)">
|
||||
<g class="spin" fill="#ffb703"><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(0)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(30)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(60)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(90)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(120)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(150)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(180)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(210)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(240)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(270)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(300)"/><path d="M-3 -19 L0 -27 L3 -19 Z" transform="rotate(330)"/></g>
|
||||
<circle r="15" fill="#ffd23f" stroke="#f0a500" stroke-width="1.6"/>
|
||||
<path d="M-6 3 Q0 9 6 3" stroke="#c77700" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<circle cx="-5" cy="-3" r="1.6" fill="#c77700"/><circle cx="5" cy="-3" r="1.6" fill="#c77700"/>
|
||||
</g>
|
||||
<g transform="translate(50 47)">
|
||||
<path d="M-20 -4 L20 -4" stroke="#1f1f1f" stroke-width="2.4" stroke-linecap="round"/>
|
||||
<path d="M-19 -4 L-3 -4 L-4 2 Q-5 7 -11 7 Q-17 7 -18 2 Z M3 -4 L19 -4 L18 2 Q17 7 11 7 Q5 7 4 2 Z" fill="#1f1f1f"/>
|
||||
<path class="glint" d="M-15 -2 L-11 -2 L-14 3 Z M7 -2 L11 -2 L8 3 Z" fill="#ffffff"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>Valentine's Day</title>
|
||||
<style>
|
||||
.rise { animation: rise ease-out infinite; }
|
||||
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-230px); opacity: 0; } }
|
||||
.beat { transform-origin: 0 0; animation: beat 1.3s ease-in-out infinite; }
|
||||
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 28% { transform: scale(1.06); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall, .rise { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(30 92) scale(0.6)"><path class="rise" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#ff4d6d" style="animation-duration:4.2s;animation-delay:0s"/></g>
|
||||
<g transform="translate(62 92) scale(0.45)"><path class="rise" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#ff8fab" style="animation-duration:3.6s;animation-delay:-1.4s"/></g>
|
||||
<g transform="translate(140 92) scale(0.55)"><path class="rise" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#ff4d6d" style="animation-duration:4.6s;animation-delay:-2.8s"/></g>
|
||||
<g transform="translate(205 92) scale(0.4)"><path class="rise" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#ffb3c6" style="animation-duration:3.9s;animation-delay:-0.7s"/></g>
|
||||
<g transform="translate(260 92) scale(0.6)"><path class="rise" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#e5383b" style="animation-duration:4.4s;animation-delay:-3.3s"/></g>
|
||||
<g transform="translate(320 92) scale(0.45)"><path class="rise" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#ff8fab" style="animation-duration:3.7s;animation-delay:-2.0s"/></g>
|
||||
<g transform="translate(380 92) scale(0.55)"><path class="rise" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#ff4d6d" style="animation-duration:4.1s;animation-delay:-0.2s"/></g>
|
||||
<line x1="424" y1="66" x2="488" y2="16" stroke="#8d5a2b" stroke-width="2.6" stroke-linecap="round"/>
|
||||
<path d="M424 66 l-3 -9 m3 9 l9 -3 M428 63 l-3 -9 m3 9 l9 -3" stroke="#e5383b" stroke-width="2" stroke-linecap="round"/>
|
||||
<g transform="translate(456 40) scale(2.3)"><path class="beat" d="M0 8 C-14 -2 -9 -14 0 -6 C9 -14 14 -2 0 8 Z" fill="#e5383b" stroke="#b5171d" stroke-width="0.8"/></g>
|
||||
<path d="M478 23 L490 14 L486 26 Z" fill="#9aa4ae"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>First day of winter</title>
|
||||
<style>
|
||||
.fall { animation: fall linear infinite; transform-box: fill-box; transform-origin: center; }
|
||||
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(160px) rotate(540deg); opacity: 0; } }
|
||||
.sway { transform-origin: 0 0; animation: sway 3.2s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
|
||||
.spin { transform-origin: 0 0; animation: spin 16s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(50 26) rotate(-6)"><g class="sway">
|
||||
<path d="M-25 2 C-25 -24 25 -24 25 2 Z" fill="#3a86ff" stroke="#2563c9" stroke-width="1.6"/>
|
||||
<path d="M-17 -12 L-12 -6 L-7 -12 L-2 -6 L3 -12 L8 -6 L13 -12 L18 -6" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>
|
||||
<rect x="-27" y="-2" width="54" height="9" rx="4.5" fill="#ffffff" stroke="#c9d3dc" stroke-width="1.6"/>
|
||||
<circle cx="0" cy="-22" r="7" fill="#ffffff" stroke="#c9d3dc" stroke-width="1.6"/>
|
||||
</g></g>
|
||||
<g transform="translate(455 40)"><g class="spin"><g stroke="#7cc4f5" stroke-width="3" stroke-linecap="round"><path d="M0 0 L0 -24 M0 -13.2 L-6.0 -18.0 M0 -13.2 L6.0 -18.0" transform="rotate(0)"/><path d="M0 0 L0 -24 M0 -13.2 L-6.0 -18.0 M0 -13.2 L6.0 -18.0" transform="rotate(60)"/><path d="M0 0 L0 -24 M0 -13.2 L-6.0 -18.0 M0 -13.2 L6.0 -18.0" transform="rotate(120)"/><path d="M0 0 L0 -24 M0 -13.2 L-6.0 -18.0 M0 -13.2 L6.0 -18.0" transform="rotate(180)"/><path d="M0 0 L0 -24 M0 -13.2 L-6.0 -18.0 M0 -13.2 L6.0 -18.0" transform="rotate(240)"/><path d="M0 0 L0 -24 M0 -13.2 L-6.0 -18.0 M0 -13.2 L6.0 -18.0" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(-15 -40)"><g class="fall" style="animation-duration:5.5s;animation-delay:-1s"><g stroke="#7cc4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(30 -40)"><g class="fall" style="animation-duration:6.2s;animation-delay:-3.2s"><g stroke="#a9d4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(75 -40)"><g class="fall" style="animation-duration:5.1s;animation-delay:-0.4s"><g stroke="#7cc4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(120 -40)"><g class="fall" style="animation-duration:6.8s;animation-delay:-4.6s"><g stroke="#a9d4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(165 -40)"><g class="fall" style="animation-duration:5.7s;animation-delay:-2.2s"><g stroke="#7cc4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(210 -40)"><g class="fall" style="animation-duration:6.4s;animation-delay:-5.0s"><g stroke="#a9d4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(255 -40)"><g class="fall" style="animation-duration:5.3s;animation-delay:-1.6s"><g stroke="#7cc4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(300 -40)"><g class="fall" style="animation-duration:6.0s;animation-delay:-3.8s"><g stroke="#a9d4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(345 -40)"><g class="fall" style="animation-duration:5.8s;animation-delay:-2.8s"><g stroke="#7cc4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(390 -40)"><g class="fall" style="animation-duration:6.6s;animation-delay:-0.9s"><g stroke="#a9d4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(430 -40)"><g class="fall" style="animation-duration:5.4s;animation-delay:-4.1s"><g stroke="#7cc4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
<g transform="translate(475 -40)"><g class="fall" style="animation-duration:6.1s;animation-delay:-2.5s"><g stroke="#a9d4f5" stroke-width="1.4" stroke-linecap="round"><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(0)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(60)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(120)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(180)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(240)"/><path d="M0 0 L0 -5 M0 -2.8 L-1.2 -3.8 M0 -2.8 L1.2 -3.8" transform="rotate(300)"/></g></g></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.8 KiB |
@@ -0,0 +1,36 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -45 530 175" fill="none">
|
||||
<title>International Women's Day</title>
|
||||
<style>
|
||||
.fall { animation: fall linear infinite; transform-box: fill-box; transform-origin: center; }
|
||||
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(160px) rotate(540deg); opacity: 0; } }
|
||||
|
||||
.sway { transform-origin: 0 0; animation: sway 3.4s ease-in-out infinite; }
|
||||
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
|
||||
.nod { transform-origin: 0 0; animation: nod 2.2s ease-in-out infinite; }
|
||||
@keyframes nod { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .fall, .rise { display: none; } }
|
||||
</style>
|
||||
<g transform="translate(455 82)"><g class="sway">
|
||||
<path d="M0 0 C-14 -10 -20 -24 -16 -34 C-8 -22 -4 -12 0 0 Z M0 0 C14 -10 20 -24 16 -34 C8 -22 4 -12 0 0 Z" fill="#5cb85c" stroke="#3f9a3f" stroke-width="1.2"/>
|
||||
<path d="M0 0 Q-6.4 -24.0 -16 -48" stroke="#3f9a3f" stroke-width="2.4" stroke-linecap="round"/>
|
||||
<g transform="translate(-16 -48)"><path class="nod" style="animation-delay:0s" d="M-7 0 C-9 -8 -7 -14 -5 -16 L-2.5 -11 L0 -17 L2.5 -11 L5 -16 C7 -14 9 -8 7 0 Q0 4 -7 0 Z" fill="#ff6fa5" stroke="#d94a85" stroke-width="1.2" stroke-linejoin="round"/></g>
|
||||
<path d="M0 0 Q0.0 -30.0 0 -60" stroke="#3f9a3f" stroke-width="2.4" stroke-linecap="round"/>
|
||||
<g transform="translate(0 -60)"><path class="nod" style="animation-delay:-0.7s" d="M-7 0 C-9 -8 -7 -14 -5 -16 L-2.5 -11 L0 -17 L2.5 -11 L5 -16 C7 -14 9 -8 7 0 Q0 4 -7 0 Z" fill="#e63946" stroke="#b5171d" stroke-width="1.2" stroke-linejoin="round"/></g>
|
||||
<path d="M0 0 Q6.4 -23.0 16 -46" stroke="#3f9a3f" stroke-width="2.4" stroke-linecap="round"/>
|
||||
<g transform="translate(16 -46)"><path class="nod" style="animation-delay:-1.4s" d="M-7 0 C-9 -8 -7 -14 -5 -16 L-2.5 -11 L0 -17 L2.5 -11 L5 -16 C7 -14 9 -8 7 0 Q0 4 -7 0 Z" fill="#ffc300" stroke="#d9a400" stroke-width="1.2" stroke-linejoin="round"/></g>
|
||||
<path d="M-7 -14 L-16 -20 L-14 -9 Z M7 -14 L16 -20 L14 -9 Z" fill="#9b5de5" stroke="#7b3fc5" stroke-width="1"/>
|
||||
<circle cx="0" cy="-14" r="4" fill="#9b5de5" stroke="#7b3fc5" stroke-width="1"/>
|
||||
</g></g>
|
||||
<ellipse class="fall" cx="-15" cy="-40" rx="3.2" ry="2" fill="#ff6fa5" style="animation-duration:5.5s;animation-delay:-1s"/>
|
||||
<ellipse class="fall" cx="30" cy="-40" rx="3.2" ry="2" fill="#ffc300" style="animation-duration:6.2s;animation-delay:-3.2s"/>
|
||||
<ellipse class="fall" cx="75" cy="-40" rx="3.2" ry="2" fill="#e63946" style="animation-duration:5.1s;animation-delay:-0.4s"/>
|
||||
<ellipse class="fall" cx="120" cy="-40" rx="3.2" ry="2" fill="#ff6fa5" style="animation-duration:6.8s;animation-delay:-4.6s"/>
|
||||
<ellipse class="fall" cx="165" cy="-40" rx="3.2" ry="2" fill="#ffc300" style="animation-duration:5.7s;animation-delay:-2.2s"/>
|
||||
<ellipse class="fall" cx="210" cy="-40" rx="3.2" ry="2" fill="#e63946" style="animation-duration:6.4s;animation-delay:-5.0s"/>
|
||||
<ellipse class="fall" cx="255" cy="-40" rx="3.2" ry="2" fill="#ff6fa5" style="animation-duration:5.3s;animation-delay:-1.6s"/>
|
||||
<ellipse class="fall" cx="300" cy="-40" rx="3.2" ry="2" fill="#ffc300" style="animation-duration:6.0s;animation-delay:-3.8s"/>
|
||||
<ellipse class="fall" cx="345" cy="-40" rx="3.2" ry="2" fill="#e63946" style="animation-duration:5.8s;animation-delay:-2.8s"/>
|
||||
<ellipse class="fall" cx="390" cy="-40" rx="3.2" ry="2" fill="#ff6fa5" style="animation-duration:6.6s;animation-delay:-0.9s"/>
|
||||
<ellipse class="fall" cx="430" cy="-40" rx="3.2" ry="2" fill="#ffc300" style="animation-duration:5.4s;animation-delay:-4.1s"/>
|
||||
<ellipse class="fall" cx="475" cy="-40" rx="3.2" ry="2" fill="#e63946" style="animation-duration:6.1s;animation-delay:-2.5s"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -278,7 +278,7 @@ export default function Sidebar({ isAdmin, onSelectCategory, bookmarksVersion }:
|
||||
aria-label={t("sidebar.dashboard")}
|
||||
sx={{ display: "flex", alignItems: "center", lineHeight: 0 }}
|
||||
>
|
||||
<Wordmark size="lg" />
|
||||
<Wordmark size="lg" seasonal />
|
||||
</Link>
|
||||
)}
|
||||
<Tooltip title={collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}>
|
||||
|
||||
@@ -1,10 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import { keyframes } from "@emotion/react";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import lockupColor from "../assets/logos/thingport-lockup-compact-color.svg";
|
||||
import lockupOnDark from "../assets/logos/thingport-lockup-compact-on-dark.svg";
|
||||
import autumn from "../assets/logos/seasonal/autumn.svg";
|
||||
import birthday from "../assets/logos/seasonal/birthday.svg";
|
||||
import christmas from "../assets/logos/seasonal/christmas.svg";
|
||||
import coffee from "../assets/logos/seasonal/coffee.svg";
|
||||
import diwali from "../assets/logos/seasonal/diwali.svg";
|
||||
import easter from "../assets/logos/seasonal/easter.svg";
|
||||
import halloween from "../assets/logos/seasonal/halloween.svg";
|
||||
import hanukkah from "../assets/logos/seasonal/hanukkah.svg";
|
||||
import holi from "../assets/logos/seasonal/holi.svg";
|
||||
import jonines from "../assets/logos/seasonal/jonines.svg";
|
||||
import lunarNewYear from "../assets/logos/seasonal/lunarnewyear.svg";
|
||||
import muertos from "../assets/logos/seasonal/muertos.svg";
|
||||
import newYear from "../assets/logos/seasonal/newyear.svg";
|
||||
import programmersDay from "../assets/logos/seasonal/programmersday.svg";
|
||||
import ramadan from "../assets/logos/seasonal/ramadan.svg";
|
||||
import saltibarsciai from "../assets/logos/seasonal/saltibarsciai.svg";
|
||||
import spring from "../assets/logos/seasonal/spring.svg";
|
||||
import stPatricks from "../assets/logos/seasonal/stpatricks.svg";
|
||||
import summer from "../assets/logos/seasonal/summer.svg";
|
||||
import valentines from "../assets/logos/seasonal/valentines.svg";
|
||||
import winter from "../assets/logos/seasonal/winter.svg";
|
||||
import womensDay from "../assets/logos/seasonal/womensday.svg";
|
||||
import { type Season, seasonFor } from "../utils/season";
|
||||
|
||||
type Props = {
|
||||
size?: "lg" | "md" | "sm";
|
||||
/** Dresses the logo up for the season it is, if any. */
|
||||
seasonal?: boolean;
|
||||
};
|
||||
|
||||
const HEIGHTS: Record<NonNullable<Props["size"]>, string> = {
|
||||
@@ -13,10 +40,84 @@ const HEIGHTS: Record<NonNullable<Props["size"]>, string> = {
|
||||
sm: "1.125rem",
|
||||
};
|
||||
|
||||
export default function Wordmark({ size = "md" }: Props) {
|
||||
// April Fools' turns the logo itself, so it has none.
|
||||
const OVERLAYS: Record<Exclude<Season, "aprilFools">, string> = {
|
||||
newYear,
|
||||
lunarNewYear,
|
||||
valentines,
|
||||
holi,
|
||||
womensDay,
|
||||
stPatricks,
|
||||
spring,
|
||||
ramadan,
|
||||
easter,
|
||||
saltibarsciai,
|
||||
summer,
|
||||
jonines,
|
||||
birthday,
|
||||
programmersDay,
|
||||
autumn,
|
||||
coffee,
|
||||
diwali,
|
||||
halloween,
|
||||
muertos,
|
||||
hanukkah,
|
||||
winter,
|
||||
christmas,
|
||||
};
|
||||
|
||||
// Upside down all day, with a wobble now and then as if it noticed.
|
||||
const upsideDown = keyframes`
|
||||
0%, 70%, 100% { transform: rotate(180deg); }
|
||||
76% { transform: rotate(168deg); }
|
||||
82% { transform: rotate(191deg); }
|
||||
88% { transform: rotate(176deg); }
|
||||
94% { transform: rotate(183deg); }
|
||||
`;
|
||||
|
||||
export default function Wordmark({ size = "md", seasonal = false }: Props) {
|
||||
const theme = useTheme();
|
||||
const [season] = useState(() => (seasonal ? seasonFor(new Date()) : null));
|
||||
const src = theme.palette.mode === "dark" ? lockupOnDark : lockupColor;
|
||||
const height = HEIGHTS[size];
|
||||
const overlay = season && season !== "aprilFools" ? OVERLAYS[season] : undefined;
|
||||
const logo = (
|
||||
<Box
|
||||
component="img"
|
||||
src={src}
|
||||
alt="Thingport"
|
||||
sx={{
|
||||
height,
|
||||
width: "auto",
|
||||
display: "block",
|
||||
...(season === "aprilFools" && {
|
||||
transform: "rotate(180deg)",
|
||||
animation: `${upsideDown} 5s ease-in-out infinite`,
|
||||
"@media (prefers-reduced-motion: reduce)": { animation: "none" },
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
if (!overlay) return logo;
|
||||
return (
|
||||
<Box component="img" src={src} alt="Thingport" sx={{ height: HEIGHTS[size], width: "auto", display: "block" }} />
|
||||
<Box sx={{ position: "relative", lineHeight: 0 }}>
|
||||
{logo}
|
||||
{/* The overlay's viewBox (-30 -45 530 175) is the logo's (0 0 411 100) with room around it, so it lines up
|
||||
at any size and may spill a little past the logo. */}
|
||||
<Box
|
||||
component="img"
|
||||
src={overlay}
|
||||
alt=""
|
||||
aria-hidden
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: `calc(${height} * -0.3)`,
|
||||
top: `calc(${height} * -0.45)`,
|
||||
height: `calc(${height} * 1.75)`,
|
||||
width: "auto",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { easterSunday, equinox, seasonFor } from "./season";
|
||||
|
||||
const on = (year: number, month: number, day: number) => seasonFor(new Date(year, month - 1, day, 12));
|
||||
const minutesOff = (date: Date, iso: string) => Math.abs(date.getTime() - Date.parse(iso)) / 60_000;
|
||||
const dayAfter = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 12);
|
||||
|
||||
describe("seasonFor", () => {
|
||||
it("knows Easter Sunday in years it moves around", () => {
|
||||
expect(easterSunday(2025).toDateString()).toBe(new Date(2025, 3, 20).toDateString());
|
||||
expect(easterSunday(2026).toDateString()).toBe(new Date(2026, 3, 5).toDateString());
|
||||
expect(easterSunday(2027).toDateString()).toBe(new Date(2027, 2, 28).toDateString());
|
||||
});
|
||||
|
||||
it("is Easter from Good Friday to Easter Monday", () => {
|
||||
expect(on(2027, 3, 25)).toBeNull();
|
||||
expect(on(2027, 3, 26)).toBe("easter");
|
||||
expect(on(2027, 3, 29)).toBe("easter");
|
||||
expect(on(2027, 3, 30)).toBeNull();
|
||||
});
|
||||
|
||||
it("is Christmas from 18 December to the year's end, and New Year for its first two days", () => {
|
||||
expect(on(2026, 12, 17)).toBeNull();
|
||||
expect(on(2026, 12, 18)).toBe("christmas");
|
||||
expect(on(2026, 12, 31)).toBe("christmas");
|
||||
expect(on(2027, 1, 1)).toBe("newYear");
|
||||
expect(on(2027, 1, 2)).toBe("newYear");
|
||||
expect(on(2027, 1, 3)).toBeNull();
|
||||
});
|
||||
|
||||
it("knows the one-day ones", () => {
|
||||
expect(on(2027, 2, 14)).toBe("valentines");
|
||||
expect(on(2027, 3, 8)).toBe("womensDay");
|
||||
expect(on(2027, 3, 17)).toBe("stPatricks");
|
||||
expect(on(2027, 4, 1)).toBe("aprilFools");
|
||||
expect(on(2027, 9, 7)).toBe("birthday");
|
||||
expect(on(2027, 10, 1)).toBe("coffee");
|
||||
expect(on(2027, 6, 10)).toBe("saltibarsciai");
|
||||
});
|
||||
|
||||
it("puts Programmers' Day on the 256th day, a day earlier in a leap year", () => {
|
||||
expect(on(2027, 9, 13)).toBe("programmersDay");
|
||||
expect(on(2027, 9, 12)).toBeNull();
|
||||
expect(on(2028, 9, 12)).toBe("programmersDay");
|
||||
expect(on(2028, 9, 13)).toBeNull();
|
||||
});
|
||||
|
||||
it("is Halloween for its last three days of October, then the Day of the Dead", () => {
|
||||
expect(on(2026, 10, 28)).toBeNull();
|
||||
expect(on(2026, 10, 29)).toBe("halloween");
|
||||
expect(on(2026, 10, 31)).toBe("halloween");
|
||||
expect(on(2026, 11, 1)).toBe("muertos");
|
||||
expect(on(2026, 11, 2)).toBe("muertos");
|
||||
expect(on(2026, 11, 3)).toBeNull();
|
||||
});
|
||||
|
||||
it("is Joninės on its eve and its day", () => {
|
||||
expect(on(2027, 6, 23)).toBe("jonines");
|
||||
expect(on(2027, 6, 24)).toBe("jonines");
|
||||
expect(on(2027, 6, 25)).toBeNull();
|
||||
});
|
||||
|
||||
it("finds the lunar ones in their tables", () => {
|
||||
expect(on(2027, 2, 6)).toBe("lunarNewYear");
|
||||
expect(on(2027, 2, 7)).toBe("lunarNewYear");
|
||||
expect(on(2027, 3, 21)).toBe("holi");
|
||||
expect(on(2027, 3, 22)).toBe("holi");
|
||||
expect(on(2026, 11, 8)).toBe("diwali");
|
||||
expect(on(2026, 12, 4)).toBe("hanukkah");
|
||||
expect(on(2026, 12, 11)).toBe("hanukkah");
|
||||
expect(on(2026, 12, 12)).toBeNull();
|
||||
});
|
||||
|
||||
it("marks Ramadan's first day and Eid on either day it may fall", () => {
|
||||
expect(on(2027, 2, 8)).toBe("ramadan");
|
||||
expect(on(2027, 2, 9)).toBeNull();
|
||||
expect(on(2027, 3, 9)).toBe("ramadan");
|
||||
expect(on(2027, 3, 10)).toBe("ramadan");
|
||||
expect(on(2027, 3, 11)).toBeNull();
|
||||
});
|
||||
|
||||
it("puts the equinoxes and solstices within minutes of when they happen", () => {
|
||||
expect(minutesOff(equinox(2026, "march"), "2026-03-20T14:46Z")).toBeLessThan(15);
|
||||
expect(minutesOff(equinox(2026, "june"), "2026-06-21T08:24Z")).toBeLessThan(15);
|
||||
expect(minutesOff(equinox(2026, "september"), "2026-09-23T00:05Z")).toBeLessThan(15);
|
||||
expect(minutesOff(equinox(2026, "december"), "2026-12-21T20:50Z")).toBeLessThan(15);
|
||||
});
|
||||
|
||||
it("shows each season's first day on the user's own calendar day of it", () => {
|
||||
for (const [which, season] of [
|
||||
["june", "summer"],
|
||||
["september", "autumn"],
|
||||
] as const) {
|
||||
const moment = equinox(2027, which);
|
||||
expect(seasonFor(moment)).toBe(season);
|
||||
// Not null: east of UTC, the June solstice's day after can already be Joninės.
|
||||
expect(seasonFor(dayAfter(moment))).not.toBe(season);
|
||||
}
|
||||
});
|
||||
|
||||
it("lets a holiday win over a longer or minor one on the same day", () => {
|
||||
// Christmas Eve over the first day of Hanukkah 2027, then Hanukkah over the days after Christmas.
|
||||
expect(on(2027, 12, 24)).toBe("christmas");
|
||||
expect(on(2027, 12, 28)).toBe("hanukkah");
|
||||
// Diwali over Halloween; Eid over the March equinox, both on 20 March 2026.
|
||||
expect(on(2027, 10, 29)).toBe("diwali");
|
||||
expect(on(2026, 3, 20)).toBe("ramadan");
|
||||
// The winter solstice through the days before Christmas.
|
||||
expect(seasonFor(equinox(2026, "december"))).toBe("winter");
|
||||
});
|
||||
|
||||
it("is an ordinary day otherwise", () => {
|
||||
expect(on(2026, 10, 14)).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,203 @@
|
||||
export type Season =
|
||||
| "newYear"
|
||||
| "lunarNewYear"
|
||||
| "valentines"
|
||||
| "holi"
|
||||
| "womensDay"
|
||||
| "stPatricks"
|
||||
| "spring"
|
||||
| "ramadan"
|
||||
| "aprilFools"
|
||||
| "easter"
|
||||
| "saltibarsciai"
|
||||
| "summer"
|
||||
| "jonines"
|
||||
| "birthday"
|
||||
| "programmersDay"
|
||||
| "autumn"
|
||||
| "coffee"
|
||||
| "diwali"
|
||||
| "halloween"
|
||||
| "muertos"
|
||||
| "hanukkah"
|
||||
| "winter"
|
||||
| "christmas";
|
||||
|
||||
const DAY_MS = 24 * 60 * 60 * 1000;
|
||||
|
||||
// Lunar calendars have no simple formula, so these are looked up; past the last year, that season just doesn't show.
|
||||
// Ramadan begins by moon sighting, so its days can be a day off where the user is.
|
||||
const LUNAR_NEW_YEAR = [
|
||||
"2026-02-17",
|
||||
"2027-02-06",
|
||||
"2028-01-26",
|
||||
"2029-02-13",
|
||||
"2030-02-03",
|
||||
"2031-01-23",
|
||||
"2032-02-11",
|
||||
"2033-01-31",
|
||||
"2034-02-19",
|
||||
"2035-02-08",
|
||||
];
|
||||
/** Holika Dahan, the bonfire night; Rangwali Holi, the colour day, is the next. */
|
||||
const HOLI = ["2026-03-03", "2027-03-21", "2028-03-10", "2029-02-28", "2030-03-19", "2031-03-08"];
|
||||
const RAMADAN_START = [
|
||||
"2026-02-18",
|
||||
"2027-02-08",
|
||||
"2028-01-28",
|
||||
"2029-01-16",
|
||||
"2030-01-05",
|
||||
"2030-12-26",
|
||||
"2031-12-15",
|
||||
"2032-12-04",
|
||||
"2033-11-23",
|
||||
"2034-11-12",
|
||||
"2035-11-01",
|
||||
];
|
||||
/** Lakshmi Puja, the main day. */
|
||||
const DIWALI = ["2026-11-08", "2027-10-29", "2028-10-17", "2029-11-05", "2030-10-26"];
|
||||
/** The evening the first candle is lit. */
|
||||
const HANUKKAH = ["2026-12-04", "2027-12-24", "2028-12-12", "2029-12-01", "2030-12-20"];
|
||||
|
||||
/** Western (Gregorian) Easter Sunday, by the anonymous Gregorian algorithm. */
|
||||
export function easterSunday(year: number): Date {
|
||||
const a = year % 19;
|
||||
const b = Math.floor(year / 100);
|
||||
const c = year % 100;
|
||||
const d = Math.floor(b / 4);
|
||||
const e = b % 4;
|
||||
const f = Math.floor((b + 8) / 25);
|
||||
const g = Math.floor((b - f + 1) / 3);
|
||||
const h = (19 * a + b - d - g + 15) % 30;
|
||||
const i = Math.floor(c / 4);
|
||||
const k = c % 4;
|
||||
const l = (32 + 2 * e + 2 * i - h - k) % 7;
|
||||
const m = Math.floor((a + 11 * h + 22 * l) / 451);
|
||||
const month = Math.floor((h + l - 7 * m + 114) / 31);
|
||||
const day = ((h + l - 7 * m + 114) % 31) + 1;
|
||||
return new Date(year, month - 1, day);
|
||||
}
|
||||
|
||||
// Meeus, Astronomical Algorithms, ch. 27: mean equinox/solstice for 2000-3000, then its periodic terms.
|
||||
const MEAN = {
|
||||
march: [2451623.80984, 365242.37404, 0.05169, -0.00411, -0.00057],
|
||||
june: [2451716.56767, 365241.62603, 0.00325, 0.00888, -0.0003],
|
||||
september: [2451810.21715, 365242.01767, -0.11575, 0.00337, 0.00078],
|
||||
december: [2451900.05952, 365242.74049, -0.06223, -0.00823, 0.00032],
|
||||
};
|
||||
const PERIODIC = [
|
||||
[485, 324.96, 1934.136],
|
||||
[203, 337.23, 32964.467],
|
||||
[199, 342.08, 20.186],
|
||||
[182, 27.85, 445267.112],
|
||||
[156, 73.14, 45036.886],
|
||||
[136, 171.52, 22518.443],
|
||||
[77, 222.54, 65928.934],
|
||||
[74, 296.72, 3034.906],
|
||||
[70, 243.58, 9037.513],
|
||||
[58, 119.81, 33718.147],
|
||||
[52, 297.17, 150.678],
|
||||
[50, 21.02, 2281.226],
|
||||
[45, 247.54, 29929.562],
|
||||
[44, 325.15, 31555.956],
|
||||
[29, 60.93, 4443.417],
|
||||
[18, 155.12, 67555.328],
|
||||
[17, 288.79, 4562.452],
|
||||
[16, 198.04, 62894.029],
|
||||
[14, 199.76, 31436.921],
|
||||
[12, 95.39, 14577.848],
|
||||
[12, 287.11, 31931.756],
|
||||
[12, 320.81, 34777.259],
|
||||
[9, 227.73, 1222.114],
|
||||
[8, 15.45, 16859.074],
|
||||
];
|
||||
const RAD = Math.PI / 180;
|
||||
|
||||
/** The moment of a year's equinox or solstice, to within a few minutes. */
|
||||
export function equinox(year: number, which: keyof typeof MEAN): Date {
|
||||
const y = (year - 2000) / 1000;
|
||||
const jde0 = MEAN[which].reduce((sum, coefficient, power) => sum + coefficient * y ** power, 0);
|
||||
const t = (jde0 - 2451545) / 36525;
|
||||
const w = (35999.373 * t - 2.47) * RAD;
|
||||
const lambda = 1 + 0.0334 * Math.cos(w) + 0.0007 * Math.cos(2 * w);
|
||||
const s = PERIODIC.reduce((sum, [a, b, c]) => sum + a * Math.cos((b + c * t) * RAD), 0);
|
||||
const jde = jde0 + (0.00001 * s) / lambda;
|
||||
// Julian day to Unix time; the minute or so between TT and UTC doesn't matter here.
|
||||
return new Date((jde - 2440587.5) * DAY_MS);
|
||||
}
|
||||
|
||||
/** `minor`: gives way to any holiday, as the equinoxes do. */
|
||||
type Window = { season: Season; start: Date; days: number; minor?: boolean };
|
||||
|
||||
const atMidnight = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
|
||||
function fromTable(season: Season, dates: string[], offset: number, days: number): Window[] {
|
||||
return dates.map((iso) => {
|
||||
const [year, month, day] = iso.split("-").map(Number);
|
||||
return { season, start: new Date(year, month - 1, day + offset), days };
|
||||
});
|
||||
}
|
||||
|
||||
function windowsAround(year: number): Window[] {
|
||||
const fixed = (season: Season, month: number, day: number, days = 1): Window => ({
|
||||
season,
|
||||
start: new Date(year, month - 1, day),
|
||||
days,
|
||||
});
|
||||
const easter = easterSunday(year);
|
||||
return [
|
||||
fixed("newYear", 1, 1, 2),
|
||||
fixed("valentines", 2, 14),
|
||||
fixed("womensDay", 3, 8),
|
||||
fixed("stPatricks", 3, 17),
|
||||
fixed("aprilFools", 4, 1),
|
||||
// Good Friday to Easter Monday.
|
||||
{ season: "easter", start: new Date(year, easter.getMonth(), easter.getDate() - 2), days: 4 },
|
||||
// Vilnius's day of the cold pink soup; its Pink Soup Fest moves around early June.
|
||||
fixed("saltibarsciai", 6, 10),
|
||||
// Midsummer: the eve, when the fern flower is looked for, and the day.
|
||||
fixed("jonines", 6, 23, 2),
|
||||
// The day of Thingport's first commit, 7 September 2026.
|
||||
fixed("birthday", 9, 7),
|
||||
// The 256th day (2^8): 13 September, or the 12th in a leap year.
|
||||
{ season: "programmersDay", start: new Date(year, 0, 256), days: 1 },
|
||||
fixed("coffee", 10, 1),
|
||||
fixed("halloween", 10, 29, 3),
|
||||
fixed("muertos", 11, 1, 2),
|
||||
// Christmas Eve to Boxing Day always; the days around them give way, even to the winter solstice.
|
||||
fixed("christmas", 12, 24, 3),
|
||||
{ ...fixed("christmas", 12, 18, 14), minor: true },
|
||||
// On the user's own calendar day of each, wherever they are.
|
||||
{ season: "spring", start: atMidnight(equinox(year, "march")), days: 1, minor: true },
|
||||
{ season: "summer", start: atMidnight(equinox(year, "june")), days: 1, minor: true },
|
||||
{ season: "autumn", start: atMidnight(equinox(year, "september")), days: 1, minor: true },
|
||||
{ season: "winter", start: atMidnight(equinox(year, "december")), days: 1, minor: true },
|
||||
];
|
||||
}
|
||||
|
||||
const rank = (window: Window) => (window.minor ? 1000 : 0) + window.days;
|
||||
|
||||
const LOOKED_UP: Window[] = [
|
||||
...fromTable("lunarNewYear", LUNAR_NEW_YEAR, 0, 2),
|
||||
...fromTable("holi", HOLI, 0, 2),
|
||||
// Ramadan's first day, then Eid al-Fitr on both days it may fall, after 29 or 30 days of fasting.
|
||||
...fromTable("ramadan", RAMADAN_START, 0, 1),
|
||||
...fromTable("ramadan", RAMADAN_START, 29, 2),
|
||||
...fromTable("diwali", DIWALI, 0, 1),
|
||||
...fromTable("hanukkah", HANUKKAH, 0, 8),
|
||||
];
|
||||
|
||||
/**
|
||||
* The season `date` falls in, by the user's own calendar day; null on an ordinary day. Where two overlap, a holiday
|
||||
* beats a minor one, then the shorter wins, so e.g. Diwali shows through Halloween's three days.
|
||||
*/
|
||||
export function seasonFor(date: Date): Season | null {
|
||||
const today = atMidnight(date);
|
||||
let best: Window | null = null;
|
||||
for (const window of [...windowsAround(today.getFullYear()), ...LOOKED_UP]) {
|
||||
// Round: a day that crosses a daylight saving change is an hour short or long.
|
||||
const into = Math.round((today.getTime() - window.start.getTime()) / DAY_MS);
|
||||
if (into >= 0 && into < window.days && (!best || rank(window) < rank(best))) best = window;
|
||||
}
|
||||
return best?.season ?? null;
|
||||
}
|
||||
Reference in new issue
Block a user