83 lines
2.5 KiB
XML
83 lines
2.5 KiB
XML
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
|
|
<defs>
|
|
<linearGradient id="bell-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#e74c3c;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#c0392b;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<style>
|
|
@keyframes bellSwing {
|
|
0%, 100% { transform: rotate(-15deg); }
|
|
25% { transform: rotate(15deg); }
|
|
50% { transform: rotate(-15deg); }
|
|
75% { transform: rotate(15deg); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.4; transform: scale(0.95); }
|
|
50% { opacity: 0.7; transform: scale(1.05); }
|
|
}
|
|
|
|
.bell-swing {
|
|
animation: bellSwing 1.4s ease-in-out infinite;
|
|
transform-origin: 60px 42px;
|
|
}
|
|
|
|
.pulse-ring {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
transform-origin: center;
|
|
}
|
|
</style>
|
|
|
|
<!-- Background pulse circles -->
|
|
<g class="pulse-ring">
|
|
<circle cx="60" cy="60" r="45" fill="none" stroke="#000000" stroke-width="2" opacity="0.5"/>
|
|
<circle cx="60" cy="60" r="38" fill="none" stroke="#000000" stroke-width="2" opacity="0.3"/>
|
|
</g>
|
|
|
|
<!-- Swinging bell -->
|
|
<g class="bell-swing">
|
|
<!-- Bell mounting point (circle at top) -->
|
|
<circle cx="60" cy="42" r="3.5" fill="#95a5a6"/>
|
|
|
|
<!-- Bell top handle -->
|
|
<rect x="56.5" y="45" width="7" height="3" rx="1" fill="url(#bell-gradient)"/>
|
|
|
|
<!-- Main bell body (classic bell curve) -->
|
|
<path d="M 57 48
|
|
Q 55 50, 54 54
|
|
Q 52 60, 50 66
|
|
Q 49 70, 48 74
|
|
L 48 77
|
|
Q 48 78, 48.5 78.5
|
|
L 71.5 78.5
|
|
Q 72 78, 72 77
|
|
L 72 74
|
|
Q 71 70, 70 66
|
|
Q 68 60, 66 54
|
|
Q 65 50, 63 48
|
|
Z"
|
|
fill="url(#bell-gradient)"
|
|
stroke="#c0392b"
|
|
stroke-width="1.5"
|
|
stroke-linejoin="round"/>
|
|
|
|
<!-- Bell bottom opening/rim - inner darker -->
|
|
<ellipse cx="60" cy="78" rx="11.5" ry="3" fill="#7f2318"/>
|
|
<!-- Bell bottom rim - outer edge -->
|
|
<ellipse cx="60" cy="78" rx="12" ry="3.5" fill="none" stroke="#a93226" stroke-width="1.5"/>
|
|
|
|
<!-- Small clapper visible at bottom -->
|
|
<ellipse cx="60" cy="77.5" rx="3" ry="2" fill="#95a5a6"/>
|
|
</g>
|
|
</svg>
|
