git ssb

1
module.exports = solarpunkIcon
2
3
function solarpunkIcon () {
4
  return `
5
<svg
6
  xmlns="http://www.w3.org/2000/svg"
7
  xmlns:xlink="http://www.w3.org/1999/xlink"
8
  viewBox="-1 -1 2 2"
9
>
10
  ${moon.style}
11
  ${range({ start: 0, stop: 1, step: 1/8 })
12
      .map(index => moon({
13
        radius: 0.1,
14
        center: rotate({ angle: index * 2 * Math.PI, point: { x: 0, y: 0.5 } }),
15
        phase: index
16
      }))
17
      .join('\n')
18
   }
19
</svg>
20
`
21
}
22
23
function gear ({ center, numThreads, threadLength, centerLength }) {
24
  return `
25
<g>
26
    
27
</g>
28
`
29
}
30
31
function rotate ({ center = { x: 0, y: 0}, angle, point }) {
32
  const a = Math.atan2(point.y - center.y, point.x - center.x)
33
  const r = Math.sqrt(Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2))
34
  return {
35
    x: r * Math.cos(a + angle),
36
    y: r * Math.sin(a + angle)
37
  }
38
}
39
40
// inspired by https://github.com/tingletech/moon-phase
41
function moon ({ radius, center, phase }) {
42
  var sweep = []
43
  var mag
44
45
  // the "sweep-flag" and the direction of movement change every quarter moon
46
  // zero and one are both new moon; 0.50 is full moon
47
  if (phase <= 0.25) {
48
    sweep = [ 1, 0 ]
49
    mag = 1 - phase * 4
50
  } else if (phase <= 0.50) { 
51
    sweep = [ 0, 0 ]
52
    mag = (phase - 0.25) * 4
53
  } else if (phase <= 0.75) {
54
    sweep = [ 1, 1 ]
55
    mag = 1 - (phase - 0.50) * 4
56
  } else if (phase <= 1) {
57
    sweep = [ 0, 1 ]
58
    mag = (phase - 0.75) * 4
59
  } else { 
60
    throw new Error(`unexpected moon phase: ${phase}`)
61
  }
62
63
  // http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
64
  // http://www.i-programmer.info/programming/graphics-and-imaging/3254-svg-javascript-and-the-dom.html
65
66
    /*
67
  var d = "m100,0 ";
68
  d = d + "a" + mag + ",20 0 1," + sweep[0] + " 0,150 ";
69
  d = d + "a20,20 0 1," + sweep[1] + " 0,-150";
70
  */
71
72
  var r = radius / 5
73
74
  return `
75
    <style type="text/css">
76
      .moon {
77
        stroke: black;
78
        stroke-width: ${radius / 20};
79
      }
80
      .moon-front {
81
        fill: white;
82
      }
83
      .moon-back {
84
        fill: purple;
85
      }
86
    </style>
87
    <g class="moon">
88
      <path
89
        class="moon-back"
90
        d="M ${center.x},${center.y - radius / 2}
91
           a ${r},${r} 0 1,1 0,${radius}
92
           a ${r},${r} 0 1,1 0,-${radius}"
93
      />
94
      <path
95
        class="moon-front"
96
        d="M ${center.x},${center.y - radius / 2}
97
           a ${mag * r},${r} 0 1,${sweep[0]} 0,${radius}
98
           a ${r},${r} 0 1,${sweep[1]} 0,-${radius}"
99
      />
100
    </g>
101
  `
102
103
  // d="m100,0 a20,20 0 1,1 0,150 a20,20 0 1,1 0,-150"
104
}
105
106
// https://stackoverflow.com/a/44957114
107
function range ({ start = 0, stop, step = 1 }) {
108
  return Array(Math.ceil((stop - start) / step))
109
    .fill(start).map((x, y) => x + y * step)
110
}
111