| index.jsView |
|---|
| 1 | 1 … | module.exports = solarpunkIcon |
| 2 | 2 … | |
| 3 | 3 … | function solarpunkIcon () { |
| 4 | 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 | | -` |
| 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 … | + ${moons({ moonRadius: 0.1, centerRadius: 0.7 })} |
| 11 … | + ${gears({ centerRadius: 0.15, toothLength: 0.3, toothWidth: 0.2 })} |
| 12 … | + </svg> |
| 13 … | + ` |
| 21 | 14 … | } |
| 22 | 15 … | |
| 23 | | -function gear ({ center, numThreads, threadLength, centerLength }) { |
| 16 … | +function gears ({ centerRadius, toothLength, toothWidth }) { |
| 24 | 17 … | return ` |
| 25 | | -<g> |
| 26 | | - |
| 27 | | -</g> |
| 28 | | -` |
| 18 … | + <style type="text/css"> |
| 19 … | + .gear { |
| 20 … | + stroke: black; |
| 21 … | + stroke-width: ${toothLength / 20}; |
| 22 … | + } |
| 23 … | + .gear-tooth { |
| 24 … | + fill: purple; |
| 25 … | + } |
| 26 … | + </style> |
| 27 … | + <g class="gear"> |
| 28 … | + ${range({ start: 0, stop: 1, step: 1/8 }) |
| 29 … | + .map(index => gearTooth({ |
| 30 … | + angle: (1/16 + index) * 2 * Math.PI, |
| 31 … | + offset: centerRadius, |
| 32 … | + length: toothLength, |
| 33 … | + width: toothWidth |
| 34 … | + })) |
| 35 … | + .join('\n') |
| 36 … | + } |
| 37 … | + </g> |
| 38 … | + ` |
| 29 | 39 … | } |
| 30 | 40 … | |
| 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 | | - } |
| 41 … | +function gearTooth ({ angle, offset, length, width }) { |
| 42 … | + return ` |
| 43 … | + <g |
| 44 … | + class="gear-tooth" |
| 45 … | + transform="rotate(${angle * 180 / Math.PI})" |
| 46 … | + > |
| 47 … | + <rect x="${-width / 2}" y="${offset}" height="${length}" width="${width}" /> |
| 48 … | + </g> |
| 49 … | + ` |
| 38 | 50 … | } |
| 39 | 51 … | |
| 52 … | +function moons ({ moonRadius, centerRadius }) { |
| 53 … | + return ` |
| 54 … | + <style type="text/css"> |
| 55 … | + .moon { |
| 56 … | + stroke: black; |
| 57 … | + stroke-width: ${moonRadius / 20}; |
| 58 … | + } |
| 59 … | + .moon-front { |
| 60 … | + fill: white; |
| 61 … | + } |
| 62 … | + .moon-back { |
| 63 … | + fill: purple; |
| 64 … | + } |
| 65 … | + </style> |
| 66 … | + ${range({ start: 0, stop: 1, step: 1/8 }) |
| 67 … | + .map(index => moon({ |
| 68 … | + radius: moonRadius, |
| 69 … | + center: rotate({ angle: index * 2 * Math.PI, point: { x: 0, y: centerRadius } }), |
| 70 … | + phase: index |
| 71 … | + })) |
| 72 … | + .join('\n') |
| 73 … | + } |
| 74 … | + ` |
| 75 … | +} |
| 76 … | + |
| 40 | 77 … | |
| 41 | 78 … | function moon ({ radius, center, phase }) { |
| 42 | 79 … | var sweep = [] |
| 43 | 80 … | var mag |
| 62 | 99 … | |
| 63 | 100 … | |
| 64 | 101 … | |
| 65 | 102 … | |
| 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 | 103 … | var r = radius / 5 |
| 73 | 104 … | |
| 74 | 105 … | 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 | 106 … | <g class="moon"> |
| 88 | 107 … | <path |
| 89 | 108 … | class="moon-back" |
| 90 | 109 … | d="M ${center.x},${center.y - radius / 2} |
| 98 | 117 … | a ${r},${r} 0 1,${sweep[1]} 0,-${radius}" |
| 99 | 118 … | /> |
| 100 | 119 … | </g> |
| 101 | 120 … | ` |
| 121 … | +} |
| 102 | 122 … | |
| 103 | | - |
| 123 … | +function rotate ({ center = { x: 0, y: 0}, angle, point }) { |
| 124 … | + const a = Math.atan2(point.y - center.y, point.x - center.x) |
| 125 … | + const r = Math.sqrt(Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2)) |
| 126 … | + return { |
| 127 … | + x: r * Math.cos(a + angle), |
| 128 … | + y: r * Math.sin(a + angle) |
| 129 … | + } |
| 104 | 130 … | } |
| 105 | 131 … | |
| 132 … | + |
| 106 | 133 … | |
| 107 | 134 … | function range ({ start = 0, stop, step = 1 }) { |
| 108 | 135 … | return Array(Math.ceil((stop - start) / step)) |
| 109 | 136 … | .fill(start).map((x, y) => x + y * step) |
