SVG Store bundle

Signal Social and Brand Pack

Eight expressive SVG moments for social products, communities, and brand surfaces.

Free 8 animations Free commercial license — unlimited personal and commercial use; attribution not required

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Signal Social and Brand Pack</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body{font-family:system-ui,sans-serif;margin:2rem;background:#f8fafc;color:#0f172a}section{margin:0 0 2rem;padding:1.5rem;border:1px solid #e2e8f0;background:#fff}svg{max-width:100%;height:auto}</style>
</head>
<body>
<h1>Signal Social and Brand Pack</h1>
<p>Eight expressive SVG moments for social products, communities, and brand surfaces.</p>
<section data-animation="follow-badge-pop">
<h2>Follow Badge Pop</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-0beb5675be8a-sva-follow-badge-pop" role="img" aria-labelledby="sva-0beb5675be8a-sva-follow-badge-pop-title sva-0beb5675be8a-sva-follow-badge-pop-desc"><title id="sva-0beb5675be8a-sva-follow-badge-pop-title">Follow Badge Pop</title><desc id="sva-0beb5675be8a-sva-follow-badge-pop-desc">A profile follow state resolves with a positive badge pop.</desc><defs><linearGradient id="sva-0beb5675be8a-sva-follow-badge-pop-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-0beb5675be8a-sva-follow-badge-pop{overflow:visible;background:#07111f}#sva-0beb5675be8a-sva-follow-badge-pop .spin{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-spin 5s linear infinite}#sva-0beb5675be8a-sva-follow-badge-pop .reverse{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-reverse 4s linear infinite}#sva-0beb5675be8a-sva-follow-badge-pop .pulse{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .float{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-0beb5675be8a-sva-follow-badge-pop-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .dash{animation:sva-0beb5675be8a-sva-follow-badge-pop-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .pop{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-0beb5675be8a-sva-follow-badge-pop-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .shake{transform-box:fill-box;transform-origin:center top;animation:sva-0beb5675be8a-sva-follow-badge-pop-shake 3s ease-in-out infinite}#sva-0beb5675be8a-sva-follow-badge-pop .slide{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .sweep{animation:sva-0beb5675be8a-sva-follow-badge-pop-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .travel{animation:sva-0beb5675be8a-sva-follow-badge-pop-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-0beb5675be8a-sva-follow-badge-pop-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .d2{animation-delay:-.7s}#sva-0beb5675be8a-sva-follow-badge-pop .d3{animation-delay:-1.35s}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-spin{to{transform:rotate(360deg)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-reverse{to{transform:rotate(-360deg)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-0beb5675be8a-sva-follow-badge-pop *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><circle cx="68" cy="69" r="26" fill="#EC4899" fill-opacity=".18" stroke="#FDF2F8" stroke-width="3"/><circle cx="68" cy="62" r="10" fill="url(#sva-0beb5675be8a-sva-follow-badge-pop-g)"/><path d="M49 85c4-13 34-13 38 0" fill="#EC4899"/><g class="pop"><circle cx="108" cy="103" r="24" fill="#8B5CF6"/><path d="M108 90v26M95 103h26" stroke="#fff" stroke-width="5" stroke-linecap="round"/></g></svg>
</section>
<section data-animation="heart-reaction-burst">
<h2>Heart Reaction Burst</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-7e1e8f4355d7-sva-heart-reaction-burst" role="img" aria-labelledby="sva-7e1e8f4355d7-sva-heart-reaction-burst-title sva-7e1e8f4355d7-sva-heart-reaction-burst-desc"><title id="sva-7e1e8f4355d7-sva-heart-reaction-burst-title">Heart Reaction Burst</title><desc id="sva-7e1e8f4355d7-sva-heart-reaction-burst-desc">A heart reaction blooms with controlled celebratory accents.</desc><defs><linearGradient id="sva-7e1e8f4355d7-sva-heart-reaction-burst-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-7e1e8f4355d7-sva-heart-reaction-burst{overflow:visible;background:#07111f}#sva-7e1e8f4355d7-sva-heart-reaction-burst .spin{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-spin 5s linear infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .reverse{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-reverse 4s linear infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .pulse{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .float{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .dash{animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .pop{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .shake{transform-box:fill-box;transform-origin:center top;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-shake 3s ease-in-out infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .slide{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .sweep{animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .travel{animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .d2{animation-delay:-.7s}#sva-7e1e8f4355d7-sva-heart-reaction-burst .d3{animation-delay:-1.35s}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-spin{to{transform:rotate(360deg)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-reverse{to{transform:rotate(-360deg)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-7e1e8f4355d7-sva-heart-reaction-burst *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path class="pulse" d="M80 118S42 95 42 64c0-17 21-25 38-7 17-18 38-10 38 7 0 31-38 54-38 54z" fill="url(#sva-7e1e8f4355d7-sva-heart-reaction-burst-g)"/><g class="pop" fill="#8B5CF6"><circle cx="38" cy="38" r="5"/><circle cx="122" cy="38" r="5"/><path d="M127 90l4 8 8 4-8 4-4 8-4-8-8-4 8-4z"/></g></svg>
</section>
<section data-animation="connected-share-orbit">
<h2>Connected Share Orbit</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-8337e170e55c-sva-connected-share-orbit" role="img" aria-labelledby="sva-8337e170e55c-sva-connected-share-orbit-title sva-8337e170e55c-sva-connected-share-orbit-desc"><title id="sva-8337e170e55c-sva-connected-share-orbit-title">Connected Share Orbit</title><desc id="sva-8337e170e55c-sva-connected-share-orbit-desc">Three share nodes connect and pulse in sequence.</desc><defs><linearGradient id="sva-8337e170e55c-sva-connected-share-orbit-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-8337e170e55c-sva-connected-share-orbit{overflow:visible;background:#07111f}#sva-8337e170e55c-sva-connected-share-orbit .spin{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-spin 5s linear infinite}#sva-8337e170e55c-sva-connected-share-orbit .reverse{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-reverse 4s linear infinite}#sva-8337e170e55c-sva-connected-share-orbit .pulse{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .float{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-8337e170e55c-sva-connected-share-orbit-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .dash{animation:sva-8337e170e55c-sva-connected-share-orbit-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .pop{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-8337e170e55c-sva-connected-share-orbit .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-8337e170e55c-sva-connected-share-orbit-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .shake{transform-box:fill-box;transform-origin:center top;animation:sva-8337e170e55c-sva-connected-share-orbit-shake 3s ease-in-out infinite}#sva-8337e170e55c-sva-connected-share-orbit .slide{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .sweep{animation:sva-8337e170e55c-sva-connected-share-orbit-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .travel{animation:sva-8337e170e55c-sva-connected-share-orbit-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-8337e170e55c-sva-connected-share-orbit-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .d2{animation-delay:-.7s}#sva-8337e170e55c-sva-connected-share-orbit .d3{animation-delay:-1.35s}@keyframes sva-8337e170e55c-sva-connected-share-orbit-spin{to{transform:rotate(360deg)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-reverse{to{transform:rotate(-360deg)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-8337e170e55c-sva-connected-share-orbit *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path class="draw" d="M53 80l50-30M53 80l50 30" stroke="#EC4899" stroke-width="5"/><g fill="url(#sva-8337e170e55c-sva-connected-share-orbit-g)" stroke="#FDF2F8" stroke-width="3"><circle class="pulse" cx="45" cy="80" r="14"/><circle class="pulse d2" cx="113" cy="42" r="14"/><circle class="pulse d3" cx="113" cy="118" r="14"/></g></svg>
</section>
<section data-animation="signal-logo-facet-reveal">
<h2>Signal Logo Facet Reveal</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-87475273d4ba-sva-signal-logo-facet-reveal" role="img" aria-labelledby="sva-87475273d4ba-sva-signal-logo-facet-reveal-title sva-87475273d4ba-sva-signal-logo-facet-reveal-desc"><title id="sva-87475273d4ba-sva-signal-logo-facet-reveal-title">Signal Logo Facet Reveal</title><desc id="sva-87475273d4ba-sva-signal-logo-facet-reveal-desc">A faceted brand mark draws and settles with premium restraint.</desc><defs><linearGradient id="sva-87475273d4ba-sva-signal-logo-facet-reveal-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-87475273d4ba-sva-signal-logo-facet-reveal{overflow:visible;background:#07111f}#sva-87475273d4ba-sva-signal-logo-facet-reveal .spin{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-spin 5s linear infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .reverse{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-reverse 4s linear infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .pulse{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .float{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .dash{animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .pop{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .shake{transform-box:fill-box;transform-origin:center top;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-shake 3s ease-in-out infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .slide{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .sweep{animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .travel{animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .d2{animation-delay:-.7s}#sva-87475273d4ba-sva-signal-logo-facet-reveal .d3{animation-delay:-1.35s}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-spin{to{transform:rotate(360deg)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-reverse{to{transform:rotate(-360deg)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-87475273d4ba-sva-signal-logo-facet-reveal *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><g class="spin" fill="none" stroke="url(#sva-87475273d4ba-sva-signal-logo-facet-reveal-g)" stroke-width="5" stroke-linejoin="round"><path class="draw" d="M80 25l47 55-47 55-47-55z"/><path class="draw d2" d="M80 48l28 32-28 32-28-32z"/></g><circle class="pulse" cx="80" cy="80" r="9" fill="#FDF2F8"/></svg>
</section>
<section data-animation="live-broadcast-signal">
<h2>Live Broadcast Signal</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-a54a9b3ba549-sva-live-broadcast-signal" role="img" aria-labelledby="sva-a54a9b3ba549-sva-live-broadcast-signal-title sva-a54a9b3ba549-sva-live-broadcast-signal-desc"><title id="sva-a54a9b3ba549-sva-live-broadcast-signal-title">Live Broadcast Signal</title><desc id="sva-a54a9b3ba549-sva-live-broadcast-signal-desc">Concentric broadcast rings pulse from a live center.</desc><defs><linearGradient id="sva-a54a9b3ba549-sva-live-broadcast-signal-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-a54a9b3ba549-sva-live-broadcast-signal{overflow:visible;background:#07111f}#sva-a54a9b3ba549-sva-live-broadcast-signal .spin{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-spin 5s linear infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .reverse{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-reverse 4s linear infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .pulse{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .float{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .dash{animation:sva-a54a9b3ba549-sva-live-broadcast-signal-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .pop{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .shake{transform-box:fill-box;transform-origin:center top;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-shake 3s ease-in-out infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .slide{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .sweep{animation:sva-a54a9b3ba549-sva-live-broadcast-signal-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .travel{animation:sva-a54a9b3ba549-sva-live-broadcast-signal-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .d2{animation-delay:-.7s}#sva-a54a9b3ba549-sva-live-broadcast-signal .d3{animation-delay:-1.35s}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-spin{to{transform:rotate(360deg)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-reverse{to{transform:rotate(-360deg)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-a54a9b3ba549-sva-live-broadcast-signal *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><circle class="pulse" cx="80" cy="80" r="13" fill="#8B5CF6"/><circle class="pulse" cx="80" cy="80" r="31" fill="none" stroke="#EC4899" stroke-width="5"/><circle class="pulse d2" cx="80" cy="80" r="52" fill="none" stroke="#EC4899" stroke-opacity=".45" stroke-width="5"/><text x="80" y="143" fill="#FDF2F8" font-size="14" font-weight="700" text-anchor="middle" font-family="system-ui,sans-serif" letter-spacing="3">LIVE</text></svg>
</section>
<section data-animation="creator-achievement-star">
<h2>Creator Achievement Star</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-f6992c630345-sva-creator-achievement-star" role="img" aria-labelledby="sva-f6992c630345-sva-creator-achievement-star-title sva-f6992c630345-sva-creator-achievement-star-desc"><title id="sva-f6992c630345-sva-creator-achievement-star-title">Creator Achievement Star</title><desc id="sva-f6992c630345-sva-creator-achievement-star-desc">A creator star draws in and receives a subtle victory orbit.</desc><defs><linearGradient id="sva-f6992c630345-sva-creator-achievement-star-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-f6992c630345-sva-creator-achievement-star{overflow:visible;background:#07111f}#sva-f6992c630345-sva-creator-achievement-star .spin{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-spin 5s linear infinite}#sva-f6992c630345-sva-creator-achievement-star .reverse{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-reverse 4s linear infinite}#sva-f6992c630345-sva-creator-achievement-star .pulse{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .float{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-f6992c630345-sva-creator-achievement-star-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .dash{animation:sva-f6992c630345-sva-creator-achievement-star-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .pop{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-f6992c630345-sva-creator-achievement-star .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-f6992c630345-sva-creator-achievement-star-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .shake{transform-box:fill-box;transform-origin:center top;animation:sva-f6992c630345-sva-creator-achievement-star-shake 3s ease-in-out infinite}#sva-f6992c630345-sva-creator-achievement-star .slide{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .sweep{animation:sva-f6992c630345-sva-creator-achievement-star-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .travel{animation:sva-f6992c630345-sva-creator-achievement-star-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-f6992c630345-sva-creator-achievement-star-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .d2{animation-delay:-.7s}#sva-f6992c630345-sva-creator-achievement-star .d3{animation-delay:-1.35s}@keyframes sva-f6992c630345-sva-creator-achievement-star-spin{to{transform:rotate(360deg)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-reverse{to{transform:rotate(-360deg)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-f6992c630345-sva-creator-achievement-star-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-f6992c630345-sva-creator-achievement-star-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-f6992c630345-sva-creator-achievement-star-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-f6992c630345-sva-creator-achievement-star-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-f6992c630345-sva-creator-achievement-star-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-f6992c630345-sva-creator-achievement-star-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-f6992c630345-sva-creator-achievement-star-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-f6992c630345-sva-creator-achievement-star *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path class="draw" d="M80 25l14 29 32 5-23 23 6 33-29-16-29 16 6-33-23-23 32-5z" fill="#EC4899" fill-opacity=".18" stroke="url(#sva-f6992c630345-sva-creator-achievement-star-g)" stroke-width="5"/><g class="spin" fill="#8B5CF6"><circle cx="80" cy="19" r="4"/><circle cx="137" cy="80" r="4"/><circle cx="23" cy="80" r="4"/></g><circle class="pulse" cx="80" cy="80" r="10" fill="#FDF2F8"/></svg>
</section>
<section data-animation="message-typing-glow">
<h2>Message Typing Glow</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-f94cdac62259-sva-message-typing-glow" role="img" aria-labelledby="sva-f94cdac62259-sva-message-typing-glow-title sva-f94cdac62259-sva-message-typing-glow-desc"><title id="sva-f94cdac62259-sva-message-typing-glow-title">Message Typing Glow</title><desc id="sva-f94cdac62259-sva-message-typing-glow-desc">A refined message bubble with staggered typing lights.</desc><defs><linearGradient id="sva-f94cdac62259-sva-message-typing-glow-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-f94cdac62259-sva-message-typing-glow{overflow:visible;background:#07111f}#sva-f94cdac62259-sva-message-typing-glow .spin{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-spin 5s linear infinite}#sva-f94cdac62259-sva-message-typing-glow .reverse{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-reverse 4s linear infinite}#sva-f94cdac62259-sva-message-typing-glow .pulse{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .float{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-f94cdac62259-sva-message-typing-glow-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .dash{animation:sva-f94cdac62259-sva-message-typing-glow-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .pop{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-f94cdac62259-sva-message-typing-glow .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-f94cdac62259-sva-message-typing-glow-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .shake{transform-box:fill-box;transform-origin:center top;animation:sva-f94cdac62259-sva-message-typing-glow-shake 3s ease-in-out infinite}#sva-f94cdac62259-sva-message-typing-glow .slide{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .sweep{animation:sva-f94cdac62259-sva-message-typing-glow-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .travel{animation:sva-f94cdac62259-sva-message-typing-glow-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-f94cdac62259-sva-message-typing-glow-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .d2{animation-delay:-.7s}#sva-f94cdac62259-sva-message-typing-glow .d3{animation-delay:-1.35s}@keyframes sva-f94cdac62259-sva-message-typing-glow-spin{to{transform:rotate(360deg)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-reverse{to{transform:rotate(-360deg)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-f94cdac62259-sva-message-typing-glow-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-f94cdac62259-sva-message-typing-glow-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-f94cdac62259-sva-message-typing-glow-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-f94cdac62259-sva-message-typing-glow-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-f94cdac62259-sva-message-typing-glow-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-f94cdac62259-sva-message-typing-glow-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-f94cdac62259-sva-message-typing-glow-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-f94cdac62259-sva-message-typing-glow *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path d="M28 42h104v72H75l-22 18 3-18H28z" fill="#EC4899" fill-opacity=".16" stroke="#FDF2F8" stroke-width="3" stroke-linejoin="round"/><g fill="url(#sva-f94cdac62259-sva-message-typing-glow-g)"><circle class="pulse" cx="59" cy="78" r="8"/><circle class="pulse d2" cx="80" cy="78" r="8"/><circle class="pulse d3" cx="101" cy="78" r="8"/></g></svg>
</section>
<section data-animation="avatar-presence-orbit">
<h2>Avatar Presence Orbit</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-fee9f6b84829-sva-avatar-presence-orbit" role="img" aria-labelledby="sva-fee9f6b84829-sva-avatar-presence-orbit-title sva-fee9f6b84829-sva-avatar-presence-orbit-desc"><title id="sva-fee9f6b84829-sva-avatar-presence-orbit-title">Avatar Presence Orbit</title><desc id="sva-fee9f6b84829-sva-avatar-presence-orbit-desc">An avatar gains an orbiting presence indicator and halo.</desc><defs><linearGradient id="sva-fee9f6b84829-sva-avatar-presence-orbit-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-fee9f6b84829-sva-avatar-presence-orbit{overflow:visible;background:#07111f}#sva-fee9f6b84829-sva-avatar-presence-orbit .spin{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-spin 5s linear infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .reverse{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-reverse 4s linear infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .pulse{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .float{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .dash{animation:sva-fee9f6b84829-sva-avatar-presence-orbit-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .pop{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .shake{transform-box:fill-box;transform-origin:center top;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-shake 3s ease-in-out infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .slide{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .sweep{animation:sva-fee9f6b84829-sva-avatar-presence-orbit-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .travel{animation:sva-fee9f6b84829-sva-avatar-presence-orbit-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .d2{animation-delay:-.7s}#sva-fee9f6b84829-sva-avatar-presence-orbit .d3{animation-delay:-1.35s}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-spin{to{transform:rotate(360deg)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-reverse{to{transform:rotate(-360deg)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-fee9f6b84829-sva-avatar-presence-orbit *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="78" r="38" fill="#EC4899" fill-opacity=".17" stroke="#FDF2F8" stroke-width="3"/><circle cx="80" cy="68" r="14" fill="url(#sva-fee9f6b84829-sva-avatar-presence-orbit-g)"/><path d="M55 101c6-18 44-18 50 0" fill="#EC4899"/><g class="spin"><circle cx="80" cy="25" r="7" fill="#8B5CF6"/><circle cx="130" cy="80" r="5" fill="#FDF2F8"/><circle cx="30" cy="80" r="5" fill="#EC4899"/></g></svg>
</section>
</body>
</html>

Download

Included assets

An avatar gains an orbiting presence indicator and halo.

Download