31:[{"id":"004d56883216417ca6733cc2f987e4682bf1b25f893c388ebb1540d911f9e7aed4b63eb2c8505b8b27dfed5debeabef25c1f667a8f15c2ff315eb406a7ca61e5","href":"https://static.observableusercontent.com/files/004d56883216417ca6733cc2f987e4682bf1b25f893c388ebb1540d911f9e7aed4b63eb2c8505b8b27dfed5debeabef25c1f667a8f15c2ff315eb406a7ca61e5","name":"mainImg.svg","type":"image/svg+xml","lastModified":1662944914415.981,"size":3370},{"id":"6d878c0a4c04b497fc6d821b1d42a1205e0d38e92ba03938c8679b80fd526c5dfb930da4e8a02d2b76c37ce59a96490ac231411e349e0fcf259d3cbf9f8d37ba","href":"https://static.observableusercontent.com/files/6d878c0a4c04b497fc6d821b1d42a1205e0d38e92ba03938c8679b80fd526c5dfb930da4e8a02d2b76c37ce59a96490ac231411e349e0fcf259d3cbf9f8d37ba","name":"sideImg.svg","type":"image/svg+xml","lastModified":1662945212500.677,"size":1506}] 2f:{"title":"Cover Image Maker","cells":[{"id":0,"value":"# Cover 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":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: \"#FCD936\"})\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.25})\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: true})\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.09})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof sideImg_dx = {\n reset;\n resetSide;\n return Inputs.range([-(bannerWidth), bannerWidth], {value: -10, 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: -10, 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(\"mainImg.svg\").text().then(d => d.replace(/^.*?