SVG logo for using as avatar.

mxdvl-cmps.svg

<svg version="1"
  xmlns="http://www.w3.org/2000/svg"
  width="512" height="512"
  viewBox="0 0 16 16"
>
  <defs>
    <symbol id="cmps" fill="none" stroke-linecap="square">
      <path d="M8 2L8 14"/>
      <path d="M8 8L14 8"/>
      <circle cx="8" cy="8" r="4"/>
    </symbol>

    <pattern id="cmps-pattern"
      viewBox="0 0 16 16" width="2" height="2"
      patternUnits="userSpaceOnUse"
    >
      <g stroke-width="2" stroke="hsl(200, 96%, 6%)" opacity="0.24" fill="none">

        <g transform="translate(2 0) rotate(0 8 8) ">
          <path d="M8 3L8 13"/>
          <path d="M8 8L13 8"/>
        </g>

        <g transform="translate(2 0) rotate(180 6 8) ">
          <path d="M8 3L8 13"/>
          <path d="M8 8L13 8"/>
        </g>
      </g>

      <mask id="cmps-mask">
        <rect x="0" y="0" width="100" height="100" fill="white" />
        <use href="#cmps" stroke-width="2" stroke="black"/>
      </mask>

      <!-- <circle stroke="black" fill="none" opacity="0.06" cx="8" cy="8" r="5"/> -->
  </pattern>

  </defs>
  <rect width="16" height="16" fill="hsl(190, 89%, 12%)"/>
  <g mask="url(#cmps-mask)">
    <g transform="scale(2,2)" >
      <rect width="1024" height="1024" fill="url(#cmps-pattern)"/>
      <rect width="1024" height="1024" transform="translate(-1 -1)" fill="url(#cmps-pattern)"/>
    </g>
  </g>
  <!-- <use href="#cmps" stroke-width="2" stroke="hsl(200, 96%, 6%)"/> -->
  <use href="#cmps" stroke-width="1" stroke="hsl(200, 48%, 92%)"/>
</svg>

Exporting

vips copy mxdvl-cmps.svg mxdvl-cmps.png

Notes

viewBox="0 0 16 16" keeps the coordinates small, but a large size makes sure the default export size is still large. On very small size, it's better to always have 2px stroke, so some adjustment can be made to stroke-width.

Caveats: libvps requires the xlink: before href in <use /> tags and xmlns:xlink="http://www.w3.org/1999/xlink" to the SVG declaration.

Dependencies

Make sure VIPS is installed. Maybe use Homebrew? brew install vips