http://www.w3.org/2000/svg viewBox= 0 0 120 120 %3E%3Ccircle cx= 60 cy= 60 r= 50 fill= %23FF6B35 /%3E%3Ccircle cx= 45 cy= 45 r= 8 fill= white /%3E%3Ccircle cx= 75 cy= 45 r= 8 fill= white /%3E%3Cpath d= M40 75 Q60 90 80 75 stroke= white stroke-width= 3 fill= none /%3E%3C/svg%3E") no-repeat center; animation: ellie-bounce 2s infinite; } .slds-icon-ellie.slds-is-paused { animation-play-state: paused; } .slds-icon-ellie.slds-is-static { animation: none; } @keyframes ellie-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .slds-icon-eq { width: 60px; height: 60px; display: flex; align-items: flex-end; justify-content: space-between; padding: 10px; } .slds-icon-eq .bar { width: 8px; background: #0176d3; border-radius: 4px; animation: eq-bounce 1.5s infinite; } .slds-icon-eq .bar:nth-child(1) { height: 20px; animation-delay: 0s; } .slds-icon-eq .bar:nth-child(2) { height: 35px; animation-delay: 0.2s; } .slds-icon-eq .bar:nth-child(3) { height: 25px; animation-delay: 0.4s; } .slds-icon-eq .bar:nth-child(4) { height: 40px; animation-delay: 0.6s; } .slds-icon-eq .bar:nth-child(5) { height: 30px; animation-delay: 0.8s; } @keyframes eq-bounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.3); } } .slds-icon-global-action-help { width: 80px; height: 80px; background: url("data:image/svg+xml,%3Csvg xmlns= http://www.w3.org/2000/svg viewBox= 0 0 80 80 %3E%3Ccircle cx= 40 cy= 40 r= 35 fill= %2300D924 stroke= %23fff stroke-width= 2 /%3E%3Ctext x= 40 y= 50 text-anchor= middle fill= white font-size= 30 font-weight= bold %3E?\%3C/text%3E%3C/svg%3E") no-repeat center; animation: help-pulse 2s infinite; } @keyframes help-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .slds-icon-score { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#00D924 0deg 216deg, #e5e5e5 216deg 360deg); display: flex; align-items: center; justify-content: center; position: relative; animation: score-rotate 3s linear infinite; } .slds-icon-score::before { content: "60%"; color: #0176d3; font-weight: bold; font-size: 18px; } .slds-icon-score.positive { background: conic-gradient(#00D924 0deg 288deg, #e5e5e5 288deg 360deg); } .slds-icon-score.positive::before { content: "80%"; color: #00D924; } .slds-icon-score.negative { background: conic-gradient(#FF6B35 0deg 108deg, #e5e5e5 108deg 360deg); } .slds-icon-score.negative::before { content: "30%"; color: #FF6B35; } @keyframes score-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .slds-icon-strength { width: 80px; height: 60px; display: flex; align-items: flex-end; justify-content: space-between; padding: 10px; } .slds-icon-strength .strength-bar { width: 12px; background: #0176d3; border-radius: 2px; transition: height 0.3s ease; } .slds-icon-strength.strength-1 .strength-bar:nth-child(1) { height: 20px; } .slds-icon-strength.strength-1 .strength-bar:nth-child(2) { height: 5px; background: #e5e5e5; } .slds-icon-strength.strength-1 .strength-bar:nth-child(3) { height: 5px; background: #e5e5e5; } .slds-icon-strength.strength-2 .strength-bar:nth-child(1) { height: 20px; } .slds-icon-strength.strength-2 .strength-bar:nth-child(2) { height: 30px; } .slds-icon-strength.strength-2 .strength-bar:nth-child(3) { height: 5px; background: #e5e5e5; } .slds-icon-strength.strength-3 .strength-bar:nth-child(1) { height: 20px; } .slds-icon-strength.strength-3 .strength-bar:nth-child(2) { height: 30px; } .slds-icon-strength.strength-3 .strength-bar:nth-child(3) { height: 40px; } .slds-icon-strength.strength-negative-1 .strength-bar { background: #FF6B35; } .slds-icon-strength.strength-negative-1 .strength-bar:nth-child(1) { height: 20px; } .slds-icon-strength.strength-negative-1 .strength-bar:nth-child(2) { height: 5px; background: #e5e5e5; } .slds-icon-strength.strength-negative-1 .strength-bar:nth-child(3) { height: 5px; background: #e5e5e5; } .slds-icon-strength.animated { animation: strength-grow 2s ease-in-out; } @keyframes strength-grow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } .slds-icon-trend { width: 80px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns= http://www.w3.org/2000/svg viewBox= 0 0 80 60 %3E%3Cpath d= M10 50 L30 30 L50 35 L70 15 stroke= %2300D924 stroke-width= 3 fill= none /%3E%3Cpath d= M65 10 L70 15 L65 20 stroke= %2300D924 stroke-width= 2 fill= none /%3E%3C/svg%3E") no-repeat center; animation: trend-pulse 2s infinite; } .slds-icon-trend.down { background: url("data:image/svg+xml,%3Csvg xmlns= http://www.w3.org/2000/svg viewBox= 0 0 80 60 %3E%3Cpath d= M10 20 L30 40 L50 35 L70 50 stroke= %23FF6B35 stroke-width= 3 fill= none /%3E%3Cpath d= M65 45 L70 50 L65 55 stroke= %23FF6B35 stroke-width= 2 fill= none /%3E%3C/svg%3E") no-repeat center; } .slds-icon-trend.up { background: url("data:image/svg+xml,%3Csvg xmlns= http://www.w3.org/2000/svg viewBox= 0 0 80 60 %3E%3Cpath d= M10 50 L30 30 L50 35 L70 10 stroke= %2300D924 stroke-width= 3 fill= none /%3E%3Cpath d= M65 5 L70 10 L65 15 stroke= %2300D924 stroke-width= 2 fill= none /%3E%3C/svg%3E") no-repeat center; } .slds-icon-trend.slds-is-static { animation: none; } .slds-icon-trend.slds-is-paused { animation-play-state: paused; } @keyframes trend-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .slds-icon-typing { width: 80px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; } .slds-icon-typing .dot { width: 8px; height: 8px; background: #0176d3; border-radius: 50%; animation: typing-bounce 1.4s infinite; } .slds-icon-typing .dot:nth-child(1) { animation-delay: 0s; } .slds-icon-typing .dot:nth-child(2) { animation-delay: 0.2s; } .slds-icon-typing .dot:nth-child(3) { animation-delay: 0.4s; } .slds-icon-typing.slds-is-paused .dot { animation-play-state: paused; } .slds-icon-typing.slds-is-static .dot { animation: none; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } } .slds-icon-waffle { width: 60px; height: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; } .slds-icon-waffle .waffle-dot { background: #0176d3; border-radius: 50%; animation: waffle-scale 2s infinite; } .slds-icon-waffle .waffle-dot:nth-child(1) { animation-delay: 0s; } .slds-icon-waffle .waffle-dot:nth-child(2) { animation-delay: 0.1s; } .slds-icon-waffle .waffle-dot:nth-child(3) { animation-delay: 0.2s; } .slds-icon-waffle .waffle-dot:nth-child(4) { animation-delay: 0.3s; } .slds-icon-waffle .waffle-dot:nth-child(5) { animation-delay: 0.4s; } .slds-icon-waffle .waffle-dot:nth-child(6) { animation