| 1 | // const conicgradients = [
|
| 2 | // {
|
| 3 | // gradient: `conic-gradient(
|
| 4 | // from 90deg at bottom right,
|
| 5 | // cyan,
|
| 6 | // rebeccapurple
|
| 7 | // )`,
|
| 8 | // },
|
| 9 | // {
|
| 10 | // gradient: `conic-gradient(
|
| 11 | // from .5turn at bottom center,
|
| 12 | // lightblue,
|
| 13 | // white
|
| 14 | // )`,
|
| 15 | // },
|
| 16 | // {
|
| 17 | // gradient: `conic-gradient(
|
| 18 | // from 90deg at 40% -25%,
|
| 19 | // #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585,
|
| 20 | // #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700
|
| 21 | // )`,
|
| 22 | // },
|
| 23 | // {
|
| 24 | // gradient: `conic-gradient(
|
| 25 | // at bottom left,
|
| 26 | // deeppink,
|
| 27 | // cyan
|
| 28 | // )`,
|
| 29 | // },
|
| 30 | // {
|
| 31 | // gradient: `conic-gradient(
|
| 32 | // from 90deg at 25% -10%,
|
| 33 | // #ff4500, #d3f340, #7bee85, #afeeee, #7bee85
|
| 34 | // )`,
|
| 35 | // },
|
| 36 | // {
|
| 37 | // gradient: `conic-gradient(
|
| 38 | // from -90deg at top left,
|
| 39 | // black,
|
| 40 | // white
|
| 41 | // )`,
|
| 42 | // },
|
| 43 | // {
|
| 44 | // gradient: `conic-gradient(
|
| 45 | // at top right,
|
| 46 | // lime,
|
| 47 | // cyan
|
| 48 | // )`,
|
| 49 | // },
|
| 50 | // {
|
| 51 | // gradient: `conic-gradient(
|
| 52 | // from -.5turn at bottom right,
|
| 53 | // deeppink,
|
| 54 | // cyan,
|
| 55 | // rebeccapurple
|
| 56 | // )`,
|
| 57 | // },
|
| 58 | // {
|
| 59 | // gradient: `conic-gradient(
|
| 60 | // at top right,
|
| 61 | // slategray,
|
| 62 | // white
|
| 63 | // )`,
|
| 64 | // },
|
| 65 | // {
|
| 66 | // gradient: `conic-gradient(
|
| 67 | // from .5turn at 50% 110%,
|
| 68 | // white,
|
| 69 | // orange
|
| 70 | // )`,
|
| 71 | // },
|
| 72 | // {
|
| 73 | // gradient: `conic-gradient(
|
| 74 | // from .5turn at center left,
|
| 75 | // lime,
|
| 76 | // cyan
|
| 77 | // )`,
|
| 78 | // },
|
| 79 | // {
|
| 80 | // gradient: `conic-gradient(
|
| 81 | // from -90deg at 50% -25%,
|
| 82 | // blue,
|
| 83 | // blueviolet
|
| 84 | // )`,
|
| 85 | // },
|
| 86 | // {
|
| 87 | // gradient: `conic-gradient(
|
| 88 | // from .5turn at top right,
|
| 89 | // darkseagreen,
|
| 90 | // darkslategray
|
| 91 | // )`,
|
| 92 | // },
|
| 93 | // {
|
| 94 | // gradient: `conic-gradient(
|
| 95 | // from 90deg at 50% 0%,
|
| 96 | // #111, 50%, #222, #111
|
| 97 | // )`,
|
| 98 | // },
|
| 99 | // {
|
| 100 | // gradient: `conic-gradient(
|
| 101 | // at top right,
|
| 102 | // lightcyan,
|
| 103 | // lightblue
|
| 104 | // )`,
|
| 105 | // },
|
| 106 | // {
|
| 107 | // gradient: `conic-gradient(
|
| 108 | // from -135deg at -10% center,
|
| 109 | // #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4
|
| 110 | // )`,
|
| 111 | // },
|
| 112 | // {
|
| 113 | // gradient: `conic-gradient(
|
| 114 | // from -90deg at 50% 105%,
|
| 115 | // white,
|
| 116 | // orchid
|
| 117 | // )`,
|
| 118 | // },
|
| 119 | // {
|
| 120 | // gradient: `conic-gradient(
|
| 121 | // from -90deg at 25% 115%,
|
| 122 | // #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff,
|
| 123 | // #0000ff, #0000ff, #0000ff, #0000ff
|
| 124 | // )`,
|
| 125 | // },
|
| 126 | // {
|
| 127 | // gradient: `conic-gradient(
|
| 128 | // from -90deg at bottom center,
|
| 129 | // papayawhip,
|
| 130 | // peachpuff
|
| 131 | // )`,
|
| 132 | // },
|
| 133 | // {
|
| 134 | // gradient: `conic-gradient(
|
| 135 | // from -270deg at 50% -5%,
|
| 136 | // yellow,
|
| 137 | // yellowgreen
|
| 138 | // )`,
|
| 139 | // },
|
| 140 | // {
|
| 141 | // gradient: `conic-gradient(
|
| 142 | // from -90deg at 75% -25%,
|
| 143 | // sienna,
|
| 144 | // purple
|
| 145 | // )`,
|
| 146 | // },
|
| 147 | // {
|
| 148 | // gradient: `conic-gradient(
|
| 149 | // from 90deg at 50% 125%,
|
| 150 | // #20b2aa, #135da5, #0d0895, #4b0082,
|
| 151 | // #4b0082, #0d0895, #135da5, #20b2aa
|
| 152 | // )`,
|
| 153 | // },
|
| 154 | // {
|
| 155 | // gradient: `conic-gradient(
|
| 156 | // from -270deg at 110% 50%,
|
| 157 | // cadetblue,
|
| 158 | // darkgreen
|
| 159 | // )`,
|
| 160 | // },
|
| 161 | // {
|
| 162 | // gradient: `conic-gradient(
|
| 163 | // from -270deg at 75% 110%,
|
| 164 | // fuchsia,
|
| 165 | // floralwhite
|
| 166 | // )`,
|
| 167 | // },
|
| 168 | // {
|
| 169 | // gradient: `conic-gradient(
|
| 170 | // from -270deg at 75% 110%,
|
| 171 | // midnightblue,
|
| 172 | // lawngreen
|
| 173 | // )`,
|
| 174 | // },
|
| 175 | // {
|
| 176 | // gradient: `conic-gradient(
|
| 177 | // from .5turn at bottom left,
|
| 178 | // deeppink,
|
| 179 | // rebeccapurple
|
| 180 | // )`,
|
| 181 | // },
|
| 182 | // {
|
| 183 | // gradient: `conic-gradient(
|
| 184 | // from 90deg at 50% 125%,
|
| 185 | // #1f005c, #003298, #005ac6, #007fdc, #00a2d3, #00c4ae,
|
| 186 | // #00e474, #00ff00, #1f005c, #003298, #005ac6, #007fdc,
|
| 187 | // #00a2d3, #00c4ae, #00e474, #00ff00
|
| 188 | // )`,
|
| 189 | // },
|
| 190 | // {
|
| 191 | // gradient: `conic-gradient(
|
| 192 | // at 0% 0%,
|
| 193 | // snow,
|
| 194 | // white
|
| 195 | // )`,
|
| 196 | // },
|
| 197 | // {
|
| 198 | // gradient: `conic-gradient(
|
| 199 | // from .5turn at 0% 0%,
|
| 200 | // #00c476,
|
| 201 | // 10%,
|
| 202 | // #82b0ff,
|
| 203 | // 90%,
|
| 204 | // #00c476
|
| 205 | // )`,
|
| 206 | // },
|
| 207 | // {
|
| 208 | // gradient: `conic-gradient(
|
| 209 | // at 125% 50%,
|
| 210 | // #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7
|
| 211 | // )`,
|
| 212 | // },
|
| 213 | // ]
|
| 214 |
|
| 215 | const linearURL = 'https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json'
|
| 216 | const uigradients = await(await fetch(linearURL)).json()
|
| 217 |
|
| 218 | const linear = uigradients
|
| 219 | .slice(0, 30)
|
| 220 | .reduce((root, {colors}, i) =>
|
| 221 | root += `
|
| 222 | --gradient-${i+1}: linear-gradient(var(--op-gradient-direction),${colors.join(',')});`
|
| 223 | , ``)
|
| 224 |
|
| 225 | // const conic = conicgradients
|
| 226 | // // .slice(0, 25)
|
| 227 | // .reduce((root, {gradient}, i) =>
|
| 228 | // root += `
|
| 229 | // --conic-gradient-${i+1}: ${gradient
|
| 230 | // .replace(/\s+/g, ' ')
|
| 231 | // .trim()
|
| 232 | // .replace(' from', 'from')
|
| 233 | // .replace(' )', ')')
|
| 234 | // };`
|
| 235 | // , ``)
|
| 236 |
|
| 237 | console.log(linear)
|
| 238 | // console.log(conic)
|