johnandersen777.bsky.social/knotless

Switch repository

Loading…

<!doctype html><link rel=stylesheet href=base.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=block">
<style>
body{background:#171717;color:#fff;position:relative}
svg{position:absolute;inset:0}
.copy{position:absolute;left:96px;top:96px;width:1000px}
.word{margin-bottom:210px}
.cmd{margin-top:54px;display:inline-block;font:500 25px 'JetBrains Mono';color:#fff;background:#262626;border-radius:12px;padding:20px 26px;white-space:nowrap}
.cmd i{font-style:normal;color:#8ab0ff}
</style>
<svg id=s viewBox="0 0 1600 900" fill=none stroke-linecap=round></svg>
<div class=copy><div class=word>~ knotless</div><h1>Git that lives in your<br>Atmosphere account.</h1>
<div class=cmd>git push <i>knotless://you.bsky.social/project</i> main</div></div>
<script>
// Lines of the logo's tilde, stacked like a weather map's isobars. None cross.
const s=document.getElementById('s');let d='';const N=46;
for(let i=0;i<N;i++){const y0=-60+i*(1020/N);let p='';
 for(let x=-20;x<=1640;x+=14){
  const u=x/1600,t=Math.min(1,Math.max(0,(u-.3)/.6)),fade=t*t*(3-2*t);
  const y=y0+fade*(92*Math.sin(u*6.2+i*.11)+46*Math.sin(u*2.6-i*.075));
  p+=(p?'L':'M')+x.toFixed(1)+' '+y.toFixed(1);}
 const o=(.16+.62*(i/N)).toFixed(2);d+=`<path d="${p}" stroke="#4f86f7" stroke-opacity="${o}" stroke-width="2.4"/>`;}
s.innerHTML=d;
// Clear the lines from behind the copy.
s.innerHTML+=`<defs><linearGradient id=g x2=1 y2=0><stop offset=.42 stop-color="#171717"/><stop offset=.7 stop-color="#171717" stop-opacity=0 /></linearGradient></defs><rect width=1600 height=900 fill="url(#g)" />`;
</script>