XpleX branding with SVG.js

by Debloper

HTML

<div id="matrix">
  <div id="logo"></div>
  <div id="type">xplex</div>
</div>

CSS

#matrix {
  padding: 128px;
  text-align: center;
  font-family: Sans-serif;

  color: #011;
  background: #eee;
}

#type {
  font-size: 3rem;
  font-weight: bold;
}

JavaScript

var draw = SVG('logo')
draw.width(128).height(128)
draw.viewbox(0, 0, 64, 64)

draw
  .polyline('2,2 16,2 30,16 30,34 48,34 62,48 62,62 48,62 32,46 16,62 2,62 2,48 18,32 2,16 2,2')
  .attr({
    fill: '#011',
    stroke: '#011',
    'stroke-width': '4',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })

draw
  .polyline('62,2 62,16 48,30 34,30 34,16 48,2 62,2')
  .attr({
    fill: '#ccc',
    stroke: '#ccc',
    'stroke-width': '4',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })