| index.jsView |
|---|
| 6 | 6 … | xmlns="http://www.w3.org/2000/svg" |
| 7 | 7 … | xmlns:xlink="http://www.w3.org/1999/xlink" |
| 8 | 8 … | viewBox="-1 -1 2 2" |
| 9 | 9 … | > |
| 10 | | - ${moons({ moonRadius: 0.1, centerRadius: 0.7 })} |
| 11 | | - ${gears({ centerRadius: 0.15, toothLength: 0.3, toothWidth: 0.2 })} |
| 10 … | + ${plants({ size: 0.25, offsetRadius: 0.2 })} |
| 11 … | + ${gear({ offsetRadius: 0.15, toothLength: 0.3, toothWidth: 0.2 })} |
| 12 … | + ${moons({ moonRadius: 0.1, offsetRadius: 0.7 })} |
| 12 | 13 … | </svg> |
| 13 | 14 … | ` |
| 14 | 15 … | } |
| 15 | 16 … | |
| 16 | | -function gears ({ centerRadius, toothLength, toothWidth }) { |
| 17 … | +function gear ({ offsetRadius, toothLength, toothWidth }) { |
| 17 | 18 … | return ` |
| 18 | 19 … | <style type="text/css"> |
| 19 | 20 … | .gear { |
| 20 | 21 … | stroke: black; |
| 27 | 28 … | <g class="gear"> |
| 28 | 29 … | ${range({ start: 0, stop: 1, step: 1/8 }) |
| 29 | 30 … | .map(index => gearTooth({ |
| 30 | 31 … | angle: (1/16 + index) * 2 * Math.PI, |
| 31 | | - offset: centerRadius, |
| 32 … | + offset: offsetRadius, |
| 32 | 33 … | length: toothLength, |
| 33 | 34 … | width: toothWidth |
| 34 | 35 … | })) |
| 35 | 36 … | .join('\n') |
| 48 | 49 … | </g> |
| 49 | 50 … | ` |
| 50 | 51 … | } |
| 51 | 52 … | |
| 52 | | -function moons ({ moonRadius, centerRadius }) { |
| 53 … | +function plants ({ size, offsetRadius }) { |
| 53 | 54 … | return ` |
| 54 | 55 … | <style type="text/css"> |
| 56 … | + .plant { |
| 57 … | + stroke: black; |
| 58 … | + stroke-width: ${size / 20}; |
| 59 … | + } |
| 60 … | + .plant-stem { |
| 61 … | + fill: none; |
| 62 … | + } |
| 63 … | + </style> |
| 64 … | + ${range({ start: 0, stop: 1, step: 1/8 }) |
| 65 … | + .map(index => plant({ |
| 66 … | + size, |
| 67 … | + angle: index * 2 * Math.PI, |
| 68 … | + offsetRadius |
| 69 … | + })) |
| 70 … | + .join('\n') |
| 71 … | + } |
| 72 … | + ` |
| 73 … | +} |
| 74 … | + |
| 75 … | +function plant ({ size, angle, offsetRadius }) { |
| 76 … | + return ` |
| 77 … | + <g |
| 78 … | + class="plant" |
| 79 … | + transform=" |
| 80 … | + rotate(${angle * 180 / Math.PI}) |
| 81 … | + translate(0, ${offsetRadius}) |
| 82 … | + " |
| 83 … | + > |
| 84 … | + <path class="plant-stem" |
| 85 … | + d=" |
| 86 … | + M 0,0 |
| 87 … | + L 0,${size} |
| 88 … | + " |
| 89 … | + /> |
| 90 … | + <path class="plant-stem" |
| 91 … | + d=" |
| 92 … | + M 0,${size * 0.9} |
|
| 93 … | + C 0,${size * 0.8} 0,${size * 1.2} ${size * 0.3},${size * 1.4} |
| 94 … | + " |
| 95 … | + /> |
| 96 … | + <path class="plant-stem" |
| 97 … | + d=" |
| 98 … | + M 0,${size * 0.9} |
| 99 … | + C 0,${size * 0.8} 0,${size * 1.2} ${size * -0.3},${size * 1.4} |
| 100 … | + " |
| 101 … | + /> |
| 102 … | + </g> |
| 103 … | + ` |
| 104 … | +} |
| 105 … | + |
| 106 … | +function moons ({ moonRadius, offsetRadius }) { |
| 107 … | + return ` |
| 108 … | + <style type="text/css"> |
| 55 | 109 … | .moon { |
| 56 | 110 … | stroke: black; |
| 57 | 111 … | stroke-width: ${moonRadius / 20}; |
| 58 | 112 … | } |
| 65 | 119 … | </style> |
| 66 | 120 … | ${range({ start: 0, stop: 1, step: 1/8 }) |
| 67 | 121 … | .map(index => moon({ |
| 68 | 122 … | radius: moonRadius, |
| 69 | | - center: rotate({ angle: index * 2 * Math.PI, point: { x: 0, y: centerRadius } }), |
| 123 … | + center: rotate({ angle: index * 2 * Math.PI, point: { x: 0, y: offsetRadius } }), |
| 70 | 124 … | phase: index |
| 71 | 125 … | })) |
| 72 | 126 … | .join('\n') |
| 73 | 127 … | } |
