| index.jsView |
|---|
| 8 | 8 … | viewBox="-1 -1 2 2" |
| 9 | 9 … | > |
| 10 | 10 … | ${plants({ size: 0.25, offsetRadius: 0.2 })} |
| 11 | 11 … | ${gear({ offsetRadius: 0.15, toothLength: 0.3, toothWidth: 0.2 })} |
| 12 | | - ${moons({ moonRadius: 0.1, offsetRadius: 0.7 })} |
| 12 … | + ${moons({ moonRadius: 0.2, offsetRadius: 0.7 })} |
| 13 | 13 … | </svg> |
| 14 | 14 … | ` |
| 15 | 15 … | } |
| 16 | 16 … | |
| 59 | 59 … | } |
| 60 | 60 … | .plant-stem { |
| 61 | 61 … | fill: none; |
| 62 | 62 … | } |
| 63 … | + .plant-leaf { |
| 64 … | + fill: green; |
| 65 … | + } |
| 63 | 66 … | </style> |
| 64 | 67 … | ${range({ start: 0, stop: 1, step: 1/8 }) |
| 65 | 68 … | .map(index => plant({ |
| 66 | 69 … | size, |
| 86 | 89 … | M 0,0 |
| 87 | 90 … | L 0,${size} |
| 88 | 91 … | " |
| 89 | 92 … | /> |
| 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 | | - /> |
| 93 … | + ${plantStem({ size, direction: 1 })} |
|
| 94 … | + ${plantStem({ size, direction: -1 })} |
| 95 … | + ${plantLeaf({ size, direction: 1 })} |
| 96 … | + ${plantLeaf({ size, direction: -1 })} |
| 102 | 97 … | </g> |
| 103 | 98 … | ` |
| 104 | 99 … | } |
| 105 | 100 … | |
| 101 … | +function plantStem ({ size, direction }) { |
| 102 … | + return ` |
| 103 … | + <path class="plant-stem" |
| 104 … | + d=" |
| 105 … | + M 0,${size * 0.9} |
| 106 … | + C 0,${size * 0.8} 0,${size * 1.2} ${size * direction * 0.3},${size * 1.4} |
| 107 … | + " |
| 108 … | + /> |
| 109 … | + ` |
| 110 … | +} |
| 111 … | + |
| 112 … | +function plantLeaf ({ size, direction }) { |
| 113 … | + return ` |
| 114 … | + <path class="plant-leaf" |
| 115 … | + d=" |
| 116 … | + M ${size * direction * 0.3},${size * 1.4} |
| 117 … | + a ${size},${size} -45 0,0 ${size * direction * 0.8},${size * 0.6} |
| 118 … | + A ${size},${size} -45 0,0 ${size * direction * 0.3},${size * 1.4} |
| 119 … | + " |
| 120 … | + /> |
| 121 … | + ` |
| 122 … | +} |
| 123 … | + |
| 106 | 124 … | function moons ({ moonRadius, offsetRadius }) { |
| 107 | 125 … | return ` |
| 108 | 126 … | <style type="text/css"> |
| 109 | 127 … | .moon { |
