{"product_id":"custom-d20","title":"Custom D20","description":"\u003cbody\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\n\u003cstyle\u003e\n#svgAdjustTools{\n position: absolute;\n left: 0;\n top: 0;\n}\n#svgAdjustTools span{\n display: block;\n height: 40px;\n width: 40px;\n margin-top:10px;\n cursor: pointer;\n}\n.product-options{display: none;}\n.ap-options__text-container{display: none;}\n#color1{\n display: block;\n margin: 15px auto;\n}\n.activeSwatch {box-shadow: 0 0 0 1px #000000, 0 0 0 3px #ffffff, 0 0 0 5px #000000 !important;}\n.switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n.switch input { opacity: 0; width: 0; height: 0;}\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n -webkit-transition: .4s;\n transition: .4s;\n}\n.slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: white;\n -webkit-transition: .4s;\n transition: .4s;\n}\ninput:checked + .slider {background-color: #2196F3;}\ninput:focus + .slider {box-shadow: 0 0 1px #2196F3;}\ninput:checked + .slider:before {\n -webkit-transform: translateX(26px);\n -ms-transform: translateX(26px);\n transform: translateX(26px);\n}\n.slider.round {border-radius: 34px;}\n.slider.round:before {border-radius: 50%;}\n.qtySlideContainer {max-width: 350px; appearance: none; -webkit-appearance: none;}\n.qtySlideContainer input{\n\tborder-radius: 15px;\n\tborder-style: outset;\n\tborder-color: #a4aeba;\n\tborder-width: 3px;\n\tpadding: 0px 3px;\n\theight: auto !important;\n appearance: none;\n -webkit-appearance: none;\n}\n.qtySlideContainer input::-webkit-slider-thumb {\n -webkit-appearance: none; \/* Override default look *\/\n appearance: none;\n width: 15px; \/* Set a specific slider handle width *\/\n height: 15px; \/* Slider handle height *\/\n background: #173153; \/* Green background *\/\n cursor: pointer; \/* Cursor on hover *\/\n border-radius: 50%;\n}\n.qtySlideContainer input::-moz-range-thumb {\n width: 15px; \/* Set a specific slider handle width *\/\n height: 15px; \/* Slider handle height *\/\n background: #173153; \/* Green background *\/\n cursor: pointer; \/* Cursor on hover *\/\n border-radius: 50%;\n}\n.optionsPanel {\n\twidth: 100%;\n\tmax-width: 440px;\n padding: 30px 30px;\n\tborder-radius: 40px;\n box-shadow: 0px 0px 16px rgb(128 128 128 \/ 30%);\n\t\/* box-shadow: 0px 8px 40px rgb(128 128 128 \/ 15%); *\/\n\tmargin: auto;\n}\ndatalist {\n display: flex;\n justify-content: space-between;\n writing-mode: horizontal-tb;\n width: 100%;\n max-width: 350px;\n font-size: 10px;\n}\n#d20outline{transition: opacity 1s ease-in-out;}\n.renders{transition: opacity 1s ease-in-out;}\n.product-info__block{display: \"none\";}\n.product-info.product-info--sticky {width: 100% !important; background: white;}\n#product-media {display: none !important;}\n.product-grid__container\u003e.product-grid__content {width: 100%;}\n.add-to-cart {width: 100%;}\n.medium-up--one-half * {box-sizing: border-box;}\n.flex-container {display: flex;\tflex-direction: row;}\n.flex-item-left {padding: 10px;\tflex: 60%; text-align: center;}\n.flex-item-right {padding: 10px; flex: 40%; text-align: left;}\n.flex-btn-left {padding: 0 2px 0 0; flex: 50%; text-align: center;}\n.flex-btn-right { padding: 0 0 0 2px; flex: 50%; text-align: center;}\n@media (max-width: 900px) { \/* Responsive layout - makes a one column-layout instead of two-column layout *\/\n .flex-container {flex-direction: column;}\n}\n.hot-flex-container {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n align-content: center;\n justify-content: space-evenly;\n}\n.hot-flex-container * {\n\tmargin: 3px;\n width: 25px;\n height: 25px;\n display: inline-block;\n vertical-align: middle;\n border-radius: 50%;\n box-sizing: border-box;\n cursor: pointer;\n transition: 0.3s ease-in-out;\n border: 1px solid #fff;\n box-shadow: 0px 0px 0px 2px #50505070;\n padding: 10px !important;\n}\n.hot-flex-item-all {background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);}\n.hot-flex-item-left {background-color: #000000;}\n.hot-flex-item-left2 {background: repeating-linear-gradient(45deg, #fbe23b, #e0a91b 10px);}\n.hot-flex-item-right {background-color: #FFFFFF;}\n.hot-flex-item-right2 {background: repeating-linear-gradient(45deg, #B87333, #f0a865 10px);}\n@media (max-width: 120px) { \/* Responsive layout - makes a one column-layout instead of a two-column layout *\/\n .hot-flex-item-all, .hot-flex-item-right, .hot-flex-item-right2, .hot-flex-item-left, .hot-flex-item-left2 {flex: 50%;}\n}\n@media (max-width: 60px) {\n .hot-flex-item-all, .hot-flex-item-right, .hot-flex-item-right2, .hot-flex-item-left, .hot-flex-item-left2 {flex: 100%;}\n}\nfieldset.jester {\n border: 0;\n padding: 0;\n margin: 0 0 -12px;\n position: relative;\n}\n.jester input {\n clip: rect(0,0,0,0);\n overflow: hidden;\n position: absolute;\n height: 1px;\n width: 1px;\n}\nfieldset.jester label{\n font-family: var(--typeBasePrimary),var(--typeBaseFallback);\n font-size: var(--typeBaseSize);\n letter-spacing: var(--typeBaseSpacing);\n line-height: var(--typeBaseLineHeight);\n position: relative;\n display: inline-block;\n font-weight: 400;\n padding: 7px 15px;\n margin: 0 8px 12px 0;\n background-color: #fff;\n background-color: var(--colorBody);\n box-shadow: 0 0 0 1px #e8e8e1;\n box-shadow: 0 0 0 1px var(--colorBorder);\n border-radius: 1px;\n overflow: hidden;\n cursor: pointer;\n text-align: center;\n width: 100%;\n}\n.jester label.disabled {color: #e8e8e1; box-shadow: 0 0 0 1px #e8e8e1; cursor: default;}\n.jester label.disabled:after {\n position: absolute;\n content: \"\";\n left: 50%;\n top: 0;\n bottom: 0;\n border-left: 2px solid;\n border-color: #e8e8e1;\n border-color: var(--colorBorder);\n transform: rotate(45deg);\n}\nfieldset.jester legend{\n font-family: var(--typeBasePrimary),var(--typeBaseFallback);\n font-size: var(--typeBaseSize);\n letter-spacing: var(--typeBaseSpacing);\n line-height: var(--typeBaseLineHeight);\n position: relative;\n display: inline-block;\n font-weight: 400;\n padding: 7px 15px;\n margin: 0 8px 12px 0;\n overflow: hidden;\n}\n.jester input:checked+label{box-shadow: 0 0 0 2px var(--colorTextBody);}\ntd label{margin-bottom: 0px !important;}\ntd {padding: 0px !important;}\n.upload{\n padding: 10px 12px;\n min-height: auto;\n min-width: auto;\n border-radius: var(--gw_main_border_radius, 5px);\n text-transform: unset;\n box-shadow: none;\n background: 0 0;\n color: var(--gw_main_color_review, var(--gw_main_color, #000));\n border: 1px solid var(--gw_main_color_review, var(--gw_main_color, #000));\n transition: all .15s ease-in-out;\n}\n.upload:hover{color: blue; border: 1px solid blue;}\n#myRange, #myRange2 {\n\twidth: 100% !important;\n\tposition: relative !important;\n\tmargin: 0 0 20px 0 !important;\n}\n.apo-delete__file{display: none !important;}\n#toggleOverlay {position: absolute;\tright: 0; bottom: 0;}\n#toggleOverlay2 {position: absolute;\tright: 0; top: 0; cursor: pointer;}\n#svgTools{padding-top:15px}\n#lightIntensity{max-width: 35%;}\n.bright{margin: 0 0 -25px !important}\n#lightIntensity label {\n\tmargin-bottom: 0 !important;\n\tfont-variant-caps: all-petite-caps;\n margin: -5px auto 0px auto;\n display: block;\n}\n#toggleOverlay label,#toggleOverlay2 label{\n\tmargin-bottom: 0 !important;\n\tfont-variant-caps: all-petite-caps;\n margin: -5px auto 5px auto;\n display: block;\n}\n.jesterHot {display: flex; flex-wrap: wrap;}\n.jesterHot \u003e label {margin-right: 12px;\tcursor: pointer; margin-bottom: 10px;}\n.jesterHot \u003e label input {position: fixed; opacity: 0;}\n.jesterHot \u003e label span {\n\tmargin: 0;\n\twidth: 30px;\n\theight: 30px;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\ttransition: 0.3s ease-in-out;\n\tborder: 1px solid #fff;\n\tbox-shadow: 0px 0px 0px 2px #50505070;\n}\n.apo-file {width: 100%; height: 100%;}\n.apo-file input {display:none}\n.apo-file \u003e label {\n min-width: 220px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n transition: 0.4s;\n}\n.apo-file \u003e label \u003e span {\n display: inline-block;\n text-align: center;\n font-size: 14px;\n color: #6d7175;\n line-height: 1.5;\n margin-top: 6px;\n}\n.apo-file__action {\n padding: 4px 16px;\n background: #fde5e5;\n font-weight: bold;\n color: #f82020 !important;\n border-radius: 6px;\n box-shadow: 0px 5px 10px -8px #df7474;\n transition: 0.4s;\n}\n.apo-file \u003e label:hover .apo-file__action {\n transform: scale(1.15);\n transition: 0.4s;\n}\n.apo-file__lable {\n width: 100%;\n height: 100px;\n border: 1px dashed #888;\n border-radius: 6px;\n cursor: pointer;\n}\n#add_to_cart_btn {width: 100%;}\n.shopify-payment-button__more-options,.shopify-payment-terms,.shopify-payment-button__button {display: none;}\n.apo-file__img{display:none;}\n#avp-watermark-footer{display:none !important;}\n.product-grid__container\u003e.product-grid__content {width: 100%;}\n.add-to-cart {width: 100%;}\n.st0 {display: none;}\n.st1 {display: inline;}\n.st2 {fill: #FFFFFF;}\n.b{stroke-width: 0px; fill:yellow; transition: fill 3s ease;}\n#userImage {transition: filter 3s ease-in-out;}\n.medium-up--one-half{width: 100% !important;}\t\t\t\t\t\t\t\t\t \n.swatchy {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 2px rgba(0, 0, 0, 1) solid;\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);\n margin: 5px;\n}\n.swatchy:hover {box-shadow: 0px 0px 15px orange;}\n.n4a {background:linear-gradient(-45deg,#fFFFFF 50%, #800080 51%);}\n.n4b {background:linear-gradient(-45deg,#FFA500 50%, #fFFFFF 51%);}\n.n4c {background:linear-gradient(-45deg,#B21E1E 50%, #C0C0C0 51%);}\n.n4d {background:linear-gradient(-45deg,#3B13E9 50%, #fFFFFF 51%);}\n.n4e {background:linear-gradient(-45deg,#4C175A 50%, #000000 51%);}\n.n4f {background:linear-gradient(-45deg,#F3F3F3 50%, #676767 51%);}\n.n4g {background:linear-gradient(-45deg,#F3F3F3 50%, #B21E1E 51%);}\n.n4j {background:linear-gradient(-45deg,#009DC4 50%, #fFFFFF 51%);}\n.n4k {background:linear-gradient(-45deg,#0080FF 50%, #0000CC 51%);}\n.n4l {background:linear-gradient(-45deg,#A1A1CE 50%, #676767 51%);}\n.n4m {background:linear-gradient(-45deg,#00FF00 50%, #F6D7B0 51%);}\n.n4n {background:linear-gradient(-45deg,#228B22 50%, #6D431E 51%);}\n.n4o {background:linear-gradient(-45deg,#E3DAC9 50%, #F6CCCC 51%);}\n.n4p {background:linear-gradient(-45deg,#B21E1E 50%, #000000 51%);}\n.n4q {background:linear-gradient(-45deg,#000000 50%, #000000 51%);}\n.n4r {background:linear-gradient(-45deg,#00ff22 50%, #00da62 51%);}\n.n4s {background:linear-gradient(-45deg,#ffffff 50%, #f2f1ed 51%);}\n\u003c\/style\u003e\n\n\u003cscript\u003e\n function isMobileBrowser() {\n return \/Mobi|Android\/i.test(navigator.userAgent);\n }\n \n function AVISupdater(property, newColor) {\n var avis = document.getElementById('avpoptions-container__v2'); \/\/ Get AVIS App Options container\n if(avis){\n var avisInput = avis.querySelectorAll('input');\n\n for (let i = 0; i \u003c avisInput.length; i++) { \/\/ Update the visible input field\n if (avisInput[i].name == property) {\n avisInput[i].value = newColor;\n avisInput[i].dispatchEvent(new Event('input')); \/\/ Trigger input event\n avisInput[i].dispatchEvent(new Event('change')); \/\/ Trigger change event\n console.log(`Updated visible input ${property} to ${newColor}`);\n }\n }\n\n \/\/ Update the hidden input field\n var avisHidden = document.querySelector('.avis-input-hiddens');\n var avisInputHidden = avisHidden.querySelectorAll('input');\n for (let i = 0; i \u003c avisInputHidden.length; i++) {\n if (avisInputHidden[i].name == `properties[${property}]`) {\n avisInputHidden[i].value = newColor;\n avisInputHidden[i].dispatchEvent(new Event('input')); \/\/ Trigger input event\n avisInputHidden[i].dispatchEvent(new Event('change')); \/\/ Trigger change event\n console.log(`Updated hidden input properties[${property}] to ${newColor}`);\n }\n }\n }\n }\n\ndocument.addEventListener('DOMContentLoaded', function () {\n\n if(isMobileBrowser()){\n document.getElementById('sideOverlays').style.filter = \"url(#userImgFilter)\"\n }\n var colorPicker = document.getElementById('color1')\n colorPicker.addEventListener(\"change\", watchInlay, false);\n\n var brightnessPicker = document.getElementById('myRange2')\n brightnessPicker.addEventListener(\"change\", onChangeBrightness, false);\n\n \/\/ Get the element to which the filter is applied\n const userImg = document.getElementById('userImage');\n\n \/\/ Default Clicks\n if(document.querySelectorAll(\".option-selector\")[0]){\n document.querySelectorAll(\".option-selector\")[0].children[1].children[0].click()\n document.querySelectorAll(\".option-selector\")[1].children[1].children[0].click()\n }\n document.querySelector('.n4a').click()\n\n waitForIt()\n \n \/\/ Function to reapply the filter\n const reapplyFilter = () =\u003e {};\n\n \/\/ Add an event listener for the transition end event\n userImg.addEventListener('transitionend', reapplyFilter);\n});\nasync function waitForIt() {\n const myTimeout = setTimeout(timeToMove, 1000);\n}\nfunction timeToMove() {\n \/\/ Move AVIS\n var itemToMove1 = document.getElementById('avpoptions-container__v2');\n var placeToMove = document.getElementById('moveUploadHere');\n var placeToMovePrice = document.getElementById('moveUploadHerePrice');\n\n \/\/ Move PRICE\n var itemToMove2 = document.querySelector('.product-price');\n\n \/\/ Move ADD TO CART\n var itemToMove3;\n document.querySelectorAll('.product-info__block').forEach(item =\u003e { if (item.innerText.includes('ADD TO CART')) { itemToMove3 = item } })\n console.log(\n \"\\nItem1\", itemToMove1,\n \"\\nItem2\", itemToMove2,\n \"\\nItem3\",itemToMove3,\n )\n\n if(itemToMove1 \u0026\u0026 itemToMove2 \u0026\u0026 itemToMove3){\n placeToMove.appendChild(itemToMove1);\n placeToMovePrice.appendChild(itemToMove3);\n placeToMovePrice.appendChild(itemToMove2);\n }\n}\nasync function moveTheAvis(){\n \/\/ Move AVIS\n var itemToMove = document.getElementById('avpoptions-container__v2');\n var placeToMove = document.getElementById('moveUploadHere');\n var placeToMovePrice = document.getElementById('moveUploadHerePrice');\n placeToMove.appendChild(itemToMove);\n}\nfunction jesterColor(hex, target, gradient) {\n const rgb = hexToRgb(hex);\n if (rgb.length !== 3) {\n alert('Invalid format!');\n return;\n }\n const color = new Color(rgb[0], rgb[1], rgb[2]);\n const solver = new Solver(color);\n const result = solver.solve();\n\n var filterString = result.filter;\n filterString = filterString.substring(7, filterString.length - 1);\n\n \/\/ Apply filter to the image \u0026 preview\n if (target === 'userImage') {\n \/\/ Add Inset Shadow\n var thisAttr = document.getElementById(\"dropColor\").attributes;\n for (let i = 0; i \u003c thisAttr.length; i++) {\n if (thisAttr[i].name === 'flood-color') {\n thisAttr[i].value = ColorLuminance(hex, -0.4);\n }\n if (thisAttr[i].name === 'dropColor') {\n thisAttr[i].value = ColorLuminance(hex, -0.4);\n }\n }\n safariRecolor(hex, 'safariTest', 'None');\n safariRecolor(hex, 'userImgFilter', 'None');\n\n \/\/ Apply the filter with transition\n const userImage = document.getElementById('userImage');\n userImage.style.filter = filterString;\n }\n}\nfunction watchInlay(event) {\t\/\/Change Pip Inlay\n var newColor = event.target.value;\n AVISupdater('Inlay Color', newColor)\n var cInput = document.getElementById('color1');\n cInput.style.background = '';\n adjustNumbersColors(newColor)\n}\n\nfunction hotWatchPick() {\n var newColor = document.getElementById('color2').value;\n AVISupdater('Inlay Color', newColor)\n var cInput = document.getElementById('color1');\n cInput.value = newColor;\n cInput.style.background = '';\n\n adjustNumbersColors(newColor)\n}\nfunction hotWatchInlay(btnColor, fauxName) {\t\/\/Change Pip Inlay\n var newColor = btnColor;\n AVISupdater('Inlay Color', fauxName)\n var cInput = document.getElementById('color1');\n\n if (fauxName == 'Black') {\n cInput.value = newColor;\n cInput.style.background = '';\n } else if (fauxName == 'White') {\n cInput.value = newColor;\n cInput.style.background = '';\n } else if (fauxName == 'Gold') {\n cInput.value = newColor;\n cInput.style.background = \"repeating-linear-gradient(45deg, #fbe23b, #e0a91b 10px)\";\n } else if (fauxName == 'Copper') {\n cInput.value = newColor;\n cInput.style.background = \"repeating-linear-gradient(45deg, #B87333, #f0a865 10px)\";\n }\n adjustNumbersColors(newColor)\n}\nfunction onChangeBrightness(event){\n var newBrightness = event.target.value;\n\n var renders = document.getElementById('d20_renders').children;\n for(i=0;i\u003crenders.length;i++){\n if(renders[i].style.opacity == 1 \u0026\u0026 renders[i].id.substring(renders[i].id.length - 8,renders[i].id.length ) == 'no-shade' ){\n document.getElementById(renders[i].id.substring(0, 8) + \"shade\").style.opacity = newBrightness * 0.1;\n }\n }\n var currentColor = document.getElementById('color1').value;\n adjustNumbersColors(currentColor);\n}\n\nfunction adjustNumbersColors(hex){\n\n var brightness = 1;\n var renders = document.getElementById('d20_renders').children;\n for(i=0;i\u003crenders.length;i++){\n if(renders[i].style.opacity == 1 \u0026\u0026 renders[i].id.substring(renders[i].id.length - 8,renders[i].id.length ) == 'no-shade' ){\n brightness = document.getElementById(renders[i].id.substring(0, 8) + \"shade\").style.opacity\n }\n }\n \/\/ Groups 5 and 15\n document.getElementById(\"5of5\").style.fill = adjustHexColor(hex, -75*brightness); \n document.getElementById(\"1of15\").style.fill = adjustHexColor(hex, -75*brightness); \n document.getElementById(\"5of15\").style.fill = adjustHexColor(hex, -75*brightness); \n\n \/\/ Groups 13\n document.getElementById(\"1of13\").style.fill = adjustHexColor(hex, -50*brightness); \n document.getElementById(\"3of13\").style.fill = adjustHexColor(hex, -50*brightness); \n \n \/\/ Groups User Upload and 11\n document.getElementById(\"1of11a\").style.fill = adjustHexColor(hex, -25*brightness); \n document.getElementById(\"1of11b\").style.fill = adjustHexColor(hex, -25*brightness);\n jesterColor(adjustHexColor(hex, -25*brightness), 'userImage');\n \/\/ Groups 7 and 9\n document.getElementById(\"7of7\").style.fill = adjustHexColor(hex, -25*brightness); \n document.getElementById(\"_of9\").style.fill = adjustHexColor(hex, -25*brightness); \n document.getElementById(\"9of9\").style.fill = adjustHexColor(hex, -25*brightness); \n \n \/\/ Groups 17 and 19\n document.getElementById(\"1of17\").style.fill = adjustHexColor(hex, +25*brightness); \n document.getElementById(\"7of17\").style.fill = adjustHexColor(hex, +25*brightness);\n document.getElementById(\"1of19\").style.fill = adjustHexColor(hex, +25*brightness); \n document.getElementById(\"9of19\").style.fill = adjustHexColor(hex, +25*brightness); \n \/\/ Groups 3\n document.getElementById(\"3of3\").style.fill = adjustHexColor(hex, +75*brightness); \n}\n\n function adjustHexColor(hex, percent) {\n \/\/ Remove the hash at the start if it's there\n hex = hex.replace(\/^#\/, '');\n\n \/\/ Parse the r, g, b values\n let r = parseInt(hex.substring(0, 2), 16);\n let g = parseInt(hex.substring(2, 4), 16);\n let b = parseInt(hex.substring(4, 6), 16);\n\n \/\/ Adjust each value by the given percent\n r = Math.floor(r * (1 + percent \/ 100));\n g = Math.floor(g * (1 + percent \/ 100));\n b = Math.floor(b * (1 + percent \/ 100));\n\n \/\/ Ensure values are within the valid range\n r = Math.max(0, Math.min(255, r));\n g = Math.max(0, Math.min(255, g));\n b = Math.max(0, Math.min(255, b));\n\n \/\/ Convert back to hex and return\n const adjustedHex = `#${((1 \u003c\u003c 24) + (r \u003c\u003c 16) + (g \u003c\u003c 8) + b).toString(16).slice(1).toUpperCase()}`;\n return adjustedHex;\n}\n\n\/\/ From jesterColor\nfunction ColorLuminance(hex, lum) {\n\t\/\/ validate hex string\n\thex = String(hex).replace(\/[^0-9a-f]\/gi, '');\n\tif (hex.length \u003c 6) {\n\t\thex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];\n\t}\n\tlum = lum || 0;\n\t\/\/ convert to decimal and change luminosity\n\tvar rgb = \"#\", c, i;\n\tfor (i = 0; i \u003c 3; i++) {\n\t\tc = parseInt(hex.substr(i*2,2), 16);\n\t\tc = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);\n\t\trgb += (\"00\"+c).substr(c.length);\n\t}\n\treturn rgb;\n}\n\nfunction hexToRgb(hex) {\n \/\/ Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = \/^#?([a-f\\d])([a-f\\d])([a-f\\d])$\/i;\n hex = hex.replace(shorthandRegex, (m, r, g, b) =\u003e {\n return r + r + g + g + b + b;\n });\n\n const result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16),\n ]\n : null;\n}\n\nclass Color { constructor(r, g, b) { this.set(r, g, b); } toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; } set(r, g, b) { this.r = this.clamp(r); this.g = this.clamp(g); this.b = this.clamp(b); } hueRotate(angle = 0) { angle = angle \/ 180 * Math.PI; const sin = Math.sin(angle); const cos = Math.cos(angle); this.multiply([0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928, 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283, 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072,]); } grayscale(value = 1) { this.multiply([0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value),]); } sepia(value = 1) { this.multiply([0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value), 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value), 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value),]); } saturate(value = 1) { this.multiply([0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value,]); } multiply(matrix) { const newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]); const newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]); const newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]); this.r = newR; this.g = newG; this.b = newB; } brightness(value = 1) { this.linear(value); } contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); } linear(slope = 1, intercept = 0) { this.r = this.clamp(this.r * slope + intercept * 255); this.g = this.clamp(this.g * slope + intercept * 255); this.b = this.clamp(this.b * slope + intercept * 255); } invert(value = 1) { this.r = this.clamp((value + this.r \/ 255 * (1 - 2 * value)) * 255); this.g = this.clamp((value + this.g \/ 255 * (1 - 2 * value)) * 255); this.b = this.clamp((value + this.b \/ 255 * (1 - 2 * value)) * 255); } hsl() { const r = this.r \/ 255; const g = this.g \/ 255; const b = this.b \/ 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) \/ 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l \u003e 0.5 ? d \/ (2 - max - min) : d \/ (max + min); switch (max) { case r: h = (g - b) \/ d + (g \u003c b ? 6 : 0); break; case g: h = (b - r) \/ d + 2; break; case b: h = (r - g) \/ d + 4; break; } h \/= 6; } return { h: h * 100, s: s * 100, l: l * 100, }; } clamp(value) { if (value \u003e 255) { value = 255; } else if (value \u003c 0) { value = 0; } return value; } }\nclass Solver { constructor(target, baseColor) { this.target = target; this.targetHSL = target.hsl(); this.reusedColor = new Color(0, 0, 0); } solve() { const result = this.solveNarrow(this.solveWide()); return { values: result.values, loss: result.loss, filter: this.css(result.values), }; } solveWide() { const A = 5; const c = 15; const a = [60, 180, 18000, 600, 1.2, 1.2]; let best = { loss: Infinity }; for (let i = 0; best.loss \u003e 25 \u0026\u0026 i \u003c 3; i++) { const initial = [50, 20, 3750, 50, 100, 100]; const result = this.spsa(A, a, c, initial, 1000); if (result.loss \u003c best.loss) { best = result; } } return best; } solveNarrow(wide) { const A = wide.loss; const c = 2; const A1 = A + 1; const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1]; return this.spsa(A, a, c, wide.values, 500); } spsa(A, a, c, values, iters) { const alpha = 1; const gamma = 0.16666666666666666; let best = null; let bestLoss = Infinity; const deltas = new Array(6); const highArgs = new Array(6); const lowArgs = new Array(6); for (let k = 0; k \u003c iters; k++) { const ck = c \/ Math.pow(k + 1, gamma); for (let i = 0; i \u003c 6; i++) { deltas[i] = Math.random() \u003e 0.5 ? 1 : -1; highArgs[i] = values[i] + ck * deltas[i]; lowArgs[i] = values[i] - ck * deltas[i]; } const lossDiff = this.loss(highArgs) - this.loss(lowArgs); for (let i = 0; i \u003c 6; i++) { const g = lossDiff \/ (2 * ck) * deltas[i]; const ak = a[i] \/ Math.pow(A + k + 1, alpha); values[i] = fix(values[i] - ak * g, i); } const loss = this.loss(values); if (loss \u003c bestLoss) { best = values.slice(0); bestLoss = loss; } } return { values: best, loss: bestLoss }; function fix(value, idx) { let max = 100; if (idx === 2 \/* saturate *\/) { max = 7500; } else if (idx === 4 \/* brightness *\/ || idx === 5 \/* contrast *\/) { max = 200; } if (idx === 3 \/* hue-rotate *\/) { if (value \u003e max) { value %= max; } else if (value \u003c 0) { value = max + value % max; } } else if (value \u003c 0) { value = 0; } else if (value \u003e max) { value = max; } return value; } } loss(filters) { const color = this.reusedColor; color.set(0, 0, 0); color.invert(filters[0] \/ 100); color.sepia(filters[1] \/ 100); color.saturate(filters[2] \/ 100); color.hueRotate(filters[3] * 3.6); color.brightness(filters[4] \/ 100); color.contrast(filters[5] \/ 100); const colorHSL = color.hsl(); return (Math.abs(color.r - this.target.r) + Math.abs(color.g - this.target.g) + Math.abs(color.b - this.target.b) + Math.abs(colorHSL.h - this.targetHSL.h) + Math.abs(colorHSL.s - this.targetHSL.s) + Math.abs(colorHSL.l - this.targetHSL.l)); } css(filters) { function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); } return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`; } }\n\n\/\/Function to convert SVG Filter for Mobile Safari\nfunction safariRecolor(hex,target,gradient){\n \/\/alert(`SafariRecolor, ${hex} , ${target} , ${gradient}.`);\n\tconsole.log(gradient + \" is grad\");\n\tvar x = document.getElementById(target);\n\tif(gradient != 'None'){\n\t\tif(gradient=='Gold'){\n\t\t\tvar rgb1 = [251,226,59];\n\t\t\tvar rgb2 = [224,169,27];\n\t\t}else if(gradient=='Copper'){\n\t\t\tvar rgb1 = [184,115,51];\n\t\t\tvar rgb2 = [0,0,0];\n\t\t}\n\tfor(i=0;i\u003cx.children.length;i++){\n\t\t\tif(x.children[i].nodeName == 'feComponentTransfer' \u0026\u0026 x.children[i].children.length \u003e 1){\n\t\t\t\tx.children[i].children[0].attributes[1].value=rgb1[0]\/255 + \" \" +rgb2[0]\/255 ;\t\/\/R\n\t\t\t\tx.children[i].children[1].attributes[1].value=rgb1[1]\/255 + \" \" +rgb2[1]\/255 ;\t\/\/G\n\t\t\t\tx.children[i].children[2].attributes[1].value=rgb1[2]\/255 + \" \" +rgb2[2]\/255 ;\t\/\/B\n\t\t\t}\n\t\t}\n\t}else{\n\t\tvar rgb1 = hex2rgb(hex);\n\t\tvar rgb2 = hex2rgb(ColorLuminance(hex, -0.4));\n\t\tfor(i=0;i\u003cx.children.length;i++){\n\t\t\tif(x.children[i].nodeName == 'feComponentTransfer' \u0026\u0026 x.children[i].children.length \u003e 1){\n\t\t\t\tx.children[i].children[0].attributes[1].value=rgb1[0]\/255 + \" \" +rgb2[0]\/255 ;\t\/\/R\n\t\t\t\tx.children[i].children[1].attributes[1].value=rgb1[1]\/255 + \" \" +rgb2[1]\/255 ;\t\/\/G\n\t\t\t\tx.children[i].children[2].attributes[1].value=rgb1[2]\/255 + \" \" +rgb2[2]\/255 ;\t\/\/B\n\t\t\t}\n\t\t}\n\t}\n}\n\/\/Function to convert HEX to RGB\nfunction hex2rgb(x){\n\t\tif(x.length == 7){\n\t\t\tx = x.substring(1,7);\n\t\t}\n if(x.length != 6){\n throw \"Only six-digit hex colors are allowed.\";\n }\n\n var aRgbHex = x.match(\/.{1,2}\/g);\n var aRgb = [\n parseInt(aRgbHex[0], 16),\n parseInt(aRgbHex[1], 16),\n parseInt(aRgbHex[2], 16)\n ];\n return aRgb;\n}\n\t\u003c\/script\u003e\n\n\u003cdiv class=\"flex-container\"\u003e\n \u003cdiv class=\"flex-item-left\"\u003e\n \n \u003cdiv id=\"previewBox\" style=\"position:relative;top:0;left:0;\"\u003e\n \u003cdiv id=\"previewSVG\" style=\"position:relative;top:0;left:0;\"\u003e\n\n \u003csvg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewbox=\"540 317 850 600\" style=\"enable-background:new 540 317 850 600;\" xml:space=\"preserve\"\u003e\n \u003cdefs\u003e\n \u003cfilter id=\"insetEffect\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003c!-- First shadow (inner top-left) --\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\" result=\"cutoff\"\u003e\n \u003cfefunca type=\"table\" tablevalues=\"1 0\"\u003e\u003c\/fefunca\u003e\n \u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur in=\"cutoff\" stddeviation=\"2\" result=\"shadowBlur1\"\u003e\u003c\/fegaussianblur\u003e\n \u003cfeoffset in=\"shadowBlur1\" dx=\"-2\" dy=\"-2\" result=\"shadowOffset1\"\u003e\u003c\/feoffset\u003e\n \u003cfecomposite in=\"shadowOffset1\" in2=\"SourceAlpha\" operator=\"in\" result=\"innerShadow1\"\u003e\u003c\/fecomposite\u003e\n \u003cfeflood flood-color=\"black\" result=\"shadowColor1\"\u003e\u003c\/feflood\u003e\n \u003cfecomposite in=\"shadowColor1\" in2=\"innerShadow1\" operator=\"in\" result=\"innerShadow1Colored\"\u003e\u003c\/fecomposite\u003e\n \n \u003c!-- Second shadow (inner bottom-right) --\u003e\n \u003cfegaussianblur in=\"cutoff\" stddeviation=\"2\" result=\"shadowBlur2\"\u003e\u003c\/fegaussianblur\u003e\n \u003cfeoffset in=\"shadowBlur2\" dx=\"2\" dy=\"2\" result=\"shadowOffset2\"\u003e\u003c\/feoffset\u003e\n \u003cfecomposite in=\"shadowOffset2\" in2=\"SourceAlpha\" operator=\"in\" result=\"innerShadow2\"\u003e\u003c\/fecomposite\u003e\n \u003cfeflood flood-color=\"white\" result=\"shadowColor2\"\u003e\u003c\/feflood\u003e\n \u003cfecomposite in=\"shadowColor2\" in2=\"innerShadow2\" operator=\"in\" result=\"innerShadow2Colored\"\u003e\u003c\/fecomposite\u003e\n \n \u003c!-- Merge shadows with the original graphic --\u003e\n \u003cfemerge\u003e\n \u003cfemergenode in=\"innerShadow1Colored\"\u003e\u003c\/femergenode\u003e\n \u003cfemergenode in=\"innerShadow2Colored\"\u003e\u003c\/femergenode\u003e\n \u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\n \u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\n \u003cfefunca type=\"table\" tablevalues=\"0.5 0\"\u003e\u003c\/fefunca\u003e\n \u003c\/fecomponenttransfer\u003e\n\n \u003cfegaussianblur stddeviation=\"0.9\"\u003e\u003c\/fegaussianblur\u003e\n \u003cfeoffset dx=\"-1.5\" dy=\"-1.5\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\n \u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\n \u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\n \u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\n\n \u003cfemerge\u003e\n \u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\n \u003cfemergenode\u003e\u003c\/femergenode\u003e\n \u003c\/femerge\u003e\n \u003c\/filter\u003e\n \n \u003cfilter id=\"inset-shadows-a\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.4 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"2\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"2\" dy=\"2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-b\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"0.5\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"0\" dy=\"-1.5\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-c\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.4 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"1\" dy=\"1\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-d\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.4 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"2\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"2\" dy=\"-2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n\n \n \u003cfilter id=\"inset-shadows-left\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"2.5\" dy=\"2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-5\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"0.5\" dy=\"-3\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-13\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"3\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"2\" dy=\"-4\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-1of13\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.6 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"-2.5\" dy=\"-2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-3of13\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.4 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"0.5\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"2\" dy=\"-2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-11\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"-2\" dy=\"-3\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-19\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"-2.5\" dy=\"0\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-17\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"2.5\" dy=\"2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-3\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"-4\" dy=\"2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-15\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"3\" dy=\"-2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-7\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"2\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"3\" dy=\"-1\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadows-9\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\u003cfefunca type=\"table\" tablevalues=\"0.8 0\"\u003e\u003c\/fefunca\u003e\u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"1\"\u003e\u003c\/fegaussianblur\u003e\u003cfeoffset dx=\"-3\" dy=\"-2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\u003cfemerge\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003cfemergenode\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\n \u003c\/filter\u003e\n\n \n \u003cfilter id=\"inset-shadowsxx\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003c!-- Inverting alpha --\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\" result=\"invertedAlpha\"\u003e\n \u003cfefunca type=\"table\" tablevalues=\"1 0\"\u003e\u003c\/fefunca\u003e\n \u003c\/fecomponenttransfer\u003e\n \n \u003c!-- Top-left inner shadow --\u003e\n \u003cfegaussianblur in=\"invertedAlpha\" stddeviation=\"0.9\" result=\"blur1\"\u003e\u003c\/fegaussianblur\u003e\n \u003cfeoffset in=\"blur1\" dx=\"-1.5\" dy=\"-1.5\" result=\"offsetBlur1\"\u003e\u003c\/feoffset\u003e\n \u003cfeflood flood-color=\"black\" result=\"color1\"\u003e\u003c\/feflood\u003e\n \u003cfecomposite in=\"color1\" in2=\"offsetBlur1\" operator=\"in\" result=\"innerShadow1\"\u003e\u003c\/fecomposite\u003e\n \n \u003c!-- Bottom-right inner shadow --\u003e\n \u003cfegaussianblur in=\"invertedAlpha\" stddeviation=\"0.9\" result=\"blur2\"\u003e\u003c\/fegaussianblur\u003e\n \u003cfeoffset in=\"blur2\" dx=\"1.5\" dy=\"1.5\" result=\"offsetBlur2\"\u003e\u003c\/feoffset\u003e\n \u003cfeflood flood-color=\"white\" result=\"color2\"\u003e\u003c\/feflood\u003e\n \u003cfecomposite in=\"color2\" in2=\"offsetBlur2\" operator=\"in\" result=\"innerShadow2\"\u003e\u003c\/fecomposite\u003e\n \n \u003c!-- Merging the shadows with the original graphic --\u003e\n \u003cfemerge\u003e\n \u003cfemergenode in=\"innerShadow1\"\u003e\u003c\/femergenode\u003e\n \u003cfemergenode in=\"innerShadow2\"\u003e\u003c\/femergenode\u003e\n \u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\n \u003c\/femerge\u003e\n \u003c\/filter\u003e\n \u003cfilter id=\"inset-shadow-backup\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\n \u003cfefunca type=\"table\" tablevalues=\"1 0\"\u003e\u003c\/fefunca\u003e\n \u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"40\"\u003e\u003c\/fegaussianblur\u003e\n \u003cfeoffset dx=\"-50\" dy=\"50\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\n \u003cfeflood id=\"dropColor1\" flood-color=\"#000000\" result=\"color\"\u003e\u003c\/feflood\u003e\n \u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\n \u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\n \u003cfemerge\u003e\n \u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\n \u003cfemergenode\u003e\u003c\/femergenode\u003e\n \u003c\/femerge\u003e\n \u003c\/filter\u003e \n \u003cfilter id=\"userImgFilter\" x=\"0\" y=\"0\"\u003e\n \u003cfecomponenttransfer in=\"SourceAlpha\"\u003e\n \u003cfefunca type=\"table\" tablevalues=\"1 0\"\u003e\u003c\/fefunca\u003e\n \u003c\/fecomponenttransfer\u003e\n \u003cfegaussianblur stddeviation=\"0.5\"\u003e\u003c\/fegaussianblur\u003e\n \u003cfeoffset dx=\"0\" dy=\"-2\" result=\"offsetblur\"\u003e\u003c\/feoffset\u003e\n \u003cfeflood id=\"dropColor\" flood-color=\"#ffffff\" result=\"color\"\u003e\u003c\/feflood\u003e\n \u003cfecomposite in2=\"offsetblur\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\n \u003cfecomposite in2=\"SourceAlpha\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\n \u003cfemerge\u003e\n \u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\n \u003cfemergenode\u003e\u003c\/femergenode\u003e\n \u003c\/femerge\u003e\n \n \u003cfecolormatrix type=\"matrix\" values=\" .33 .33 .33 0 0\n .33 .33 .33 0 0\n .33 .33 .33 0 0\n 0 0 0 1 0\"\u003e\n \u003c\/fecolormatrix\u003e\n\n \u003c!-- Map the grayscale result to the gradient map provided in tableValues --\u003e\n \u003cfecomponenttransfer color-interpolation-filters=\"sRGB\"\u003e\n \u003cfefuncr type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncr\u003e\n \u003cfefuncg type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncg\u003e\n \u003cfefuncb type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncb\u003e\n \u003c\/fecomponenttransfer\u003e\n\n \u003c\/filter\u003e\n \n \u003cfilter id=\"smokeAFilter\" x=\"0\" y=\"0\"\u003e\n \u003cfecolormatrix type=\"matrix\" values=\".33 .33 .33 0 0\n .33 .33 .33 0 0\n .33 .33 .33 0 0\n 0 0 0 1 0\"\u003e\n \u003c\/fecolormatrix\u003e\n\n \u003c!-- Map the grayscale result to the gradient map provided in tableValues --\u003e\n \u003cfecomponenttransfer color-interpolation-filters=\"sRGB\"\u003e\n \u003cfefuncr type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncr\u003e\n \u003cfefuncg type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncg\u003e\n \u003cfefuncb type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncb\u003e\n \u003c\/fecomponenttransfer\u003e\n \n \u003c\/filter\u003e\n \n \u003cfilter id=\"smokeBFilter\" x=\"0\" y=\"0\"\u003e\n \u003cfecolormatrix type=\"matrix\" values=\"\n .33 .33 .33 0 0\n .33 .33 .33 0 0\n .33 .33 .33 0 0\n 0 0 0 1 0\"\u003e\n \u003c\/fecolormatrix\u003e\n\n \u003c!-- Map the grayscale result to the gradient map provided in tableValues --\u003e\n \u003cfecomponenttransfer color-interpolation-filters=\"sRGB\"\u003e\n \u003cfefuncr type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncr\u003e\n \u003cfefuncg type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncg\u003e\n \u003cfefuncb type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncb\u003e\n \u003c\/fecomponenttransfer\u003e\n\n \u003c\/filter\u003e\n\n \u003cfilter id=\"safariTest\" x=\"0\" y=\"0\"\u003e\n \u003cfecolormatrix type=\"matrix\" values=\"\n .33 .33 .33 0 0\n .33 .33 .33 0 0\n .33 .33 .33 0 0\n 0 0 0 1 0\"\u003e\n \u003c\/fecolormatrix\u003e\n\n \u003c!-- Map the grayscale result to the gradient map provided in tableValues --\u003e\n \u003cfecomponenttransfer color-interpolation-filters=\"sRGB\"\u003e\n \u003cfefuncr type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncr\u003e\n \u003cfefuncg type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncg\u003e\n \u003cfefuncb type=\"table\" tablevalues=\"0 0\"\u003e\u003c\/fefuncb\u003e\n \u003c\/fecomponenttransfer\u003e\n\n \u003c\/filter\u003e\n \u003cfilter id=\"toneBlur\"\u003e\n \u003cfegaussianblur in=\"SourceGraphic\" stddeviation=\"5\"\u003e\u003c\/fegaussianblur\u003e\n \u003c\/filter\u003e\n \n \u003clineargradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"\u003e\n \u003cstop offset=\"10%\" style=\"stop-color:LIGHTSALMON\"\u003e\u003c\/stop\u003e\n \u003cstop offset=\"50%\" style=\"stop-color:TEAL\"\u003e\u003c\/stop\u003e\n \u003cstop offset=\"90%\" style=\"stop-color:LIGHTPINK\"\u003e\u003c\/stop\u003e\n \u003c\/lineargradient\u003e\n \u003c\/defs\u003e\n\n \u003cg id=\"d20_renders\"\u003e\n \u003cimage class=\"renders\" style=\"overflow: visible; opacity: 1.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4a_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4a_no-shade.png?v=1716065556\"\u003e \u003c\/image\u003e  \n \u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.5; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4a_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4a_shade.png?v=1716065556\"\u003e \u003c\/image\u003e  \n \n \u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4b_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4b_no-shade.png?v=1716065556\"\u003e \u003c\/image\u003e  \n \u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4b_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4b_shade.png?v=1716065556\n \"\u003e \u003c\/image\u003e\n\n \u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4c_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4c_no-shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4c_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4c_shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4d_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4d_no-shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4d_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4d_shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4e_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4e_no-shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4e_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4e_shade.png?v=1716150745\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4f_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4f_no-shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4f_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4f_shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4g_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4g_no-shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4g_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4g_shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4j_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4j_no-shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4j_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4j_shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4k_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4k_no-shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4k_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4k_shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4l_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4l_no-shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4l_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4l_shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4m_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4m_no-shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4m_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4m_shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4n_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4n_no-shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4n_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4n_shade.png?v=1716150745\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4o_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4o_no-shade.png?v=1716150746\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4o_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4o_shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4p_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4p_no-shade.png?v=1716150747\"\u003e \u003c\/image\u003e  \n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4p_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4p_shade.png?v=1716150745\"\u003e \u003c\/image\u003e  \n\n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4q_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4q_no-shade.png?v=1738170133\"\u003e\n\u003c\/image\u003e\n\n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4q_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4q_shade.png?v=1738170133\"\u003e \u003c\/image\u003e\n\n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4r_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4r_no-shade.png?v=1738170134\"\u003e\u003c\/image\u003e\n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4r_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4r_shade.png?v=1738170134\"\u003e \u003c\/image\u003e\n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4s_no-shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4s_no-shade.png?v=1738170133\"\u003e \u003c\/image\u003e\n\u003cimage class=\"renders\" style=\"overflow: visible; opacity: 0.0; enable-background: new;\" x=\"385\" y=\"290\" width=\"1156\" height=\"650\" id=\"d20_n4s_shade\" filter=\"\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_marble_n4s_shade.png?v=1738170134\"\u003e \u003c\/image\u003e\n\n \u003c\/g\u003e\n \u003c!-- Overlay for d20 --\u003e\n \u003c!-- \u003cg id=\"d20shading\"\u003e\n \u003cimage style=\"overflow: visible; opacity: 1.0; enable-background: new;\" width=\"1920\" height=\"1080\" id=\"smokeB\" filter=\"url(#smokeBFilter)\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_base_transparency.png?v=1711032206\"\u003e \u003c\/image\u003e \t\n \u003cimage style=\"overflow: visible; opacity: 1.0; enable-background: new;\" width=\"1920\" height=\"1080\" id=\"smokeB\" filter=\"url(#smokeBFilter)\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_base_transparency.png?v=1711032206\"\u003e \u003c\/image\u003e \t\t\n \u003c\/g\u003e --\u003e\n \u003c!-- d20 numbers --\u003e\n\n \u003c!-- In order 1, 17, 3, 7, 19, 15, 9, 5, 13, 11 --\u003e\n \u003c!-- 1 of 1 --\u003e\n \u003c!-- \u003cpath id=\"customSide\" class=\"b\" d=\"M947.53,622.31c-7.09,3.22-13.38,6.07-20.41,9.25-1.58-5.31-3.06-10.26-4.67-15.65,15.27-6.64,29.07-17.21,47.92-11.99-.91,37.22-1.83,74.86-2.76,112.62h-22.36c.76-31.4,1.51-62.38,2.28-94.23Z\" \/\u003e --\u003e\n\u003cg id=\"d20numbers\" filter=\"\"\u003e\n \u003c!-- 17 --\u003e\n \u003cg id=\"d20numbers-17\" filter=\"url(#inset-shadows-17)\"\u003e\n \u003c!-- 1 of 17 --\u003e\n \u003cpath id=\"1of17\" class=\"b\" d=\"M848,412.51c-6,1.69-12,3.38-18.02,5.08-.02-7.04,1.44-9.16,7.67-11.04,7.32-2.21,14.57-4.83,22.03-6.4,5.23-1.1,10.77-.75,17.69-1.12-4.44,5.96-7.88,10.67-11.42,15.31-13.5,17.67-27.14,35.23-40.47,53.02-2.64,3.53-5.14,5.55-9.76,4.83-3.24-.5-6.62-.1-11.38-.1,15.24-20.1,29.81-39.31,44.38-58.52-.24-.35-.47-.7-.71-1.05Z\"\u003e\u003c\/path\u003e\n \u003c!-- 7 of 17 --\u003e\n \u003cpath id=\"7of17\" class=\"b\" d=\"M919.24,412.17h-36.34c3.34-9.47,7.14-12.25,16.18-12.18,14.64.12,29.28.26,43.91.42,1.61.02,3.23.18,6.16.36-3.32,3.82-5.52,7.41-8.65,9.79-26.22,19.99-52.71,39.64-78.87,59.71-4.35,3.34-8.72,2.24-13.21,2.49-2.26.13-4.53.02-7.29-1.17,26.2-19.36,52.39-38.71,78.59-58.07-.17-.45-.33-.9-.5-1.35Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n\n \u003c!-- 3 --\u003e\n \u003cg id=\"d20numbers-3\" filter=\"url(#inset-shadows-3)\"\u003e\n \u003c!-- 3 of 3 --\u003e\n \u003cpath id=\"3of3\" class=\"b\" d=\"M990.2,397.33c7.98-4.32,15.9-5.6,24.09-5.22,11.69.54,22.55,3.77,31.9,11.12,1.82,1.43,3.52,3.07,4.99,4.86,6.32,7.7,6.04,11.43-1.52,18.4,4.5,1.57,8.89,2.84,13.07,4.61,8.76,3.72,16.31,9.04,20.63,17.87,3.63,7.42,1.47,12.88-6.18,15.96-9.95,4-20.2,3.1-30.46,1.64-.65-.09-1.29-.43-1.94-.44-7.91-.16-12.13-4.2-12.6-12.3,5.05.77,10.21,1.77,15.42,2.27,3.28.32,6.69.26,9.94-.27,6.55-1.07,8.4-5.95,4.42-11.25-5.97-7.93-14.61-10.48-23.92-11.59-.66-.08-1.36-.22-1.99-.09-7.99,1.77-12.25-2.83-15.77-9.48,3.45-.44,6.83-.56,10.06-1.35,7.63-1.88,8.92-6.64,3.21-12.09-8.04-7.69-17.72-7.78-27.46-4.57-3.81,1.25-6.29,1.37-8.93-1.74-1.81-2.12-4.13-3.8-6.95-6.35Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n\n \u003c!-- 7 --\u003e\n \u003cg filter=\"url(#inset-shadows-7)\"\u003e\n \u003c!-- 7 of 7 --\u003e\n \u003cpath id=\"7of7\" class=\"b\" d=\"M804.08,546.08c-7.9,15.06-15.2,28.98-22.67,43.21-4.28-2.78-8.15-5.3-12.53-8.15,11.03-21.21,22-42.32,32.89-63.27,8.05,3.03,11.7,9.47,15.34,16.07,12.93,23.4,25.92,46.76,39.1,70.02,2.25,3.96,2.45,7.12-.01,10.98-2.64,4.15-4.66,8.71-7.69,14.49-15.03-28.18-29.46-55.25-44.44-83.34Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n\n \u003c!-- 19 --\u003e\n \u003cg filter=\"url(#inset-shadows-19)\"\u003e\n \u003c!-- 1 of 19 --\u003e\n \u003cpath id=\"1of19\" class=\"b\" d=\"M1088.18,529.25c-5.99-3.93-11.08-7.28-16.55-10.87,2.5-4.06,4.88-7.94,7.56-12.28,10.67,7.98,23.41,12.56,29.62,25.35,1.9,3.92,2.23,5.74-1.5,8.77-22.04,17.87-43.79,36.09-65.65,54.19-.37.31-.85.48-2,1.11-3.51-5.48-7.01-10.96-10.81-16.9,19.69-16.38,39.13-32.56,59.33-49.37Z\"\u003e\u003c\/path\u003e\n \u003c!-- 9 of 19 --\u003e\n \u003cpath id=\"9of19\" class=\"b\" d=\"M1050.47,615.85c4.01-3.33,7.3-6.06,11.08-9.21,10.02,16.15,22.35,26.72,43.82,18.23-10.48-4.08-16.37-11.13-20-20.29-7.42-18.72,2.78-38.63,22.14-43.22,11.38-2.7,24.57,4.08,31.96,16.42,11.25,18.78,7.51,39.45-9.37,53.68-8.66,7.3-17.92,13.44-29.27,15.12-15.9,2.35-28.57-4.3-38.93-15.79-4.09-4.53-7.47-9.7-11.44-14.93ZM1097.91,600.24c1.78,3.61,3.1,7.58,5.46,10.76,3.31,4.44,9.57,5.91,13.29,3.61,6.24-3.85,10.99-9.17,13.57-16.07,3.35-8.97-1.96-18.43-10.27-18.77-10.32-.42-20.88,9.62-22.05,20.47Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n\n \u003c!-- 15 --\u003e\n \u003cg filter=\"url(#inset-shadows-15)\"\u003e\n \u003c!-- 1 of 15 --\u003e\n \u003cpath id=\"1of15\" class=\"b\" d=\"M752.15,642.8c1.98,5.25,4.09,10.45,5.84,15.77.47,1.44.07,3.29-.32,4.86-3.54,14.18-7,28.37-10.86,42.46-1.13,4.12-.92,7.57,2.03,10.52,4.83,4.84,4.93,10.49,2.96,18.15-4.01-6.33-7.72-11.61-10.83-17.22-4.68-8.47-5.24-17.1-2.28-26.7,4.84-15.68,8.33-31.77,12.39-47.69.36-.05.71-.1,1.07-.16Z\"\u003e\u003c\/path\u003e\n \u003c!-- 5 of 15 --\u003e\n \u003cpath id=\"5of15\" class=\"b\" d=\"M727.17,680.52c-5.96-16-11.62-30.5-16.63-45.23-.94-2.77.7-6.43,2.3-9.89,3.72,9.86,7.44,19.72,11.46,30.41,2.64-4.25,4.85-7.26,2.96-12.17-4.96-12.9-8.53-26.26-8.95-40.15-.16-5.23.57-10.67,1.99-15.71,1.45-5.13,5.3-5.84,8.25-1.19,4.57,7.2,8.28,15.03,11.63,22.91,2.39,5.61,3.65,11.71,5.28,17.64,1.27,4.64,1.17,4.67-2.49,8.55-2.38-7.37-4.43-14.87-7.29-22.06-1.24-3.12-4.14-5.57-6.29-8.32-1.01,3.44-2.89,6.88-2.89,10.32.03,12.88,4.99,24.61,9.41,36.44.54,1.45,1.19,3.33.71,4.62-2.8,7.57-5.91,15.02-9.45,23.84Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n\n \u003c!-- 9 --\u003e\n \u003cg filter=\"url(#inset-shadows-9)\"\u003e\n \u003c!-- _ of 9 --\u003e\n \u003cpath id=\"_of9\" class=\"b\" d=\"M1180.74,610.89c2.64,3.97,2.68,7.63.84,11.91-3.88,8.96-7.21,18.17-10.76,27.27-.55.03-1.1.07-1.66.1-.32-2.79-1.61-5.92-.79-8.33,3.38-9.9,7.39-19.58,11.21-29.33.22-.57.73-1.03,1.16-1.62Z\"\u003e\u003c\/path\u003e\n \u003c!-- 9 of 9 --\u003e\n \u003cpath id=\"9of9\" class=\"b\" d=\"M1181.82,676.92c1.98-5.76,3.76-11.61,6.03-17.26,1.28-3.2,3.06-6.31,5.18-9.03,3.71-4.76,8.22-4.09,9.94,1.67,1.45,4.87,2.52,10.07,2.51,15.12-.03,15.67-3.57,30.64-10.79,44.64-.98,1.9-2.27,3.7-3.69,5.29-4.53,5.09-8.42,4.7-11.64-1.48-5.44-10.45-6.59-21.87-6.42-33.39.3-20.2,5.29-39.43,13.05-58.91,2.26,4.35,3.82,7.73,1.93,12.31-4.79,11.61-7.48,23.74-7.39,36.39.01,1.56.2,3.11.31,4.67l.98-.03ZM1198.77,683.17c-1.14-4.54-1.82-8.63-3.25-12.45-1.2-3.23-3.46-3.1-5.66-.5-5.09,6.02-6.74,21.39-2.79,28.04.78,1.31,2.41,3.17,3.42,3.04,1.46-.19,3.42-1.72,3.92-3.11,1.75-4.95,2.97-10.09,4.36-15.01Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n\n \u003c!-- 5 --\u003e\n \u003cg filter=\"url(#inset-shadows-5)\"\u003e\n \u003c!-- 5 of 5 --\u003e\n \u003cpath id=\"5of5\" class=\"b\" d=\"M872.82,842.53c-4.43-3.51-9.33-6.57-13.18-10.63-9.13-9.61-19.03-18.1-30.84-24.23-1.42-.73-2.93-1.28-4.4-1.92-.38.43-.76.85-1.13,1.28,4.37,4.81,8.75,9.61,13.13,14.44-25.07-10.9-46.97-26.01-65.29-48.33,4.47,2.65,8.27,4.22,11.2,6.78,6.26,5.47,11.9,11.65,18.13,17.14,3.35,2.95,7.42,5.09,11.17,7.6.34-.4.67-.8,1.01-1.2-2.7-3.52-5.39-7.04-8.09-10.56.32-.53.63-1.07.95-1.6,2.59.87,5.51,1.23,7.71,2.68,13.54,8.93,27.17,17.77,40.26,27.34,6.38,4.67,11.67,10.84,17.42,16.38,1.12,1.08,2.06,2.35,3.08,3.53-.38.43-.75.86-1.13,1.29Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n\n \u003c!-- 13 --\u003e\n \u003cg filter=\"url(#inset-shadows-13)\"\u003e\n \u003c!-- 1 of 13 --\u003e\n \u003cg filter=\"url(#inset-shadows-1of13)\"\u003e\n \u003cpath id=\"1of13\" class=\"b\" d=\"M1019.87,830.47c-15.69,4-30.37,10.78-46.84,6.83v-67.47c7.16,0,13.61-.06,20.06.03,3.33.04,2.81,2.64,2.78,4.74-.2,15.29-.42,30.59-.64,45.88-.02,1.64,0,3.28,0,5.62,4.91-1.31,9.54-1.98,13.67-3.79,5.29-2.32,7.93-.64,9.45,4.37.33,1.09.84,2.12,1.51,3.8Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n \u003c!-- 3 of 13 --\u003e\n \u003cg filter=\"url(#inset-shadows-3of13)\"\u003e\n \u003cpath id=\"3of13\" class=\"b\" d=\"M959.11,771.66c-.62,1.88-.75,2.54-1.04,3.13-3.65,7.49-3.64,7.39-11.7,5.62-9-1.97-18.08-3-27.16-.52-4.52,1.23-8.7,3.29-8.87,8.72-.17,5.45,3.83,8.03,8.39,9.03,7.37,1.62,14.89,2.59,22.78,3.91v7.87c-5.72.44-11.33.59-16.84,1.41-2.85.43-5.84,1.59-8.22,3.22-4.64,3.18-4.29,7.94.62,10.71,6.1,3.44,12.78,3.14,19.41,2.28,4.27-.56,8.47-1.59,13.3-2.53,1.4,2.91,2.87,5.97,4.54,9.45-9.93,3.35-19.83,4.45-29.75,4.07-6.9-.26-13.74-1.99-20.6-3.12-.97-.16-1.9-.6-2.8-1.02-5.96-2.76-11.56-6.22-11.24-13.69.3-7.23,6.17-10.08,11.95-12.59,1.45-.63,2.93-1.2,5.25-2.15-4.4-1.95-8.06-3.3-11.46-5.14-5.19-2.81-9.28-6.64-9.03-13.19.25-6.43,4.42-10.23,9.61-12.96,12.72-6.71,26.5-7.27,40.38-6.08,7.33.63,14.58,2.29,22.47,3.59Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n \u003c\/g\u003e\n \n \u003c!-- 11 --\u003e\n \u003cg filter=\"url(#inset-shadows-11)\"\u003e\n \u003c!-- 1st 1 of 11 --\u003e\n \u003cpath id=\"1of11a\" class=\"b\" d=\"M1066.37,817.2c5.25-3.77,10.14-8.25,15.83-11.17,16.85-8.65,34.04-16.64,51.04-25.01,1.66-.82,3.62-2.22,4.2-3.81,2.43-6.66,9-7.47,14.44-11.9-1.74,9.75-7.24,15.84-13.95,19.31-23.14,11.96-46.78,22.94-70.24,34.3-.44-.57-.88-1.14-1.32-1.71Z\"\u003e\u003c\/path\u003e\n\n \u003c!-- 2nd 1 of 11 --\u003e\n \u003cpath id=\"1of11b\" class=\"b\" d=\"M1120.13,798.81c-2.33,9.85-8.35,15.85-15.7,19.62-22.6,11.59-45.59,22.44-68.43,33.57-.32-.39-.64-.79-.96-1.18,3.83-3.33,7.18-7.6,11.57-9.84,17.77-9.06,35.86-17.48,53.81-26.19,1.6-.78,3.94-1.66,4.35-2.98,2.27-7.43,9.06-9.11,15.37-13.01Z\"\u003e\u003c\/path\u003e\n \u003c\/g\u003e\n \u003c!-- Overlay for d20 --\u003e\n \u003cg id=\"sideOverlays\" filter=\"\"\u003e\n \u003cg filter=\"url(#inset-shadows-a)\"\u003e\n \u003cg filter=\"url(#inset-shadows-b)\"\u003e\n \u003cg filter=\"url(#inset-shadows-c)\"\u003e\n \u003cg filter=\"url(#inset-shadows-d)\"\u003e\n \u003cimage style=\"overflow:visible; transform:translate(872px, 560px);\" width=\"150\" height=\"150\" id=\"userImage\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/jesterSampleSVG02.svg?v=1677778938\" filter=\"\"\u003e\u003c\/image\u003e\n \u003c\/g\u003e\n \u003c\/g\u003e\n \u003c\/g\u003e\n \u003c!-- \u003cimage style=\"overflow:visible; transform:translate(872px, 100%);\" width=\"150\" height=\"150\" id=\"userImage\" xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/jesterSampleSVG01.svg?v=1677778938\" filter=\"url(#userImgFilter)\"\u003e\u003c\/image\u003e\t --\u003e\n \u003cimage xlink:href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/d20_outline.png?v=1716050261\" id=\"d20outline\" height=\"1080\" width=\"1920\" style=\"overflow: visible; opacity: 0; enable-background: new;\"\u003e \u003c\/image\u003e\n \u003c\/g\u003e\n \u003c\/g\u003e\n \u003c\/g\u003e\u003c\/svg\u003e\n \u003c!-- END OF SVG --\u003e\n \u003c\/div\u003e\n \u003cdiv id=\"svgAdjustTools\" class=\"\"\u003e\n \u003cspan\u003e\n \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/icon-nudge-up-01.png?v=1716394094\" style=\"height: 100%; width: 100%;\" onclick=\"nudgeImage('up')\" alt=\"Nudge Up\"\u003e\n \u003c\/span\u003e\n \u003cspan\u003e\n \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/icon-nudge-down-01.png?v=1716394094\" style=\"height: 100%; width: 100%;\" onclick=\"nudgeImage('down')\" alt=\"Nudge Down\"\u003e\n \u003c\/span\u003e\n \u003cspan\u003e\n \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/icon-nudge-zoom-in-01.png?v=1716394094\" style=\"height: 100%; width: 100%;\" onclick=\"zoomImg(1.1)\" alt=\"Zoom In\"\u003e\n \u003c\/span\u003e\n \u003cspan\u003e\n \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0549\/1379\/4157\/files\/icon-nudge-zoom-out-01.png?v=1716394094\" style=\"height: 100%; width: 100%;\" onclick=\"zoomImg(0.9)\" alt=\"Zoom Out\"\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"flex-container\" id=\"svgTools\"\u003e\n \u003cdiv class=\"flex-container-left\" id=\"lightIntensity\"\u003e\n \u003cform\u003e\n \u003cfieldset class=\"jester bright\"\u003e\n \u003cdiv class=\"qtySlideContainer\"\u003e\n \u003cdatalist id=\"brightLabels\"\u003e\n \u003coption value=\"0\" label=\"0%\"\u003e\u003c\/option\u003e\n \u003coption value=\"1\"\u003e\u003c\/option\u003e\n \u003coption value=\"2\"\u003e\u003c\/option\u003e\n \u003coption value=\"3\"\u003e\u003c\/option\u003e\n \u003coption value=\"4\"\u003e\u003c\/option\u003e\n \u003coption value=\"5\" label=\"50%\"\u003e\u003c\/option\u003e\n \u003coption value=\"6\"\u003e\u003c\/option\u003e\n \u003coption value=\"7\"\u003e\u003c\/option\u003e\n \u003coption value=\"8\"\u003e\u003c\/option\u003e\n \u003coption value=\"9\"\u003e\u003c\/option\u003e\n \u003coption value=\"10\" label=\"100%\"\u003e\u003c\/option\u003e\n \u003c\/datalist\u003e\n \u003cinput type=\"range\" min=\"0\" max=\"10\" value=\"5\" id=\"myRange2\" list=\"brightLabels\"\u003e\n \u003c\/div\u003e\n \u003c\/fieldset\u003e\n \u003clabel style=\"margin: -20px auto 5px auto\"\u003eLight Intensity \u003cspan id=\"brightLabel\"\u003e\u003c\/span\u003e\u003c\/label\u003e\n \u003c\/form\u003e\n \u003c\/div\u003e\n \n \u003cdiv class=\"flex-container-right\" id=\"toggleOverlay\" onclick=\"toggleOutline()\"\u003e\n \u003clabel class=\"switch\"\u003e\n \u003cinput id=\"jesterLimits\" type=\"checkbox\"\u003e \u003cspan class=\"slider round\"\u003e\u003c\/span\u003e\n \u003c\/label\u003e\n \u003clabel for=\"jesterLimits\"\u003e Toggle Outline\u003c\/label\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\u003cscript\u003e\nasync function thisIs(){\n const myTimeout = setTimeout(thatIs, 1000);\n}\nfunction thatIs() {\n\tvar AVISimage = document.querySelector('.ap-options__file').querySelector('a').href;\n\tdocument.getElementById('userImage').href.baseVal= AVISimage;\n}\nwindow.onload = (event) =\u003e {\n console.log('The page has fully loaded');\n\t\t\/\/Event Listener for AVIS Upload\n if(document.querySelector('.apo-file')){\n\t\t document.querySelector('.apo-file').addEventListener(\"change\", thisIs);\n }\n\t\tjesterColor('#ffff00','userImage');\n document.getElementById('myRange').addEventListener('change', changeQuantity);\n}\n\t\n function nudgeImage(direction) {\n var element = document.getElementById('userImage');\n if (!element) {\n console.error('Element not found');\n return;\n }\n var transform = element.style.transform;\n \/\/ Extract the translate values\n var translateMatch = \/translate\\(([^,]+),\\s*([^)]+)\\)\/.exec(transform);\n if (!translateMatch) {\n console.error('Invalid transform format');\n return;\n }\n var translateX = translateMatch[1];\n var translateY = parseFloat(translateMatch[2]);\n \/\/ Adjust the Y value based on the direction\n if (direction === 'up') {\n translateY -= 10; \/\/ Adjust by 10 pixels up\n } else if (direction === 'down') {\n translateY += 10; \/\/ Adjust by 10 pixels down\n } else {\n console.error('Invalid direction. Use \"up\" or \"down\".');\n return;\n }\n \/\/ Update the transform style\n element.style.transform = `translate(${translateX}, ${translateY}px)`;\n }\n\n function zoomImg(scaleFactor) {\n var userImage = document.getElementById('userImage');\n \/\/ Get the current width and height\n var width = parseFloat(userImage.getAttribute('width'));\n var height = parseFloat(userImage.getAttribute('height'));\n \/\/ Calculate the new width and height\n var newWidth = width * scaleFactor;\n var newHeight = height * scaleFactor;\n \/\/ Get the current transform property\n var transform = userImage.style.transform;\n \/\/ Extract the translate values\n var translateValues = transform.match(\/translate\\(([^)]+)\\)\/);\n var translateX = 0;\n var translateY = 0;\n if (translateValues) {\n var translateParts = translateValues[1].split(',');\n translateX = parseFloat(translateParts[0].trim());\n translateY = parseFloat(translateParts[1].trim());\n }\n \/\/ Adjust the translate values to keep the image centered\n var deltaX = (newWidth - width) \/ 2;\n var deltaY = (newHeight - height) \/ 2;\n translateX -= deltaX;\n translateY -= deltaY;\n \/\/ Set the new width and height\n userImage.setAttribute('width', newWidth);\n userImage.setAttribute('height', newHeight);\n \/\/ Update the transform property with the new translate values\n userImage.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n function changeQuantity() {\n var slider = document.getElementById(\"myRange\");\n var output = document.getElementById(\"qtyLabel\");\n var myQty = ['100', '200', '300', '400', '500'];\n output.innerHTML = myQty[slider.value - 1];\n var varQty; \/\/0 = 100, 2 = 200; 4 = 300; 6 = 400; 8 = 500\n switch (myQty[slider.value - 1]) {\n case '100':varQty = 0;break;\n case '200':varQty = 2;break;\n case '300':varQty = 4;break;\n case '400':varQty = 6;break;\n case '500':varQty = 8;break;\n }\n document.querySelectorAll(\".option-selector\")[0].children[1].children[varQty].click()\n }\nfunction diceRecolor(selectedColor){\n\tdocument.querySelector('#Layer_4').style.fill = selectedColor;\t\t\t\t\t\t\t\t\t\n}\nfunction changeRender(event,src) {\n document.querySelectorAll('.renders').forEach((item) =\u003e {\n item.style.opacity = 0\n })\n document.querySelectorAll('.activeSwatch').forEach( (btn) =\u003e {btn.classList.remove('activeSwatch')})\n event.target.classList.add('activeSwatch');\n if(src){\n var tgt = src;\n }else{\n var tgt = event.srcElement.classList[1];\n }\n var varNumber;\n switch (tgt) {\n case 'n4a':varNumber = 0;break;\n case 'n4b':varNumber = 2;break;\n case 'n4c':varNumber = 4;break;\n case 'n4d':varNumber = 6;break;\n case 'n4e':varNumber = 8;break;\n case 'n4f':varNumber = 10;break;\n case 'n4g':varNumber = 12;break;\n case 'n4j':varNumber = 14;break;\n case 'n4k':varNumber = 16;break;\n case 'n4l':varNumber = 18;break;\n case 'n4m':varNumber = 20;break;\n case 'n4n':varNumber = 22;break;\n case 'n4o':varNumber = 24;break;\n case 'n4p':varNumber = 26;break;\n case 'n4q': varNumber = 28; break;\n case 'n4r': varNumber = 30; break;\n case 'n4s': varNumber = 32; break;\n }\n if (document.querySelectorAll(\".option-selector\")[0]) {\n document.querySelectorAll(\".option-selector\")[1].children[1].children[varNumber].click()\n }\n document.getElementById(`d20_${tgt}_no-shade`).style.opacity = 1;\n var brightness = document.getElementById('myRange2').value;\n document.getElementById(`d20_${tgt}_shade`).style.opacity = brightness * 0.1;\n}\n\nfunction toggleOutline(){\n\tif(document.getElementById('jesterLimits').checked){\n document.getElementById('d20outline').style.opacity = 1\n }else{\n document.getElementById('d20outline').style.opacity = 0;\n }\n}\n\u003c\/script\u003e\n\u003cdiv class=\"flex-item-right\"\u003e\n \u003cdiv class=\"optionsPanel\"\u003e\n \u003ch6\u003e1. Pick the Inlay Color\u003c\/h6\u003e\n \u003cinput style=\"border: 2px black dashed\" type=\"color\" id=\"color1\" name=\"color1\" value=\"#ffff00\"\u003e\n \u003cdiv class=\"hot-flex-container\"\u003e\n \u003cinput title=\"Picker\" id=\"color2\" type=\"color\" class=\"hot-flex-item-all\" onchange=\"hotWatchPick()\"\u003e\n \u003cdiv title=\"Black\" class=\"hot-flex-item-left\" onclick=\"hotWatchInlay('#000000','Black')\"\u003e\u003cbr\u003e\u003c\/div\u003e\n \u003cdiv title=\"Gold\" class=\"hot-flex-item-left2\" onclick=\"hotWatchInlay('#d4af37','Gold')\"\u003e\u003cbr\u003e\u003c\/div\u003e\n \u003cdiv title=\"White\" class=\"hot-flex-item-right\" onclick=\"hotWatchInlay('#ffffff','White')\"\u003e\u003cbr\u003e\u003c\/div\u003e\n \u003cdiv title=\"Copper\" class=\"hot-flex-item-right2\" onclick=\"hotWatchInlay('#b87333','Copper')\"\u003e\u003cbr\u003e\u003c\/div\u003e\n \u003c\/div\u003e\n \u003chr\u003e\n \u003cdiv\u003e\n \u003ch6\u003e2. Pick the Dice Color\u003c\/h6\u003e\n \u003cbutton title=\"Artificial Intelligence\" class=\"swatchy n4a activeSwatch\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Asian Giant\" class=\"swatchy n4b\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Aggression Incarnate\" class=\"swatchy n4c\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Show Me The Light!\" class=\"swatchy n4d\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Conquering Aliens\" class=\"swatchy n4e\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Marbled\" class=\"swatchy n4f\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Bloody Intent\" class=\"swatchy n4g\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Hyperpower\" class=\"swatchy n4j\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Judge \u0026amp; Jury\" class=\"swatchy n4k\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Purple\" class=\"swatchy n4l\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Union\" class=\"swatchy n4m\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Lost Colony\" class=\"swatchy n4n\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Search For Knowledge\" class=\"swatchy n4o\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Thrice \u0026amp; Coalition\" class=\"swatchy n4p\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Matte Black\" class=\"swatchy n4q\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Radioactive Green\" class=\"swatchy n4r\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003cbutton title=\"Marbled White\" class=\"swatchy n4s\" onclick=\"changeRender(event)\"\u003e\u003c\/button\u003e\n \u003c\/div\u003e\n \u003chr\u003e\n \u003cdiv\u003e\n \u003ch6\u003e3. Upload your Design\u003c\/h6\u003e\n \u003cp\u003ePlease upload an SVG or Black and White PNG file without a background. A great resource is \u003ca href=\"https:\/\/picsvg.com\/\" target=\"_blank\"\u003ehttps:\/\/picsvg.com\/\u003c\/a\u003e to get an SVG version of your image!\u003c\/p\u003e\n \u003cdiv id=\"moveUploadHere\"\u003e\u003c\/div\u003e\n \u003c\/div\u003e\n \u003chr\u003e\n \u003cform\u003e\n \u003clabel\u003e\n \u003ch6\u003e4. Pick Your Quantity: \u003cspan id=\"qtyLabel\"\u003e100\u003c\/span\u003e\n\u003c\/h6\u003e\n \u003c\/label\u003e\n \u003cfieldset class=\"jester\"\u003e\n \u003cdiv class=\"qtySlideContainer\"\u003e\n \u003cdatalist id=\"qtyLabels\"\u003e\n \u003coption value=\"1\" label=\"100\"\u003e\u003c\/option\u003e\n \u003coption value=\"2\"\u003e\u003c\/option\u003e\n \u003coption value=\"3\"\u003e\u003c\/option\u003e\n \u003coption value=\"4\"\u003e\u003c\/option\u003e\n \u003coption value=\"5\" label=\"500\"\u003e\u003c\/option\u003e\n \u003c\/datalist\u003e\n \u003cinput type=\"range\" min=\"1\" max=\"5\" value=\"1\" id=\"myRange\" list=\"qtyLabels\"\u003e\n \u003c\/div\u003e\n \u003cdiv id=\"moveUploadHerePrice\"\u003e\u003c\/div\u003e\n \u003c\/fieldset\u003e\n \u003c\/form\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/body\u003e","brand":"BaronOfDice","offers":[{"title":"100 \/ Artificial Intelligence","offer_id":54149599363390,"sku":"6701a316ad367","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Asian Giant","offer_id":54149599396158,"sku":"6701a317afb79","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Aggression Incarnate","offer_id":54149599428926,"sku":"6701a315888ea","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Show Me The Light!","offer_id":54149599461694,"sku":"6701a321ded4d","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Conquering Aliens","offer_id":54149599494462,"sku":"6701a319ad0bb","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Marbled","offer_id":54149599527230,"sku":"6701a31eb0a10","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Bloody Intent","offer_id":54149599559998,"sku":"6701a318b7367","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Hyperpower","offer_id":54149599592766,"sku":"6701a31ac6063","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Judge \u0026 Jury","offer_id":54149599625534,"sku":"6701a31cb4bd9","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Purple","offer_id":54149599658302,"sku":"6701a31fc8782","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Union","offer_id":54149599691070,"sku":"6701a323f13ac","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Lost Colony","offer_id":54149599723838,"sku":"6701a31dadb8e","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Search For Knowledge","offer_id":54149599756606,"sku":"6701a320e0b13","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Thrice \u0026 Coalition","offer_id":54149599789374,"sku":"6701a322f091b","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Matte Black","offer_id":54149599822142,"sku":"4985621312","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Radioactive Green","offer_id":54149599854910,"sku":"4985621315","price":295.0,"currency_code":"USD","in_stock":false},{"title":"100 \/ Marbled White","offer_id":54149599887678,"sku":"4985621318","price":295.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Artificial Intelligence","offer_id":54149599920446,"sku":"6701a3268b2fd","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Asian Giant","offer_id":54149599953214,"sku":"6701a3277dfb5","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Aggression Incarnate","offer_id":54149599985982,"sku":"6701a325904de","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Show Me The Light!","offer_id":54149600018750,"sku":"6701a331044e2","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Conquering Aliens","offer_id":54149600051518,"sku":"6701a329b0bda","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Marbled","offer_id":54149600084286,"sku":"6701a32dde039","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Bloody Intent","offer_id":54149600117054,"sku":"6701a32880d1b","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Hyperpower","offer_id":54149600149822,"sku":"6701a32ac6d80","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Judge \u0026 Jury","offer_id":54149600182590,"sku":"6701a32bcf83a","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Purple","offer_id":54149600215358,"sku":"6701a32edeb18","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Union","offer_id":54149600248126,"sku":"6701a3330a2ea","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Lost Colony","offer_id":54149600280894,"sku":"6701a32ccd601","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Search For Knowledge","offer_id":54149600313662,"sku":"6701a32fccddc","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Thrice \u0026 Coalition","offer_id":54149600346430,"sku":"6701a3320aa21","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Matte Black","offer_id":54149600379198,"sku":"4985621322","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Radioactive Green","offer_id":54149600411966,"sku":"4985621325","price":570.0,"currency_code":"USD","in_stock":false},{"title":"200 \/ Marbled White","offer_id":54149600444734,"sku":"4985621328","price":570.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Artificial Intelligence","offer_id":54149600477502,"sku":"6701a3354dc4b","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Asian Giant","offer_id":54149600510270,"sku":"6701a33688e78","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Aggression Incarnate","offer_id":54149600543038,"sku":"6701a334343d6","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Show Me The Light!","offer_id":54149600575806,"sku":"6701a34014e69","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Conquering Aliens","offer_id":54149600608574,"sku":"6701a3389e3da","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Marbled","offer_id":54149600641342,"sku":"6701a33cde8b7","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Bloody Intent","offer_id":54149600674110,"sku":"6701a33796855","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Hyperpower","offer_id":54149600706878,"sku":"6701a339bee66","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Judge \u0026 Jury","offer_id":54149600739646,"sku":"6701a33ac98df","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Purple","offer_id":54149600772414,"sku":"6701a33e07aaf","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Union","offer_id":54149600805182,"sku":"6701a3422eef5","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Lost Colony","offer_id":54149600837950,"sku":"6701a33bd0018","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Search For Knowledge","offer_id":54149600870718,"sku":"6701a33f104fa","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Thrice \u0026 Coalition","offer_id":54149600903486,"sku":"6701a3411dbae","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Matte Black","offer_id":54149600936254,"sku":"4985621331","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Radioactive Green","offer_id":54149600969022,"sku":"4985621335","price":795.0,"currency_code":"USD","in_stock":false},{"title":"300 \/ Marbled White","offer_id":54149601001790,"sku":"4985621338","price":795.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Artificial Intelligence","offer_id":54149601034558,"sku":"6701a34613f1c","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Asian Giant","offer_id":54149601067326,"sku":"6701a34714fcd","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Aggression Incarnate","offer_id":54149601100094,"sku":"6701a34337a77","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Show Me The Light!","offer_id":54149601132862,"sku":"6701a350a7b28","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Conquering Aliens","offer_id":54149601165630,"sku":"6701a34976943","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Marbled","offer_id":54149601198398,"sku":"6701a34d89f95","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Bloody Intent","offer_id":54149601231166,"sku":"6701a34865854","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Hyperpower","offer_id":54149601263934,"sku":"6701a34a71c9d","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Judge \u0026 Jury","offer_id":54149601296702,"sku":"6701a34b80dc3","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Purple","offer_id":54149601329470,"sku":"6701a34e947fd","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Union","offer_id":54149601362238,"sku":"6701a352b9504","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Lost Colony","offer_id":54149601395006,"sku":"6701a34c84d8c","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Search For Knowledge","offer_id":54149601427774,"sku":"6701a34f973d3","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Thrice \u0026 Coalition","offer_id":54149601460542,"sku":"6701a351addf4","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Matte Black","offer_id":54149601493310,"sku":"4985621341","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Radioactive Green","offer_id":54149601526078,"sku":"4985621345","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"400 \/ Marbled White","offer_id":54149601558846,"sku":"4985621348","price":1000.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Artificial Intelligence","offer_id":54149601591614,"sku":"6701a354e8f81","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Asian Giant","offer_id":54149601624382,"sku":"6701a355e01af","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Aggression Incarnate","offer_id":54149601657150,"sku":"6701a353c3eb1","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Show Me The Light!","offer_id":54149601689918,"sku":"6701a35fda5e6","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Conquering Aliens","offer_id":54149601722686,"sku":"6701a35863244","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Marbled","offer_id":54149601755454,"sku":"6701a35cd096e","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Bloody Intent","offer_id":54149601788222,"sku":"6701a356f0e72","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Hyperpower","offer_id":54149601820990,"sku":"6701a359a19dc","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Judge \u0026 Jury","offer_id":54149601853758,"sku":"6701a35abe5e9","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Purple","offer_id":54149601886526,"sku":"6701a35dce7c6","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Union","offer_id":54149601919294,"sku":"6701a361d4249","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Lost Colony","offer_id":54149601952062,"sku":"6701a35bcbf68","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Search For Knowledge","offer_id":54149601984830,"sku":"6701a35edbee1","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Thrice \u0026 Coalition","offer_id":54149602017598,"sku":"6701a360da199","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Matte Black","offer_id":54149602050366,"sku":"4985621351","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Radioactive Green","offer_id":54149602083134,"sku":"4985621354","price":1175.0,"currency_code":"USD","in_stock":false},{"title":"500 \/ Marbled White","offer_id":54149602115902,"sku":"4985621358","price":1175.0,"currency_code":"USD","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1935\/5029\/files\/Product-Custom-D20.jpg?v=1787158982","url":"https:\/\/themagesemporium.com\/products\/custom-d20","provider":"The Mage's Emporium","version":"1.0","type":"link"}