Bluetooth Buddy Widget
A black status tile with a teal ring, On label and a smiling teal blob bobbing at the bottom.
Preview and code
index.html
<div class='fc' style='--c:#14b8a6'><span class='ic'>ᛒ</span><div class='rg'></div><b>On</b><div class='bl'><i class='e l'></i><i class='e r'></i><u></u></div></div>
styles.css
.fc{position:relative;width:200px;height:200px;margin:auto;background:#000;border-radius:30px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.3)}.fc .ic{position:absolute;right:16px;top:12px;font-size:14px;color:var(--c)}.fc .rg{position:absolute;left:50%;top:26px;width:112px;height:112px;margin-left:-56px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:50%;animation:pu 3s ease-in-out infinite}.fc b{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:17px;font-weight:600}.bl{position:absolute;left:50%;bottom:-62px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:var(--c);animation:fl 4s ease-in-out infinite}.e{position:absolute;top:34px;width:6px;height:6px;border-radius:50%;background:#fff;animation:bk 4s infinite}.e.l{left:56px}.e.r{right:56px}.bl u{position:absolute;left:50%;top:44px;width:20px;height:9px;margin-left:-10px;border-bottom:2.500px solid #fff;border-radius:0 0 20px 20px}@keyframes pu{50%{transform:scale(1.06);opacity:.6}}@keyframes fl{50%{transform:translateY(-6px)}}@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}@media(prefers-reduced-motion:reduce){.fc *{animation:none!important}}
About
A connectivity widget with a pulsing outline ring, a status word and a friendly blob character that blinks. CSS only; change the colour variable per state.