lokinet/contrib/lokinet-mac.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- our size/viewbox is positioned such that 0,0 is the center of the image (to simplify scaling and rotation). -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="-512px" y="-512px"
	 viewBox="-512 -512 1024 1024" style="enable-background:new -512 -512 1024 1024;" xml:space="preserve">
<style type="text/css">
	.bg{fill:#FFFFFF;}
</style>

<!--
    Draw the background shape in a 2x2 box (from -1 to 1 in each dimension), then scale it up
    (but not all the way to 512, because we want some padding around the outside.
-->
<g transform="scale(415)">
    <path class="bg" d="
        M 0.5 1
        H -0.5
        C -0.81,1 -1,0.81 -1,0.5
        V -0.5
        C -1,-0.81 -0.81,-1 -0.5,-1
        H 0.5
        C 0.81,-1 1,-0.81 1,-0.5
        V 0.5
        C 1,0.81 0.81,1 0.5,1
        z
        "/>
</g>

<g id="shape0">
  <!--
    Start with a simple 3x2 shape, where each unit we draw corresponds to 1 block edge length in the
    final diagram, and shift it so that 2.5x2.5 becomes the new origin (around which we will rotate).
    Then we rotate and scale it to the desired size.

    We can then copy that at 90, 180, 270 degree rotations to complete the logo.
    -->
  <g transform="rotate(45) scale(85) translate(-2.5, -2.5)">
    <polygon points="0,0 2,0 2,1 1,1 1,2 0,2"/>
    <rect x="1" y="2" width="1" height="1"/>
  </g>
</g>

<use xlink:href="#shape0" transform="rotate(90)"/>
<use xlink:href="#shape0" transform="rotate(180)"/>
<use xlink:href="#shape0" transform="rotate(270)"/>
</svg>