hypr logo

by phloe

HTML

<svg viewBox="0 0 646 321" fill="#FFF">
  <path id="h" d="" />
  <path id="y" d="" />
  <path id="p" d="" />
  <path id="r" d="" />
</svg>

CSS

body {
  background-color: #000;
}

JavaScript

const unit = 80;
const stroke = 10;
const body = unit * 3 + 1;
const diagonal = stroke * Math.sqrt(2);


const hd = `
	M ${stroke} ${unit}
	v ${-unit}
  h ${-stroke}
  v ${body}
  h ${stroke}
  v ${-(body - (diagonal + unit)).toFixed(3)}
  l ${(body - (diagonal + unit)).toFixed(3)} ${(body - (diagonal + unit)).toFixed(3)}
  H ${body}
  Z`;

h.setAttribute("d", hd);

const yd = `
	M ${body - unit} ${body - unit}
	v ${unit}
  h ${unit}
  v ${-body}
  h ${-unit}
  v ${(body - (diagonal + unit)).toFixed(3)}
  l ${-(body - (diagonal + unit)).toFixed(3)} ${-(body - (diagonal + unit)).toFixed(3)}
  H 0
  Z`;

y.setAttribute("d", yd);
y.setAttribute("transform", `translate(${(unit + Math.sqrt(2)).toFixed(3)} ${unit})`);

const pd = `
	M ${body} 0
  h ${-body}
  v ${unit}
  h ${(body - (diagonal + unit)).toFixed(3)}
  l ${-(body - (diagonal + unit)).toFixed(3)} ${(body - (diagonal + unit)).toFixed(3)}
  V ${body}
  h ${unit}
  v ${-unit}
  Z`;

p.setAttribute("d", pd);
p.setAttribute("transform", `translate(${(unit + Math.sqrt(2) + body + 1).toFixed(3)} ${unit})`);

const rd = `
	M ${diagonal.toFixed(3)} ${body - unit}
  l ${unit + 1} ${-(unit + 1)}
  H ${body}
  v ${-unit}
  h ${-unit}
  l ${-(body - unit)} ${body - unit}
  Z`;

r.setAttribute("d", rd);
r.setAttribute("transform", `translate(${(unit + Math.sqrt(2) + body + 1 + unit + Math.sqrt(2)).toFixed(3)} ${unit})`);