<!-- loads the entire Variable Font -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=favorite,home,search,settings" rel="stylesheet" />
<div class="pulse">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
.pulse {
animation: pulse 3s infinite;
}
@keyframes pulse {
0% {
font-variation-settings: 'wght' 100;
}
50% {
font-variation-settings: 'wght' 700;
}
100% {
font-variation-settings: 'wght' 100;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.