Logo SVG

by soulwire

CSS

html, body {
  background: #181818;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes scalein {
  to {
    transform: none;
  }
}
svg {
  background: transparent;
  margin: 50px;
}
svg path {
  stroke-dasharray: 23.69999885559082;
  stroke-dashoffset: -23.69999885559082;
  animation: dash 1.2s ease-in-out forwards 0.3s;
}
svg .r1 {
  transform: scale(0,0);
  animation: scalein 0.25s linear forwards 0.25s;
}
svg .r2 {
  transform: scale(0,0);
  animation: scalein 0.25s linear forwards 0s;
}

Babel + JSX

const t = 2.1;
const p = [
	[10 - t/2, t/2],
  [t/2, t/2],
  [t/2, t/2 + 5 - t/2],
  [10 - t/2, t/2 + 5 - t/2],
  [10 - t/2, 10 - t/2]
]
const a = p.map((p, i) => (i ? 'L' : 'M') + p.join(',')).join(' ');
const u = 14.14213562373095;
const svg = `
<svg width="32px" height="32px" viewBox="0 0 ${u} ${u}">
  <g  
  	transform=" translate(${u/2},${0}) rotate(45)">
    <path stroke-linecap="square" stroke-width="${t}" fill="none" stroke="#fff" d="${a}"/>
    
    
    <g transform="translate(${t/2},${10 - t/2})">
    	<rect class="r1" stroke="none" fill="#fff" x="${-t/2}" y="${-t/2}" width="${t}" height="${t}"/>
    </g>
    <g  transform="translate(${6 - t/2},${10 - t/2})">
    	<rect class="r2" stroke="none" fill="#fff" x="${-t/2}" y="${-t/2}" width="${t}" height="${t}"/>
    </g>
    <_line class="l1" x1="${t/2}" y1="${1 - t/2}" x2="${t/2}" y2="${1 - t/2}"/>
    <_line class="l2" x1="${0.6 - t/2}" y1="${1 - t/2}" x2="${0.6 - t/2}" y2="${1 - t/2}"/>
  </g>
</svg>
`;
document.body.innerHTML = svg;
const path = document.querySelector('svg path');
const computeRotatedBounds = (width, height, angle) => {
  const sin = Math.abs(Math.sin(angle))
  const cos = Math.abs(Math.cos(angle))
  return [
    height * sin + width * cos,
    width * sin + height * cos
  ]
}
console.log(computeRotatedBounds(1, 1, -45 * Math.PI / 180))