2c:null 2d:["$","title",null,{"children":"Untitled | Dylan Madisetti | Observable"}] 32:T8c0,viewof controls = { // Create the container for the color inputs const container = html`

`; // Define initial color values for SVG classes const colorValues = { ".bg1": "#222255", ".bg2": "#444477", ".El": "#333355", ".Er": "#135E9E", ".B1": "#B0D6FF", ".B2": "#135E9E", ".L-color-1": "#135E9E", ".L-color-2": "#2885D7", ".L-color-3": "#64AEF8", ".F-color-1": "#7CBCFC", ".F-color-2": "#B0D6FF", ".F-color-3": "#4DA0F0", ".F-color-4": "#64AEF8" }; const sliderValues = { rx: 1, ry: 1, bgr: 0.85, l_scale: 1, L_scale: 1 }; // Combine color and slider values into a single values object const values = { ...colorValues, ...sliderValues, toggles: ["background"] }; // Iterate over color values to create color pickers Object.entries(colorValues).forEach(([selector, color]) => { const label = selector.replace(".", "").replace("-", " ").toUpperCase(); const colorInput = Inputs.color({ label: label, value: color }); // Update the stored color value when the color picker changes colorInput.addEventListener("input", (e) => { values[selector] = e.target.value; }); // Append each color input to the container container.append(colorInput); }); // Setup sliders based on sliderValues Object.entries(sliderValues).forEach(([attribute, v]) => { const slider = Inputs.range([0, 2], { value: v, step: 0.05, label: attribute }); slider.addEventListener("input", (e) => { values[attribute] = parseFloat(e.target.value); }); container.append(slider); }); // Checkbox to toggle visibility of the body const showBody = Inputs.checkbox(["body", "background"], { label: "toggles", value: ["body", "background"] }); showBody.addEventListener("input", (e) => { values.toggles = showBody.value; }); container.append(showBody); // Define a getter for the container's value to access the current color settings Object.defineProperty(container, "value", { get: () => values }); // Return the container element return container; }33:T24a4,svgElement = htl.svg``34:[] 30:{"id":"dd45c69434b2534a","slug":null,"title":"","thumbnail":"7d1382d5bca69e95bf9b75f31124f4d4cdbfa0e433a6ed56a946b8164c40210f","access_level":"unlisted","create_time":"$D2024-05-10T19:05:28.412Z","update_time":"$D2024-05-10T20:53:40.478Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8880f12a08d5ccb7","login":"dmadisetti","name":"Dylan Madisetti","avatar_url":"https://avatars-next.observableusercontent.com/30767c701c28e63e28a14e0d59cbef6b4c88507040a73bc304f1a119abd852db","tier":"starter_2024"},"version":153,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"12ceb5d047bae1c3","login":"dmadisetti","name":"Dylan Madisetti","avatar_url":"https://avatars-next.observableusercontent.com/30767c701c28e63e28a14e0d59cbef6b4c88507040a73bc304f1a119abd852db","tier":null}],"members":[{"type":"individual","id":"12ceb5d047bae1c3","login":"dmadisetti","name":"Dylan Madisetti","avatar_url":"https://avatars-next.observableusercontent.com/30767c701c28e63e28a14e0d59cbef6b4c88507040a73bc304f1a119abd852db","tier":null,"role":"editor"},{"type":"team","id":"8880f12a08d5ccb7","login":"dmadisetti","name":"Dylan Madisetti","avatar_url":"https://avatars-next.observableusercontent.com/30767c701c28e63e28a14e0d59cbef6b4c88507040a73bc304f1a119abd852db","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":34,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"controls","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"