hypr logo

by phloe

HTML

<svg viewBox="0 0 1000 500" width="1000" height="500" 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 body = unit * 3 + 2;
const diagonal = unit * Math.sqrt(2);


const hd = `
	M ${unit} ${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 ${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 - 1}
  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 + 1).toFixed(3)} ${unit})`);