Build-A-Hypehead

Avatar Builder – Mr Potato Mode</n <style> body {margin:0;padding-top:80px;font-family:sans-serif;background:transparent;} #builder-container {display:flex;max-width:1400px;margin:0 auto;background:#fff;padding:20px;} .main {flex:1;background:#fff;} .tabs {display:flex;gap:10px;margin-bottom:10px;padding:5px;border-bottom:1px solid #ccc;background:#fff;} .tab {padding:6px 10px;background:#eee;border:1px solid #ccc;border-bottom:none;cursor:pointer;user-select:none;color:#000;} .tab.active {background:#fff;font-weight:bold;border-bottom:2px solid #fff;} .thumbs {display:grid;grid-template-columns:repeat(auto-fill,80px);gap:8px;padding:8px;border:1px solid #ccc;margin-bottom:10px;background:#fff;} .thumbs img {width:60px;height:60px;object-fit:contain;cursor:pointer;user-select:none;-webkit-user-drag:none;} #stage {position:relative;width:800px;height:800px;background:#fff;border:1px solid #ccc;margin-bottom:10px;overflow:visible;} .stage-item {position:absolute;overflow:visible;cursor:move;} .stage-item img {display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;} .delete-btn {position:absolute;top:-10px;right:-10px;width:24px;height:24px;background:#e74c3c;color:#fff;border:none;border-radius:50%;font-size:16px;line-height:24px;text-align:center;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;pointer-events:auto;} #layers-panel {width:200px;background:#f9f9f9;border:1px solid #ccc;padding:10px;margin-left:20px;} #layers-panel h2 {margin-top:0;font-size:16px;} #layers-list {list-style:none;padding:0;margin:0;max-height:840px;overflow-y:auto;} #layers-list li {display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;background:#fff;border:1px solid #ddd;padding:4px;cursor:pointer;} #layers-list li.selected {background:#e0f7fa;} #save-btn {padding:8px 16px;} </style> </head> <body> <div id="builder-container"> <div class="main"> <div class="tabs"></div> <div class="thumbs"></div> <div id="stage"></div> <button id="save-btn">Save as PNG</button> <canvas id="exportCanvas" width="800" height="800" style="display:none;"></canvas> </div> <div id="layers-panel"> <h2>Layers</h2> <ul id="layers-list"></ul> </div> </div> <script> const layersData = { head:['head1.png','head2.png'], hair:['hair1.png','hair2.png'], hat:['hat1.png','hat2.png'], bottom:['bottom1.png','bottom2.png'], sneaker:['sneaker1.png','sneaker2.png'], accessories:['accessories1.png','accessories2.png'], pattern:['pattern1.png','pattern2.png'], top:['top1.png','top2.png'] }; const imageBase = 'https://fullermoe.github.io/hypeheads-builder-assets/'; const tabsEl = document.querySelector('.tabs'); const thumbsEl = document.querySelector('.thumbs'); const stage = document.getElementById('stage'); const layersList = document.getElementById('layers-list'); const exportCanvas = document.getElementById('exportCanvas'); const exportCtx = exportCanvas.getContext('2d'); let currentCat = Object.keys(layersData)[0]; let dragInfo = null; const placed = []; // Initialize tabs Object.keys(layersData).forEach((cat, i) => { const tab = document.createElement('div'); tab.textContent = cat; tab.className = 'tab' + (i ? '' : ' active'); tab.onclick = () => selectCat(cat, tab); tabsEl.append(tab); }); selectCat(currentCat, tabsEl.firstChild); function selectCat(cat, tabEl) { currentCat = cat; document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); tabEl.classList.add('active'); thumbsEl.innerHTML = ''; layersData[cat].forEach(fn => { const img = document.createElement('img'); img.src = imageBase + cat + '/' + fn; img.onclick = () => addToStage(cat, fn); thumbsEl.append(img); }); } function addToStage(cat, fn) { const wrapper = document.createElement('div'); wrapper.className = 'stage-item'; wrapper.style.left = '0px'; wrapper.style.top = '0px'; wrapper.style.zIndex = placed.length; // Image const img = document.createElement('img'); img.src = imageBase + cat + '/' + fn; img.width = 200; img.height = 200; wrapper.appendChild(img); // Delete button const del = document.createElement('button'); del.className = 'delete-btn'; del.innerText = '×'; del.onclick = e => { e.stopPropagation(); removeItem(wrapper); }; wrapper.appendChild(del); // Drag handlers wrapper.onmousedown = e => startDrag(e, wrapper); stage.appendChild(wrapper); placed.push(wrapper); updateZ(); addLayerItem(wrapper, cat + '/' + fn); } function removeItem(wrapper) { const idx = placed.indexOf(wrapper); if (idx > -1) { stage.removeChild(wrapper); const liIndex = placed.length - 1 - idx; layersList.removeChild(layersList.children[liIndex]); placed.splice(idx, 1); updateZ(); } } function addLayerItem(wrapper, label) { const li = document.createElement('li'); li.textContent = label.split('/')[0]; li.onclick = () => selectLayer(wrapper, li); layersList.prepend(li); selectLayer(wrapper, li); } function selectLayer(wrapper, li) { document.querySelectorAll('#layers-list li').forEach(x => x.classList.remove('selected')); li.classList.add('selected'); placed.forEach(x => x.style.outline = ''); wrapper.style.outline = '2px solid #4caf50'; } function updateZ() { placed.forEach((el, i) => el.style.zIndex = i); } function startDrag(e, wrapper) { e.preventDefault(); const ox = parseInt(wrapper.style.left), oy = parseInt(wrapper.style.top); dragInfo = { wrapper, x: e.clientX, y: e.clientY, ox, oy }; window.addEventListener('mousemove', onDrag); window.addEventListener('mouseup', endDrag); } function onDrag(e) { if (!dragInfo) return; const d = dragInfo; d.wrapper.style.left = (d.ox + e.clientX - d.x) + 'px'; d.wrapper.style.top = (d.oy + e.clientY - d.y) + 'px'; } function endDrag() { window.removeEventListener('mousemove', onDrag); window.removeEventListener('mouseup', endDrag); dragInfo = null; } // Delete with keyboard window.addEventListener('keydown', e => { if (e.key === 'Delete') { const selIdx = Array.from(layersList.children).findIndex(li => li.classList.contains('selected')); if (selIdx > -1) { const wrapperIdx = placed.length - 1 - selIdx; removeItem(placed[wrapperIdx]); } } }); document.getElementById('save-btn').onclick = () => { exportCtx.clearRect(0, 0, 800, 800); placed.forEach(wrapper => { const img = wrapper.querySelector('img'); const x = parseInt(wrapper.style.left), y = parseInt(wrapper.style.top); exportCtx.drawImage(img, x, y, img.width, img.height); }); const a = document.createElement('a'); a.href = exportCanvas.toDataURL(); a.download = 'avatar.png'; a.click(); }; </script> <style> .fab-marquee img {max-width: inherit;} </style> <div id="shopify-block-AM05QbkZpaG5MWU93V__18228966181090706294" class="shopify-block shopify-app-block"> <script type="module" src="https://cdn.shopify.com/extensions/9275352d-57ec-4ca6-bee9-58e63a13414e/selleasy-161/assets/lb-upsell.js" defer></script> <script type="module" src="https://cdn.shopify.com/extensions/9275352d-57ec-4ca6-bee9-58e63a13414e/selleasy-161/assets/lb-upsell-components.esm.js" defer></script> <script type="module" src="https://cdn.shopify.com/extensions/9275352d-57ec-4ca6-bee9-58e63a13414e/selleasy-161/assets/lb-utils.js" defer></script> </div><div id="shopify-block-AcjNPOTVFb0dUSjdJR__7430214966741109568" class="shopify-block shopify-app-block"> <script defer src="https://cdn.marquee.fabapps.co/js/app.js"></script> <script defer src="https://cdn.marquee.fabapps.co/config/fullermoe.myshopify.com.config.js"></script> <style> .fab-marquee-mouse:hover .fab-marquee-content { animation-play-state: paused !important; } @keyframes scrolling-reverse { 0% { transform: translatex(-100%) } to { transform: translateX(0) } } @keyframes scrolling { 0% { transform: translateX(0) } to { transform: translatex(-100%) } } @keyframes scrolling-reverse-leading { 0% { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes scrolling-reverse-lagging { 0% { transform: translateX(-200%); } to { transform: translateX(0%); } } @keyframes scrolling-leading { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes scrolling-lagging { 0% { transform: translateX(0%); } to { transform: translateX(-200%); } } </style>  </div><div id="shopify-block-AWFF2YUttaTZXMTFKR__477467645007963971" class="shopify-block shopify-app-block"> </div><div id="shopify-block-AUUdNUGQ4MTBOeHBYR__7231527610335159538" class="shopify-block shopify-app-block"><script> window.globalCoursesSubstriptionButtonName = "Manage subscriptions"; </script> </div><div id="shopify-block-Aa2FoK2l5NWZBWXJ1a__12643349056429947648" class="shopify-block shopify-app-block"><script src="https://cdn.shopify.com/extensions/193ca65c-00b8-4a82-be7d-10cca2bb2b9d/sticky-add-to-cart-booster-pro-5/assets/satcb.min.js" async defer></script> </div><div id="shopify-block-AakNoTzR0N0NkN3Z2W__11532412952436166569" class="shopify-block shopify-app-block"><script async src="https://loox.io/widget/E1WDceVLh_/loox.1591559255769.js?shop=fullermoe.myshopify.com"></script> <script>var loox_global_hash = '1754607673533';</script><style>.loox-reviews-default { max-width: 1200px; margin: 0 auto; }.loox-rating .loox-icon { color:#DCEF6F; } :root { --lxs-rating-icon-color: #DCEF6F; }</style><svg xmlns="http://www.w3.org/2000/svg" style="display: none" id="loox-rating-icon-svg-store"> <defs> <clipPath id="looxicons-rating-icon-fill_star-pointy-fill__a"> <path d="M0 0h24v24H0z" /> </clipPath> <clipPath id="looxicons-rating-icon-line_star-pointy-line__a"> <path d="M0 0h24v24H0z" /> </clipPath> </defs> <symbol id="looxicons-rating-icon-fill" viewBox="0 0 24 24" fill="currentcolor"> <g clip-path="url(#star-pointy-fill__a)"> <path d="m12 19.261-7.416 4.151 1.656-8.335L0 9.306l8.44-1.002L12 .588l3.56 7.717L24 9.306l-6.24 5.77 1.656 8.336L12 19.262Z" /> </g> </symbol> <symbol id="looxicons-rating-icon-line" viewBox="0 0 24 24" fill="currentcolor"> <g clip-path="url(#star-pointy-line__a)"> <path d="m12 19.261-7.416 4.151 1.656-8.335L0 9.306l8.44-1.002L12 .588l3.56 7.717L24 9.306l-6.24 5.77 1.656 8.336L12 19.262Zm0-2.41 4.465 2.5-.997-5.019 3.756-3.475-5.081-.602L12 5.608l-2.143 4.648-5.081.601 3.756 3.475-.997 5.019L12 16.85Z" /> </g> </symbol> <defs> <style> .lx-icon-fill { --lx-fill-width: calc(100% - var(--lx-rating-percent, 0%)); clip-path: inset(0 var(--lx-fill-width, 0) 0 0); } .lx-icon-line { clip-path: inset(0 0 0 var(--lx-rating-percent, 0%)); } [data-lx-fill='empty'] { --lx-rating-percent: 0%; } [data-lx-fill='half'] { --lx-rating-percent: 50%; } [data-lx-fill='full'] { --lx-rating-percent: 100%; } </style> <g id="looxicons-rating-icon"> <use href="#looxicons-rating-icon-line" class="lx-icon-line"></use> <use href="#looxicons-rating-icon-fill" class="lx-icon-fill"></use> </g> </defs> </svg> </div></body> </html> </div> </div> </div> </gp-row> </section> </section><script data-locksmith> var load = function () { if (document.querySelectorAll('.locksmith-manual-trigger').length > 0) { Locksmith.ping(); } Locksmith.util.on('submit', 'locksmith-resource-form', function (event) { event.preventDefault(); var data = Locksmith.util.serializeForm(event.target); Locksmith.postResource(data, { spinner: false, container: 'locksmith-content' }); }); Locksmith.util.on('click', 'locksmith-manual-trigger', function (event) { event.preventDefault(); Locksmith.postResource({}, { spinner: true, container: document }); }); Locksmith.submitPasscode = function (passcode) { Locksmith.postResource( { passcode: passcode }, { spinner: false, container: 'locksmith-content' } ); }; }; if (typeof Locksmith !== 'undefined') { load(); } else { window.addEventListener('load', load); } </script> <script> class SHTCarouselWrapper extends HTMLElement{constructor(){super(),this.$=this.querySelectorAll.bind(this),this.carousels=this.$(".js-carousel-item"),this.container=this.$(".js-carousel-items"),this.onlyEnableMobile=this.dataset.onMobileOnly||"false","true"==this.onlyEnableMobile&&this.prepare()}prepare(){let t=this.dataset.cssClassOnContainer.split(" "),e=this.dataset.cssClassOnItem.split(" ");window.matchMedia("(max-width: 768px)").matches?(this.toggleClass(this.container,t,!0),this.toggleClass(this.carousels,e,!0)):(this.toggleClass(this.container,t,!1),this.toggleClass(this.carousels,e,!1)),new ResizeObserver(s=>{window.matchMedia("(max-width: 768px)").matches?(this.toggleClass(this.container,t,!0),this.toggleClass(this.carousels,e,!0)):(this.toggleClass(this.container,t,!1),this.toggleClass(this.carousels,e,!1))}).observe(document.body)}toggleClass(s,t,e){e&&s.forEach(s=>{s.classList.add(...t)}),e||s.forEach(s=>{s.classList.remove(...t)})}setCarouselVisibility(s,t){s.forEach(s=>{s.setAttribute("tabindex",""+t)})}}customElements.define("sht-carousel-wrapper",SHTCarouselWrapper); </script> </main> <div id="shopify-section-sections--17486412283973__footer" class="shopify-section shopify-section-group-footer-group"><footer id="section-footer" class=" section footer js-footer section--solid color-scheme-5" data-ui-component="Section Footer"> <div class="footer__wrapper ctnr background"> <div class="" style="--w-xs: 12;"> <button onclick="SHTHelper.qde.scrollTo({top: 0, behavior: `smooth`});" class="mb-64 pt-lg-12 pb-lg-12 btn btn-link btn-small padding--start js-back-to-top-btn "> Back to top <svg class="ml-8" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2071 7.62131L5.91421 12.9142L4.5 11.5L12.2071 3.79288L19.9142 11.5L18.5 12.9142L13.2071 7.62131L13.2071 20.2071L11.2071 20.2071L11.2071 7.62131Z"/> </svg> </button> <div class="rw"><div class="store-information clm fg-1 fs-0" style="--w-xs: 12;"> <h2 class="menu__heading fw-700 pt-8 pb-8 m-zero d-block hide-empty">©2025 GFXWRLD</h2> <div class="footer__logo d-block mt-24 mb-24" style="--logo-width: 40px"><img srcset="//gfxwrld.com/cdn/shop/files/GFXWRLD-Green.svg?v=1736613678&width=40 1x, //gfxwrld.com/cdn/shop/files/GFXWRLD-Green.svg?v=1736613678&width=80 2x" src="//gfxwrld.com/cdn/shop/files/GFXWRLD-Green.svg?v=1736613678&width=40" loading="lazy" class="logo" width="180" height="180" alt="GFXWRLD®"> </div> <div class="text-block pt-12 hide-empty"></div> </div><div class="clm fg-1 fs-0 maw-100" style="--w-xs: 12; --w-lg: 3;"> <h2 class="menu__heading fw-700 pt-8 pb-8 m-zero d-block hide-empty">Contact us</h2> <div class="contact__wrapper footer__contact pt-4 wb-break-word"> <span class="d-block h5 m-zero d-none-important">Contact us</span> <div class="contact__list d-flex fd-column r-gap-16"><a href="mailto:help@gfxwrld.us" class="contact__item d-flex middle-xs "> <span class="icon mr-8 fs-0 bs-none"><svg class="" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20 7H4V17H20V7ZM2 5V19H22V5H2Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.47855 7.85328L3.52145 6.14672L12 11.3281L20.4785 6.14672L21.5215 7.85328L12 13.6719L2.47855 7.85328Z"/> </svg> </span>help@gfxwrld.us</a></div> </div> </div><div class="clm hide-empty clm fg-1 fs-0 maw-100" style="--w-xs: 12; --w-lg: 3;"><div class="footer__socials maw-lg-100 m-auto"> <span class="menu__heading fw-700 pt-8 pb-8 m-zero d-block ta-left hide-empty">Follow GFXWRLD</span> <ul class="mt-16 start-xs gap-16 ls-none d-flex fw-wrap hide-empty"><li> <a href="http://instagram.com/gfxwrld" rel="noopener" title="Instagram" aria-label="Instagram" class="btn btn-icon btn-large btn-primary js-social-btn"> <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49995 12C7.49995 9.51473 9.51467 7.50001 12 7.50001C14.4852 7.50001 16.5 9.51473 16.5 12C16.5 14.4853 14.4852 16.5 12 16.5C9.51467 16.5 7.49995 14.4853 7.49995 12ZM12 9.30001C10.5088 9.30001 9.29995 10.5088 9.29995 12C9.29995 13.4912 10.5088 14.7 12 14.7C13.4911 14.7 14.7 13.4912 14.7 12C14.7 10.5088 13.4911 9.30001 12 9.30001Z" /> <path d="M16.8 8.40001C17.4627 8.40001 18 7.86275 18 7.20001C18 6.53727 17.4627 6.00001 16.8 6.00001C16.1372 6.00001 15.6 6.53727 15.6 7.20001C15.6 7.86275 16.1372 8.40001 16.8 8.40001Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.69995 7.20001C2.69995 4.71473 4.71467 2.70001 7.19995 2.70001H16.8C19.2852 2.70001 21.3 4.71473 21.3 7.20001V16.8C21.3 19.2853 19.2852 21.3 16.8 21.3H7.19995C4.71467 21.3 2.69995 19.2853 2.69995 16.8V7.20001ZM7.19995 4.50001C5.70878 4.50001 4.49995 5.70884 4.49995 7.20001V16.8C4.49995 18.2912 5.70878 19.5 7.19995 19.5H16.8C18.2911 19.5 19.5 18.2912 19.5 16.8V7.20001C19.5 5.70884 18.2911 4.50001 16.8 4.50001H7.19995Z" /> </svg> </a> </li></ul> </div></div> <div class="menu-group fw-wrap d-flex w-100 r-gap-32" style="--w-lg: 6"> <div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;"> <div class="c-gap r-gap-lg-24"><a href="/" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block "> <span class="d-block link__title">Home</span> </a></div> </div> <div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;"> <div class="c-gap r-gap-lg-24"><a href="/pages/installation-usage-videos" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block "> <span class="d-block link__title">Installation & Usage Videos</span> </a></div> </div> <div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;"> <div class="c-gap r-gap-lg-24"><a href="/pages/faqs" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block "> <span class="d-block link__title">FAQs</span> </a></div> </div> <div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;"> <div class="c-gap r-gap-lg-24"><a href="/policies/refund-policy" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block "> <span class="d-block link__title">Refund policy</span> </a></div> </div> <div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;"> <div class="c-gap r-gap-lg-24"><a href="/policies/privacy-policy" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block "> <span class="d-block link__title">Privacy Policy</span> </a></div> </div> <div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;"> <div class="c-gap r-gap-lg-24"><a href="/policies/terms-of-service" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block "> <span class="d-block link__title">Terms of Service</span> </a></div> </div> <div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;"> <div class="c-gap r-gap-lg-24"><a href="/pages/affiliate-program" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block "> <span class="d-block link__title">Become An Affiliate</span> </a></div> </div> </div> </div> <div class="footer__content__bottom m-auto d-flex center-xs fd-column middle-xs fd-row-lg between-lg mt-64 gap-24 c-gap-lg-48 r-gap-lg-4"> <div class="d-flex fd-column center-xs middle-xs fd-row-lg w-100 w-sm-auto fw-wrap r-gap-lg-24 start-md" style=" --w-lg: 7;"> <div class="footer-localization p-relative-lg d-flex fw-wrap fw-nowrap-md hide-empty mb-64 mb-lg-0 pr-lg-48 gap-16 r-gap-24"><sht-localization class="d-flex fg-1" data-js-file-id="component-language-switcher-js-file" data-js-file="//gfxwrld.com/cdn/shop/t/47/assets/component-language-switcher.js?v=29174795681782628481749326515" data-section-id="shopify-section-language-switcher" data-url="/?section_id=language-switcher"> <button type="button" class="js-language-switcher-btn btn-localization fs-body d-flex between-xs middle-xs w-100 ta-left field__text field--focus field--hover c-pointer"> English <svg class="" width="20px" height="20px" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 9.00421L18.2929 7.59L12 13.8829L5.70712 7.59L4.29291 9.00421L12 16.7113L19.7071 9.00421Z"/> </svg> </button> </sht-localization></div></div> <div class="d-flex fd-column fd-row-lg r-gap-24 r-gap-lg-12 fw-wrap end-md" style=" --w-lg: 5;"> <div class="color-light subtext pt-lg-12 pb-lg-12 ta-center ta-right-lg pl-lg-48"> <small class="subtext">© <a href="/" title="">GFXWRLD®</a> • </small> <small class="subtext"><a target="_blank" rel="nofollow" href="https://www.shopify.com?utm_campaign=poweredby&utm_medium=shopify&utm_source=onlinestore">Powered by Shopify</a></small> </div> </div> </div> </div> </div> </footer> </div> <div id="shopify-section-popup" class="shopify-section"></div><sht-dialog-quickshop class="sht-dialog dialog__quickshop color-scheme-3 no-focus-visible middle-md bottom-xs center-xs p-fixed left-0 top-0 h-100 w-100 o-auto zi-9" id="dialogQuickShop" hidden tabindex="-1"> <div class="dialog js-dialog-container disable-scrollbars oy-scroll h-100" role="dialog" aria-labelledby="dialogQuickShopTitle" aria-modal="true"> <div class="p-sticky top-0 zi-2"> <div class="dialog__header d-flex between-xs middle-xs p-absolute top-0 right-0 bg-transparent"> <button type="button" aria-label="Close Modal" class="dialog__btn js-dialog-close-btn btn btn-icon btn-small icon btn-secondary"><svg class="" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6569 19.0711L4.92893 6.34314L6.34315 4.92892L19.0711 17.6568L17.6569 19.0711Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.92893 17.6568L17.6569 4.92892L19.0711 6.34314L6.34315 19.0711L4.92893 17.6568Z"/> </svg> </button> </div> </div> <div class="dialog__content d-flex fd-column h-100 p-relative"> <div class="dialog__body js-dialog-body p-relative"> </div> </div> </div> </sht-dialog-quickshop> <sht-dialog-quickbuy class="sht-dialog dialog__quickbuy bg-transparent color-scheme-3 d-flex no-focus-visible end-sm bottom-xs center-xs p-fixed left-0 top-0 h-100 w-100 o-auto zi-9" id="dialogQuickBuy" hidden tabindex="-1"> <div class="dialog js-dialog-container disable-scrollbars oy-scroll" role="dialog" aria-labelledby="dialogQuickBuyTitle" aria-modal="true"> <div class="dialog__header d-flex between-xs middle-xs p-sticky top-0"> <h3 class="h5 m-zero"> Variant picker </h3> <button type="button" aria-label="Close Modal" class="dialog__btn js-dialog-close-btn btn btn-icon btn-small icon btn-secondary"><svg class="" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6569 19.0711L4.92893 6.34314L6.34315 4.92892L19.0711 17.6568L17.6569 19.0711Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.92893 17.6568L17.6569 4.92892L19.0711 6.34314L6.34315 19.0711L4.92893 17.6568Z"/> </svg> </button> </div> <div class="dialog__body js-dialog-body"> </div> </div> </sht-dialog-quickbuy> <ul hidden><li id="a11y-refresh-page-message">Choosing a selection results in a full page refresh.</li><li id="a11y-new-window-message">Opens in a new window.</li></ul> <script src="//gfxwrld.com/cdn/shop/t/47/assets/theme.js?v=58056035068109033901749326515" defer="defer"></script><link rel="stylesheet" href="//gfxwrld.com/cdn/shop/t/47/assets/animation.css?v=549300214328544041749326515" media="print" onload="this.media='all'"> <style> .fab-marquee img {max-width: inherit;} </style> </body> </html>