2b:null 2c:["$","title",null,{"children":"Stripe function in css-doodle | yuanchuan | Observable"}] 31:[{"id":"0799c75bd42c105acd56e9fda22886331f1404d862a4edd97cee069d38c542f6f80e58e2c88c095b538fb2214325b998d1bdfa2a123986e890ec7677039f67c8","href":"https://static.observableusercontent.com/files/0799c75bd42c105acd56e9fda22886331f1404d862a4edd97cee069d38c542f6f80e58e2c88c095b538fb2214325b998d1bdfa2a123986e890ec7677039f67c8","name":"bg.png","type":"image/png","lastModified":1585802032595.65,"size":17804}] 2f:{"id":"05fb284ac2b4ed68","slug":"stripe-function-in-css-doodle","title":"Stripe function in css-doodle","thumbnail":"ad1dc09879f30a7a8d7bd83adec8eeef9b0dacff3fe12e1366cd58303387c06c","access_level":"public","create_time":"$D2020-03-31T02:05:53.313Z","update_time":"$D2022-09-29T01:11:21.874Z","view_time":null,"first_public_time":"$D2020-04-02T05:03:32.950Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a8fe74c337d27be5","login":"yuanchuan","name":"yuanchuan","avatar_url":"https://avatars-next.observableusercontent.com/b72c99b9aba4e922284a97ccac2cf3d62dc4b47854bde60319e79f349712b5e1","tier":"starter_2024"},"version":1217,"publish_version":1217,"role":null,"authored":false,"authors":[{"type":"individual","id":"86c517104ed2b13e","login":"yuanchuan","name":"yuanchuan","avatar_url":"https://avatars-next.observableusercontent.com/b72c99b9aba4e922284a97ccac2cf3d62dc4b47854bde60319e79f349712b5e1","tier":null}],"members":[{"type":"individual","id":"86c517104ed2b13e","login":"yuanchuan","name":"yuanchuan","avatar_url":"https://avatars-next.observableusercontent.com/b72c99b9aba4e922284a97ccac2cf3d62dc4b47854bde60319e79f349712b5e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d29178c98654e780","slug":"css-doodle","title":"css-doodle","owner":{"id":"a8fe74c337d27be5","login":"yuanchuan","name":"yuanchuan"}},"type":"notebook","body":{"title":"Stripe function in css-doodle","cells":[{"id":459,"value":"md`# Stripe function in css-doodle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"html` \n

\n The @stripe() function is for generating striped gradients in a more convienient way. It's added because I come to write the steps by hand more and more often. The code I used before is verbose even though with the help of @m() function.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md`\n~~~css\nbackground: linear-gradient(\n @m3((\n @pn(gold, orange, crimson) calc((@n - 1) * 100% / 3),\n @lp calc(@n * 100% / 3)\n ))\n);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"md`\n Till Ana Tudor introduced a cleaner way not long ago, I then learned how to write steps without color repeatition.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"md`\n~~~css\nbackground: linear-gradient(\n @m3(\n @pn(gold, orange, crimson) 0 calc(@n * 100% / 3)\n )\n);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"html`\n

\n But why not go a little further to only give the colors and compute the percent or width of the steps automatically? \n

\nThat's how @stripe() function does extactly:\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"md`\n~~~css\nbackground: linear-gradient(\n @stripe(gold, orange, crimson)\n);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"cssdoodle`\n @size: 180px;\n background: linear-gradient(\n @stripe(gold, orange, crimson)\n );\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"md`---\n## Step width`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`\n The width of each step is equal by default, but you can manually set its width value behind each color.\n\n The width is different from the original gradient offset, which is computed from the beginning of the gradient.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"md`\n~~~css\nbackground: linear-gradient(\n @stripe(gold 60%, orange 30%, crimson)\n);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"cssdoodle`\n @size: 180px;\n background: linear-gradient(\n @stripe(gold 60%, orange 30%, crimson)\n );\n\n :after, :before {\n content: @pn(60%, 30%);\n color: @pn(crimson, #fff);\n position: absolute;\n top: @pn(30%, 70%);\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"md`---\n## How to generate many steps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"html`\n

\nIn order to generate striped gradient steps with @m() function, I've also upgraded css-doodle to support function composition. The syntax is similar to the composition in the Haskell programming language.\n

\n For example, there's the code for generating striped radial-gradient with 40 steps randomly picking from 3 colors:\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"md`\n~~~css\nbackground: radial-gradient(\n @stripe(@m40(@p(gold, orange, crimson)))\n);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"md`It can be written like this with function composition syntax:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"md`\n~~~css\nbackground: radial-gradient(\n @stripe.@m40.@p(gold, orange, crimson)\n);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"cssdoodle`\n @size: 180px;\n background: radial-gradient(\n @stripe.@m40.@p(gold, orange, crimson)\n );\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`---\n## Color wheel with conic-gradient`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"html`\n

Now it's quite handy to generate a color wheel with @stripe function.

Note that Firefox still doesn't support conic-gradient at the time of writing. \nAnd you need to toggle the conic-gradient.enabled flag if you're on Firefox Nightly.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"md`\n~~~css\nbackground: conic-gradient(\n @stripe.@m18(\n hsl(calc(360 / @N * (@n - 1)), 100%, 48%)\n )\n)\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"cssdoodle`\n @size: 180px;\n border-radius: 50%;\n background: conic-gradient(\n from ${angle}deg,\n @stripe.@m(\n ${steps}, \n hsl(calc(360 / @N * (@n - 1)), 100%, 48%)\n )\n );\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"viewof steps = slider({\n min: 2, \n max: 32, \n step: 1, \n value: 18, \n title: \"Stripe steps\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"viewof angle = slider({\n min: -180, \n max: 180, \n step: 1, \n value: 0, \n format: v => `${v}deg`,\n title: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"md`---\n\n Hope you find it useful!\n\n ---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"cssdoodle = require('css-doodle@0.8.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"