2f:[{"id":"6e2d4b14b2fa83718aaddb1d33358a89c3ca1b7818ad27e23188a698a5599fac71d9ee490829e3d7d0ac7d15bd93f2e8efe025c5c93e9de0034dd175c166d1b9","href":"https://static.observableusercontent.com/files/6e2d4b14b2fa83718aaddb1d33358a89c3ca1b7818ad27e23188a698a5599fac71d9ee490829e3d7d0ac7d15bd93f2e8efe025c5c93e9de0034dd175c166d1b9","name":"02 - star medal.svg","type":"image/svg+xml","lastModified":1665896298596.15,"size":2163},{"id":"7dda8fe009a19492a2b42b05d99854d7c2f79634dfa5600468ea1190a7f2ae73661d6980846ab088beee10e56d366053b9cbf89c4dd8efb2884ccb6257907d75","href":"https://static.observableusercontent.com/files/7dda8fe009a19492a2b42b05d99854d7c2f79634dfa5600468ea1190a7f2ae73661d6980846ab088beee10e56d366053b9cbf89c4dd8efb2884ccb6257907d75","name":"09 - music.svg","type":"image/svg+xml","lastModified":1665639698907.386,"size":1111},{"id":"a8b7db0da6505577b99f15f0ddadb5ef39f0f65e10702e4516696b1dc7909ff766f10211d90a4fea01fc15af6c7f4e9e99178cd2bb5af1526a82f5d4c6306a40","href":"https://static.observableusercontent.com/files/a8b7db0da6505577b99f15f0ddadb5ef39f0f65e10702e4516696b1dc7909ff766f10211d90a4fea01fc15af6c7f4e9e99178cd2bb5af1526a82f5d4c6306a40","name":"53 - missing file.svg","type":"image/svg+xml","lastModified":1665546594156.442,"size":1044},{"id":"207de43af4b9a0fcca9009a280b5e22d18ee1c9f6557942043a7fc1fe8b3b3383c0bce721d1b68e69f6bf6b69e08d1748205085420b988069d487487bf49a6f1","href":"https://static.observableusercontent.com/files/207de43af4b9a0fcca9009a280b5e22d18ee1c9f6557942043a7fc1fe8b3b3383c0bce721d1b68e69f6bf6b69e08d1748205085420b988069d487487bf49a6f1","name":"03 - burger.svg","type":"image/svg+xml","lastModified":1667534418472.611,"size":2915},{"id":"f8a838b0d2a827afdc16081bd2610e2f680b273d2682095872683dfdf9d39483d21c2a8acaa1d8530265cdb503f4e7be2347ced89420684f2a4db20f9bf7e027","href":"https://static.observableusercontent.com/files/f8a838b0d2a827afdc16081bd2610e2f680b273d2682095872683dfdf9d39483d21c2a8acaa1d8530265cdb503f4e7be2347ced89420684f2a4db20f9bf7e027","name":"38 - hexagonal spiral.svg","type":"image/svg+xml","lastModified":1663054206140.075,"size":1039}] 2d:{"title":"General Image Maker","cells":[{"id":0,"value":"# General Image Maker\n## Make a Cover Image using SVG Icons\nBeen doing this a bunch by hand, so trying to make a way to create a thumbnail in a cleaner way. \n\nUpdate the attached SVG images to use different icons. Can then save off a finished banner for use as a PNG cover image.","pinned":false,"hidden":false,"mode":"md"},{"id":603,"value":"Like all the icons I use as cover images? Thanks, I make them myself!","pinned":false,"hidden":false,"mode":"md"},{"id":604,"value":"// Noun Credit\nbutton({\n // text: \"'IconName' by Zach Bogart from Noun Project\", // icon\n // text: \"'CollectionName' Collection by Zach Bogart from Noun Project\", // collection\n \n // link: \"\" // link to NP\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"viewof color = {\n reset;\n resetMain;\n return Inputs.color({label: \"Background\", value: \"#333333\"})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof mainImgFill = {\n reset;\n resetMain;\n return Inputs.color({label: \"Main Img Fill\", value: \"#d783ff\"})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"viewof scalingMainImg = {\n reset;\n resetMain;\n return Inputs.range([0.001, 1], {label: \"Main Icon scaling\", step: 0.001, value: 0.35})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof includeSideImg = {\n reset;\n resetSide;\n return Inputs.toggle({label: \"Include Side Img?\", value: false})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"viewof sideImgFill = {\n reset;\n resetSide;\n return Inputs.color({label: \"Side Img Fill\", value: \"#d783ff\"})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"viewof scalingSideImg = {\n reset;\n resetSide;\n return Inputs.range([0.001, 1], {label: \"Side Icon scaling\", step: 0.001, value: 0.19})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof sideImg_dx = {\n reset;\n resetSide;\n return Inputs.range([-(bannerWidth), bannerWidth], {value: 45, label: \"Side Image dx\", step: 1})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof sideImg_dy = {\n reset;\n resetSide;\n return Inputs.range([-(bannerHeight), bannerHeight], {value: 40, label: \"Side Image dy\", step: 1})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"_Use the three dots to download the above cell as a PNG for notebook thumbnails_","pinned":false,"hidden":false,"mode":"md"},{"id":489,"value":"viewof resetSide = Inputs.button(\"Reset Side\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"viewof resetMain = Inputs.button(\"Reset Main\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"viewof reset = Inputs.button(\"Restore All Defaults\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"## Setting the Color as a CSS Filter","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"Coloring the SVG images was more of a pain than I thought it'd be. Using the [hex filter package](https://opensourcelibs.com/lib/hex-to-css-filter) (thanks so much).","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"hexFilter = import('https://unpkg.com/hex-to-css-filter@5.4.0/dist/esm/index.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"Unpack and use in CSS","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"mainImgFillData = hexFilter.hexToCSSFilter(mainImgFill)","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"sideImgFillData = hexFilter.hexToCSSFilter(sideImgFill)","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":351,"value":"## Variables","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"scaledMainImgWidth = mainImg.width * scalingMainImg","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"scaledMainImgHeight = mainImg.height * scalingMainImg","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"scaledSideImgWidth = sideImg.width * scalingSideImg","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"scaledSideImgHeight = sideImg.height * scalingSideImg","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"bannerWidth = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"bannerHeight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"### Getting the hrefs for SVG\n[A quick (and dirty) suggestion from @fil](https://talk.observablehq.com/t/save-off-an-svg-with-images/7025/3). Otherwise, the `` SVGs weren't showing up.","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"mainImgHref = `data:image/svg+xml;utf8,${await FileAttachment(\"03 - burger.svg\").text().then(d => d.replace(/^.*?