assets/whistle-banner.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 480" width="1200" height="480" role="img" aria-label="Cactus Whistle, speech recognition for tiny devices">
<style>svg{--t0:0.0s}.s{animation-duration:9.0s;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:calc(0s - var(--t0))}@keyframes draw{0%{stroke-dashoffset:1;opacity:1}2.22%{stroke-dashoffset:1}28.89%{stroke-dashoffset:0}93.33%{stroke-dashoffset:0;opacity:1}98.89%{opacity:0}100%{opacity:0;stroke-dashoffset:1}}.draw{animation-name:draw;animation-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes word{0%{width:0}17.78%{width:0}32.22%{width:680px}93.33%{width:680px}98.89%{width:0}100%{width:0}}.word{animation-name:word;animation-timing-function:steps(14,end)}@keyframes bar0{0%{transform:scaleY(0);opacity:0}33.33%{transform:scaleY(0);opacity:0}37.73%{transform:scaleY(1);opacity:1}93.33%{transform:scaleY(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleY(0)}}.bar0{animation-name:bar0;transform-box:fill-box;transform-origin:center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes bar1{0%{transform:scaleY(0);opacity:0}34.43%{transform:scaleY(0);opacity:0}38.83%{transform:scaleY(1);opacity:1}93.33%{transform:scaleY(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleY(0)}}.bar1{animation-name:bar1;transform-box:fill-box;transform-origin:center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes bar2{0%{transform:scaleY(0);opacity:0}35.53%{transform:scaleY(0);opacity:0}39.93%{transform:scaleY(1);opacity:1}93.33%{transform:scaleY(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleY(0)}}.bar2{animation-name:bar2;transform-box:fill-box;transform-origin:center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes bar3{0%{transform:scaleY(0);opacity:0}36.63%{transform:scaleY(0);opacity:0}41.03%{transform:scaleY(1);opacity:1}93.33%{transform:scaleY(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleY(0)}}.bar3{animation-name:bar3;transform-box:fill-box;transform-origin:center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes bar4{0%{transform:scaleY(0);opacity:0}37.73%{transform:scaleY(0);opacity:0}42.13%{transform:scaleY(1);opacity:1}93.33%{transform:scaleY(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleY(0)}}.bar4{animation-name:bar4;transform-box:fill-box;transform-origin:center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes bar5{0%{transform:scaleY(0);opacity:0}38.83%{transform:scaleY(0);opacity:0}43.23%{transform:scaleY(1);opacity:1}93.33%{transform:scaleY(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleY(0)}}.bar5{animation-name:bar5;transform-box:fill-box;transform-origin:center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes bar6{0%{transform:scaleY(0);opacity:0}39.93%{transform:scaleY(0);opacity:0}44.33%{transform:scaleY(1);opacity:1}93.33%{transform:scaleY(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleY(0)}}.bar6{animation-name:bar6;transform-box:fill-box;transform-origin:center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes rule{0%{transform:scaleX(0);opacity:1}35.56%{transform:scaleX(0)}44.44%{transform:scaleX(1)}93.33%{transform:scaleX(1);opacity:1}98.89%{opacity:0}100%{opacity:0;transform:scaleX(1)}}.rule{animation-name:rule;transform-box:fill-box;transform-origin:left center;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes tag{0%{opacity:0}42.22%{opacity:0}47.78%{opacity:1}93.33%{opacity:1}98.89%{opacity:0}100%{opacity:0}}.tag{animation-name:tag}@media (prefers-reduced-motion:reduce){.s{animation:none!important}.draw{stroke-dashoffset:0}.word{width:680px}.tag{opacity:1}.rule{transform:scaleX(1)}[class*=bar]{opacity:1;transform:none}}</style>
<defs><clipPath id="cw"><rect class="s word" x="430" y="150" width="0" height="130"/></clipPath></defs>
<rect width="1200" height="480" fill="#0e0e10"/>
<g transform="translate(64 72) scale(0.37)">
<path class="s draw" d="M 272 848 L 272 545 C 272 534 262 530 222 530 A 190 190 0 0 1 32 340 L 32 170 A 64 64 0 0 1 160 170 L 160 340 C 160 372 187 399 219 399 L 272 399 L 272 207 A 175 175 0 0 1 623 207 L 623 620 C 623 645 640 655 665 655 L 736 655 L 736 432 A 64 64 0 0 1 864 432 L 864 640 A 163 163 0 0 1 701 803 L 655 803 C 636 803 623 815 623 835 L 623 848" fill="none" stroke="#ffffff" stroke-width="64" stroke-linejoin="round" stroke-linecap="butt" pathLength="1" stroke-dasharray="1"/>
</g>
<text x="430" y="248" font-family="Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="86" font-weight="600" fill="#ffffff" letter-spacing="-2.5" clip-path="url(#cw)">Cactus Whistle</text>
<rect class="s bar0" x="1062" y="199" width="9" height="36" rx="4.5" fill="#e8593d"/>
<rect class="s bar1" x="1077" y="186" width="9" height="62" rx="4.5" fill="#e8593d"/>
<rect class="s bar2" x="1092" y="177" width="9" height="80" rx="4.5" fill="#e8593d"/>
<rect class="s bar3" x="1107" y="191" width="9" height="52" rx="4.5" fill="#e8593d"/>
<rect class="s bar4" x="1122" y="181" width="9" height="72" rx="4.5" fill="#e8593d"/>
<rect class="s bar5" x="1137" y="195" width="9" height="44" rx="4.5" fill="#e8593d"/>
<rect class="s bar6" x="1152" y="204" width="9" height="26" rx="4.5" fill="#e8593d"/>
<rect class="s rule" x="430" y="274" width="690" height="3" rx="1.5" fill="#e8593d"/>
<text class="s tag" x="430" y="322" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="18" letter-spacing="1.5" fill="#85827a">SPEECH RECOGNITION FOR TINY DEVICES</text>
</svg>