<div id="unatpepeviewer" width="256" height="256"></div>
<input id="blk" type="number" style="display:none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
// Retrieve render area
const root = document.getElementById('unatpepeviewer')
root.parentElement.style.width = '100%'
root.parentElement.style.height = '100%'
root.parentElement.style.padding = '0px'
root.parentElement.style.margin = '0px'
const orgWidth = 212
const orgHeight = 212
let scaleW = 1
let scaleH = 1
let blockNumber = '0'
const colorMap = {
svgBodyPurplePepe: "#662d91",
svgBodyRedPepe: "#ed1c24",
svgBodyYellowPepe: "#fcee21",
svgBodyBrownPepe: "#754c24",
svgBodyClassicPepe: "#009245",
svgBodyDiamondPepe: "#0ff",
svgBodyGreyPepe: "#999",
svgBodyNeonGreenPepe: "#0dff00",
svgBodyOrangePepe: "#ffc200",
svgBodyPinkPepe: "#ff7bac"
}
const colorMap2 = {
svgBodyPurplePepe: "#502675",
svgBodyRedPepe: "#af1722",
svgBodyYellowPepe: "#d1c01e",
svgBodyBrownPepe: "#723e14",
svgBodyClassicPepe: "#006837",
svgBodyDiamondPepe: "#00bab5",
svgBodyGreyPepe: "#666",
svgBodyNeonGreenPepe: "#0ec100",
svgBodyOrangePepe: "#d87a1d",
svgBodyPinkPepe: "#ce6590"
}
const traitBackground = {
svgBackgroundOrange: "#ff9900",
svgBackgroundDark: "#313131",
svgBackgroundDarkBlue: "#1b1464",
svgBackgroundNeonGreen: "#20ef42",
svgBackgroundGreen: "#195653",
svgBackgroundRed: "#ce5541",
svgBackgroundLight: "#b3b3b3",
svgBackgroundBrown: "#8c6239",
svgBackgroundPink: "#ff398a",
svgBackgroundBlue: "#1c64f4",
}
const traitBody = {
svgBodyDiamondPepe: true,
svgBodyYellowPepe: true,
svgBodyNeonGreenPepe: true,
svgBodyRedPepe: true,
svgBodyPurplePepe: true,
svgBodyGreyPepe: true,
svgBodyPinkPepe: true,
svgBodyBrownPepe: true,
svgBodyOrangePepe: true,
svgBodyClassicPepe: true,
}
const traitEyes = {
svgEyesRegular: `<rect x="306.85" y="150.11" width="67.02" height="65.67" rx="11.94" fill="#fff"/><rect x="328.13" y="150.11" width="42.57" height="64.63" rx="9.44"/><rect x="219.81" y="150.11" width="67.02" height="65.67" rx="11.94" fill="#fff"/><rect x="241.09" y="150.11" width="42.57" height="64.63" rx="9.44"/>`,
svgEyesHmmm: `<rect x="306.85" y="208.43" width="67.02" height="7.34" rx="3.67" fill="#fff"/><rect x="328.13" y="208.43" width="42.57" height="7.23" rx="3.16"/><rect x="219.81" y="208.43" width="67.02" height="7.34" rx="3.67" fill="#fff"/><rect x="241.09" y="208.43" width="42.57" height="7.23" rx="3.16"/>`,
svgEyesICYA: `<path d="M373.87 162.05a11.95 11.95 0 0 0-11.94-11.94h-43.14a11.95 11.95 0 0 0-11.94 11.94v26.72h67.02v-26.72zm-87.04 0a11.95 11.95 0 0 0-11.94-11.94h-43.14a11.95 11.95 0 0 0-11.94 11.94v26.72h67.02v-26.72z" fill="#fff"/><path d="M370.7 159.55c0-5.21-4.23-9.44-9.44-9.44h-23.69c-5.21 0-9.44 4.23-9.44 9.44v29.22h42.57v-29.22zm-87.04 0c0-5.21-4.23-9.44-9.44-9.44h-23.69c-5.21 0-9.44 4.23-9.44 9.44v29.22h42.57v-29.22z"/>`,
svgEyesNUTZ: `<g fill="#fff"><rect x="306.85" y="150.11" width="67.02" height="65.67" rx="11.94"/><rect x="219.81" y="150.11" width="67.02" height="65.67" rx="11.94"/></g><rect x="225.07" y="183" width="32.47" height="27.66" rx="5.39"/><rect x="337.04" y="152.81" width="32.47" height="27.66" rx="5.39"/>`,
svgEyesBruh: `<rect x="306.85" y="176.43" width="67.02" height="39.34" rx="9.24" fill="#ea8383"/><rect x="328.13" y="176.43" width="42.57" height="38.72" rx="7.31"/><rect x="219.81" y="176.43" width="67.02" height="39.34" rx="9.24" fill="#ea8383"/><rect x="241.09" y="176.43" width="42.57" height="38.72" rx="7.31"/>`,
svgEyesSus: `<path d="M306.85 162.05v33.56h67.02v-33.56c0-.19-.02-.37-.03-.56h-66.96c0 .19-.03.37-.03.56zm-87.04 0v33.56h67.02v-33.56c0-.19-.02-.37-.03-.56h-66.96c0 .19-.03.37-.03.56z" fill="#fff"/><path d="M328.13 161.49h42.57v34.11h-42.57zm-87.04 0h42.57v34.11h-42.57z"/>`,
svgEyesTripping: `<g fill="#fff"><rect x="306.85" y="150.11" width="67.02" height="65.67" rx="11.94"/><rect x="219.81" y="150.11" width="67.02" height="65.67" rx="11.94"/></g><rect x="223.81" y="153.8" width="58.25" height="58.25" rx="10.48"/><rect x="311.23" y="153.8" width="58.25" height="58.25" rx="10.48"/>`,
svgEyesWhatsThat: `<rect x="306.85" y="150.11" width="67.02" height="65.67" rx="11.94" fill="#fff"/><rect x="329.09" y="152.28" width="42.57" height="33.91" rx="6.84"/><rect x="219.81" y="150.11" width="67.02" height="65.67" rx="11.94" fill="#fff"/><rect x="242.05" y="152.28" width="42.57" height="33.91" rx="6.84"/>`,
svgEyesWTF: `<rect x="306.85" y="150.11" width="67.02" height="65.67" rx="11.94" fill="#fff"/><rect x="361.44" y="178.07" width="11.27" height="8.41" rx="1.75"/><rect x="219.81" y="150.11" width="67.02" height="65.67" rx="11.94" fill="#fff"/><rect x="274.4" y="178.07" width="11.27" height="8.41" rx="1.75"/>`,
svgEyesZzz: `<rect x="310.63" y="215.78" width="67.02" height="2.97" rx="1.48"/><rect x="223.59" y="215.78" width="67.02" height="2.97" rx="1.48"/>`,
}
const traitClothes = {
svgClothesBlackHoodie: '<path d="M396.74 500h-82.73V375.18c0-13.07 10.6-23.66 23.66-23.66h35.4c13.07 0 23.66 10.6 23.66 23.66V500z" fill="#1a1a1a"/><path d="M339.49 351.08h-82.03c-38.87 0-70.38-31.51-70.38-70.38V174.41c0-23.75 19.25-43 43-43h126.09c3.02 0 5.47-2.45 5.47-5.47h0c0-26.24-21.27-47.51-47.51-47.51h-125.4c-26.92 0-48.75 21.83-48.75 48.75v218.08a6.03 6.03 0 0 0 6.03 6.03h24.03c10.52 1.39 18.65 10.37 18.65 21.27v127.45h185.18V385.47c0-18.99-15.39-34.38-34.38-34.38z"/><path d="M188.69 500h-67.92V372.55a21.47 21.47 0 0 1 21.47-21.47h24.98a21.47 21.47 0 0 1 21.47 21.47V500z" fill="#1a1a1a"/>',
svgClothesWhiteHoodie: '<path d="M396.74 500h-82.73V375.18c0-13.07 10.6-23.66 23.66-23.66h35.4c13.07 0 23.66 10.6 23.66 23.66V500z" fill="#ccc"/><path d="M339.49 351.08h-82.03c-38.87 0-70.38-31.51-70.38-70.38V174.41c0-23.75 19.25-43 43-43h126.09c3.02 0 5.47-2.45 5.47-5.47h0c0-26.24-21.27-47.51-47.51-47.51h-125.4c-26.92 0-48.75 21.83-48.75 48.75v218.08a6.03 6.03 0 0 0 6.03 6.03h24.03c10.52 1.39 18.65 10.37 18.65 21.27v127.45h185.18V385.47c0-18.99-15.39-34.38-34.38-34.38z" fill="#e6e6e6"/><path d="M188.69 500h-67.92V372.55a21.47 21.47 0 0 1 21.47-21.47h24.98a21.47 21.47 0 0 1 21.47 21.47V500z" fill="#ccc"/>',
svgClothesBlackShirt: '<path d="M396.74 500h-82.73V375.18c0-13.07 10.6-23.66 23.66-23.66h35.4c13.07 0 23.66 10.6 23.66 23.66V500z" fill="#1a1a1a"/><path d="M339.49 351.08H167.22a21.47 21.47 0 0 1 21.47 21.47V500h185.18V385.46c0-18.99-15.39-34.38-34.38-34.38z"/><path d="M188.69 500h-67.92V372.55a21.47 21.47 0 0 1 21.47-21.47h24.98a21.47 21.47 0 0 1 21.47 21.47V500z" fill="#1a1a1a"/>',
svgClothesBlackTShirt: '<path d="M396.74,421.87h-82.73v-54.27c0-9.01,7.3-16.32,16.32-16.32h50.1c9.01,0,16.32,7.3,16.32,16.32v54.27Z" fill="#333"/><path d="M339.49 351.08H167.22a21.47 21.47 0 0 1 21.47 21.47V500h185.18V385.46c0-18.99-15.39-34.38-34.38-34.38z"/><path d="M138.61,351.08h29.64c11.28,0,20.44,9.16,20.44,20.44v50.35h-72.93v-47.94c0-12.61,10.24-22.85,22.85-22.85Z" fill="#333"/>',
svgClothesBlueTShirt: '<path d="M396.74,421.87h-82.73v-54.27c0-9.01,7.3-16.32,16.32-16.32h50.1c9.01,0,16.32,7.3,16.32,16.32v54.27Z" fill="#006299"/><path d="M339.49 351.08H167.22a21.47 21.47 0 0 1 21.47 21.47V500h185.18V385.46c0-18.99-15.39-34.38-34.38-34.38z" fill="#0071bc"/><path d="M138.61,351.08h29.64c11.28,0,20.44,9.16,20.44,20.44v50.35h-72.93v-47.94c0-12.61,10.24-22.85,22.85-22.85Z" fill="#006299"/>',
svgClothesPurpleTShirt: '<path d="M396.74,421.87h-82.73v-54.27c0-9.01,7.3-16.32,16.32-16.32h50.1c9.01,0,16.32,7.3,16.32,16.32v54.27Z" fill="#721f72"/><path d="M339.49 351.08H167.22a21.47 21.47 0 0 1 21.47 21.47V500h185.18V385.46c0-18.99-15.39-34.38-34.38-34.38z" fill="#93278f"/><path d="M188.69,421.87h-72.93v-47.94c0-12.62,10.23-22.85,22.85-22.85h29.64c11.29,0,20.44,9.15,20.44,20.44v50.35Z" fill="#721f72"/>',
svgClothesShirt: '<path d="M396.74 500h-82.73V375.18c0-13.07 10.6-23.66 23.66-23.66h35.4c13.07 0 23.66 10.6 23.66 23.66V500z" fill="#aaa988"/><path d="M339.49 351.08H167.22a21.47 21.47 0 0 1 21.47 21.47V500h185.18V385.46c0-18.99-15.39-34.38-34.38-34.38z" fill="#c4c49b"/><path d="M188.69 500h-67.92V372.55a21.47 21.47 0 0 1 21.47-21.47h24.98a21.47 21.47 0 0 1 21.47 21.47V500z" fill="#aaa988"/>',
svgClothesTankTop: '<path d="M339.49 351.08h-20.71c9.21 0 17.18 7.83 20.99 19.21 1.6 4.77-2.05 9.7-7.08 9.7H223.61c-4.1 0-7.43-3.33-7.43-7.43h0c0-11.86-6.54-21.47-14.61-21.47h-34.35a21.47 21.47 0 0 1 21.47 21.47v127.45h185.18V385.47c0-18.99-15.39-34.38-34.38-34.38z"/>',
}
const traitGlasses = {
svgGlasses3D: '<path d="M380.21 140.81H208.74c-2.33 0-4.23 1.89-4.23 4.23v16.6h-63.4v40.3h63.4v19.77c0 2.33 1.89 4.23 4.23 4.23h77.28c2.33 0 4.23-1.89 4.23-4.23v-6.34c0-2.33 1.89-4.23 4.23-4.23h0c2.33 0 4.23 1.89 4.23 4.23v6.34c0 2.33 1.89 4.23 4.23 4.23h77.28c2.33 0 4.23-1.89 4.23-4.23v-76.68c0-2.33-1.89-4.23-4.23-4.23z" fill="#fff"/><rect x="212.06" y="146.88" width="71.6" height="71.09" rx="7.91" fill="#00f"/><rect x="306.05" y="146.88" width="71.6" height="71.09" rx="7.91" fill="red"/>',
svgGlassesDealWithIt: '<path d="M407.09 182.12h-9.94-9.94-9.95-9.94-9.94-9.95-9.94-9.95-9.94-9.94-9.95-9.94-9.94-9.95-9.94-9.95-9.94-9.94-9.95-9.94-9.94-57.17v9.94h57.17v9.95h9.94v9.94h9.94v9.95h9.95v9.94h9.94 9.94 9.95 9.94 9.95v-9.94h9.94v-9.95h9.94v-9.94-9.95h9.95 9.94v9.95 9.94h9.94v9.95h9.95v9.94h9.94 9.95 9.94 9.94 9.95v-9.94h9.94v-9.95h9.94v-9.94h9.95v-9.95-9.94h-9.95z"/><g fill="#fff"><path d="M257.94 192.06h9.94V202h-9.94zm19.89 0h9.94V202h-9.94zm89.49 0h9.94V202h-9.94zm19.89 0h9.94V202h-9.94z"/><path d="M247.99 202.01h9.94v9.94h-9.94zm19.89 0h9.94v9.94h-9.94zm89.5 0h9.94v9.94h-9.94zm19.88 0h9.94v9.94h-9.94z"/><path d="M238.05 211.95h9.94v9.94h-9.94zm19.89 0h9.94v9.94h-9.94zm89.49 0h9.94v9.94h-9.94zm19.89 0h9.94v9.94h-9.94z"/></g>',
svgGlassesEyePatch: '<rect x="198.17" y="133.75" width="94.79" height="97.32" rx="20.28"/><path d="M175.336 120.15l42.288 26.94-6.937 10.888-48.647-30.991a2.68 2.68 0 0 1-.82-3.7h0a10.23 10.23 0 0 1 14.111-3.128zM332.77 98.12l-56.34 48.47-8.24-9.93 46.43-38.57 18.15.03z"/>',
svgGlassesRoundGlasses: '<g stroke="#333" stroke-width="4"><circle cx="287.17" cy="201.05" r="29.67"/><circle cx="371.03" cy="200.21" r="29.67"/></g><path d="M316.84 197.96h24.78v6.17h-24.78z" fill="#333"/><g fill="#b3b3b3"><circle cx="381.57" cy="183.51" r="7.13"/><circle cx="296.84" cy="183.51" r="7.13"/></g>',
svgGlassesShades: '<path d="M190.17 159.08H299.3v51.17H190.17zm117.28 0h109.13v51.17H307.45z" stroke="#666" stroke-miterlimit="10"/><path d="M299.3 175.23h8.75v14.34h-8.75zm-160-3.63h51.02v9.96H139.3z" fill="#666"/><path d="M397.06 161.64h17.74v46.04h-17.74zm-118.36 0h17.74v46.04H278.7z" fill="#fff"/>',
svgGlassesVR: '<rect x="174.32" y="140.81" width="241.69" height="80.6" rx="32.67" fill="#999"/><rect x="188.69" y="143.23" width="230.16" height="78.19" rx="31.4" fill="#666"/><rect x="194.12" y="148.96" width="221.89" height="66.72" rx="28.48" fill="#f2f2f2"/><path d="M139.91 167.38h35.62v26.72h-35.62z" fill="#999"/>',
}
const traitHat = {
svgHatBandana: '<path d="M165.32 101.72h184.2a13.02 13.02 0 0 1 13.01 13.01v17.78H152.31v-17.78a13.02 13.02 0 0 1 13.01-13.01z" fill="#fff"/><path d="M152.33 111.85h210.22v10.53H152.33z" fill="#ff1d25"/>',
svgHatBucketHat: '<path d="M198.2 35.38h123.01c19.64 0 35.58 15.94 35.58 35.58v30.99H162.62V70.96c0-19.64 15.94-35.58 35.58-35.58z" fill="#1a1a1a"/><path d="M370.2 132.81H154.36c-6.75 0-11.22-4.6-8.37-8.61l12.28-17.32c6.73-9.5 18.6-15.27 31.37-15.27h140.78c15.15 0 29.26 6.76 37.42 17.93l10.67 14.6c2.94 4.02-1.53 8.68-8.32 8.68zm-80.33-95.32h-60.32a2.11 2.11 0 0 1-2.11-2.11h64.55a2.11 2.11 0 0 1-2.11 2.11z"/>',
svgHatCap: '<path d="M226.91 32.43H286c45.86 0 83.08 37.23 83.08 83.08v18.24H143.82v-18.24c0-45.86 37.23-83.08 83.08-83.08z"/><path d="M145.78 101.94H368.8a5.18 5.18 0 0 1 5.17 5.17v29.02H138.95v-27.36c0-3.77 3.06-6.83 6.83-6.83z"/>',
svgHatChad: '<path d="M379 98.49c0-15.26-12.37-27.62-27.62-27.62H182.17c-22.67 0-41.06 18.38-41.06 41.06h0v150.25l7.36-5.88c21.3-17.02 33.7-42.8 33.7-70.07v-33.24c0-22.67 18.38-41.06 41.06-41.06h142.34A13.43 13.43 0 0 0 379 98.5h0z" fill="#fbb03b" stroke="#000" stroke-miterlimit="10"/>',
svgHatCrown: '<g fill="#ffc200"><path d="M152.92 131.49v1.06h33.02l.76-1.06h-33.78zm0-98.87v72.13l25.82-36.06-25.82-36.07zm209.23 0l-24.38 34.05 24.38 34.05v-68.1zm-33.87 98.87l.76 1.06h33.11v-1.06h-33.87zm-69.3-24.98l25.71-35.9-27.2-37.99v71.81l1.49 2.08zm17.89 24.98h-19.38v1.06h33.12l.75-1.06h-14.49z"/><path d="M312.64 131.49h-21.28l-.75 1.06h38.43l-.76-1.06h-15.64zm-55.15-98.87l-25.71 35.91 25.71 35.9V32.62zm-16.4 98.87h-17.38l.75 1.06h33.03v-1.06h-16.4z"/><path d="M205.32 131.49H186.7l-.76 1.06h38.52l-.75-1.06h-18.39z"/></g><path d="M337.77 66.67l-25.13-35.1v70.2l25.13-35.1z" fill="#f7821e"/><g fill="#ffc200"><path d="M312.64 109.65l15.64 21.84h33.87v-30.77l-24.38-34.05-25.13 35.1v7.88z"/><path d="M312.64 131.49h15.64l-15.64-21.84v21.84z"/></g><path d="M312.64 101.77v-70.2l-27.95 39.04 25.13 35.1 2.82-3.94z" fill="#f7821e"/><g fill="#ffc200"><path d="M312.64 101.77l-2.82 3.94 2.82 3.94v-7.88z"/><path d="M276.87 131.49h14.49l18.46-25.78-25.13-35.1-25.71 35.9 17.89 24.98z"/><path d="M309.82 105.71l-18.46 25.78h21.28v-21.84l-2.82-3.94z"/></g><path d="M231.78 68.53l-26.46-36.96v73.92l26.46-36.96z" fill="#f7821e"/><g fill="#ffc200"><path d="M257.49 104.43v4.16l1.49-2.08-1.49-2.08z"/><path d="M205.32 105.81l18.39 25.68h17.38l16.4-22.9v-4.16l-25.71-35.9-26.46 36.96v.32z"/><path d="M205.32 131.49h18.39l-18.39-25.68v25.68zm52.17-22.9v22.9h19.38l-17.89-24.98-1.49 2.08z"/><path d="M241.09 131.49h16.4v-22.9l-16.4 22.9z"/></g><path d="M205.32 105.49V31.57l-26.58 37.12 26.46 36.96.12-.16z" fill="#f7821e"/><g fill="#ffc200"><path d="M205.2 105.65l-26.46-36.96-25.82 36.06v26.74h33.78l18.5-25.84z"/><path d="M205.32 105.49l-.12.16.12.16v-.32z"/><path d="M205.2 105.65l-18.5 25.84h18.62v-25.68l-.12-.16z"/></g>',
svgHatPurpleCap: '<path d="M219.87 47.53h77.06c36.47 0 66.08 29.61 66.08 66.08v18.45H153.8v-18.45c0-36.47 29.61-66.08 66.08-66.08z" fill="#512373"/><g fill="#442063"><path d="M220.25 119.38h220.61v12.68H211.15v-3.58a9.1 9.1 0 0 1 9.09-9.09z"/><rect x="237.11" y="44.43" width="34.72" height="6.19" rx="3.09"/></g>',
svgHatTopHat: '<rect x="139.36" y="113.49" width="246.04" height="18.3" rx="7.85"/><path d="M195.55 44.96h133.64c17.87 0 32.38 14.51 32.38 32.38v45.28H163.18V77.34c0-17.87 14.51-32.38 32.38-32.38z"/>',
svgHatWhiteCap: '<g fill="#fff"><path d="M184.07 57.37H324.9c21.33 0 38.66 17.32 38.66 38.66v37.73H145.42V96.03c0-21.33 17.32-38.66 38.66-38.66z"/><path d="M80.79 118.25h64.85v15.51H80.79c-2.45 0-4.43-1.99-4.43-4.43v-6.64c0-2.45 1.99-4.43 4.43-4.43z"/></g><path d="M257.49 114.17h73.13v17.66h-73.13z"/>',
}
const traitHand = {
svgHandBongRip: '<path d="M242.55,271.53c2.88-9.28-25.58-31.93-58.26-40.45-30.61-7.98-42.78,2.19-58.26-9.66-18.68-14.31-10.19-36.2-26.87-51.62-17.1-15.82-48.68-19.76-69.74-6.04-17.91,11.67-22.48,32.4-25.06,44.08-.81,3.66-4.49,21.51,1.51,43.47,4.28,15.65,7.76,28.41,18.11,33.81,18.8,9.81,36.34-17.11,62.49-9.96,20.85,5.7,20.53,25.78,40.15,28.68,16.27,2.4,21.82-10.6,48-20.83,37.88-14.8,65.23-2.79,67.92-11.47Z" fill="#ccc"/><path d="M418.92 469.31l-4.56 2.32 13.68 26.91c.26.52.56 1 .88 1.46h3.76l-13.75-30.69zm44.29-21.16a7.71 7.71 0 0 1 3.3-.83l-3.03-5.96c-3.26-6.42-11.02-9.03-17.48-5.97l7.85 17.52 9.36-4.76z" fill="SKIN_COLOR_DARK"/><g fill="#00bcb2"><path d="M425.27 445.9l20.38-10.36.35-.16-22.38-49.94h0c1.84 4.23-4.57 11.2-14.37 15.59-8.59 3.85-16.94 4.44-20.16 1.69l22.04 49.19 10.65-5.41a6.06 6.06 0 0 1 3.49-.62z"/><path d="M434.47 495.45l-1.64-3.23c-1.36-2.68-1-5.79.67-8.05-3.22.52-6.54-1.05-8.09-4.11l-1.64-3.23a7.7 7.7 0 0 1 3.38-10.35l26.7-13.57-7.85-17.52-.35.16-20.38 10.36c1.95.24 3.74 1.41 4.7 3.29l3.1 6.09c1.52 3 .33 6.67-2.67 8.19l-11.48 5.83L432.67 500h9.71c.14-.17.29-.33.45-.49-3.3.65-6.76-.91-8.36-4.06z"/></g><g fill="#00d6d0"><path d="M390.28 400.39s-.01-.02-.02-.03c-1.65-3.67 3.99-9.77 12.58-13.62 8.6-3.85 16.9-4 18.54-.33 0 .01 0 .02.01.04l2.22-1s0-.02-.01-.04c-1.9-4.23-11.4-4.09-21.22.31s-16.25 11.4-14.36 15.63c.24.53.59.99 1.05 1.38l-.68-1.51 1.87-.84z"/><path d="M409.25,401.05c9.8-4.39,16.21-11.36,14.37-15.59l-2.22,1c1.59,3.68-4.03,9.75-12.59,13.59-8.57,3.84-16.84,3.99-18.52.36l-1.87.84.68,1.51c3.22,2.75,11.57,2.16,20.16-1.69Z"/></g><path d="M402.84,386.74c-8.6,3.85-14.23,9.95-12.58,13.62,0,.01.01.02.02.03l31.12-13.94s0-.02-.01-.04c-1.65-3.67-9.95-3.53-18.54.33Z"/><path d="M408.8,400.04c8.57-3.84,14.19-9.91,12.59-13.59l-31.12,13.94c1.68,3.64,9.95,3.48,18.52-.36Z"/><g fill="SKIN_COLOR_LIGHT"><path d="M474.53,462.81c1.67-2.27,2.04-5.37.67-8.05l-1.64-3.23c-1.39-2.73-4.18-4.27-7.05-4.2l7.88,15.51s.09-.02.14-.02Z"/><path d="M453.85 452.91l7.3 16.29 11.12-5.65c.69-.35 1.4-.58 2.12-.71l-7.88-15.51a7.71 7.71 0 0 0-3.3.83l-9.36 4.76z"/><path d="M436.21 481.87l24.94-12.67-7.3-16.29-26.7 13.57a7.71 7.71 0 0 0-3.38 10.35l1.64 3.23c1.55 3.06 4.87 4.63 8.09 4.11a7.67 7.67 0 0 1 2.7-2.3zm56.66 4.47l-1.64-3.23c-1.6-3.14-5.06-4.71-8.36-4.06a7.78 7.78 0 0 1-1.98 1.45l-.34.17c-.67 4.01-3.16 7.66-7.06 9.64l-2.38 1.21c1.07 2.78 1.48 5.66 1.26 8.47H483l6.51-3.31a7.71 7.71 0 0 0 3.38-10.35z"/><path d="M470.73,490.58c.14.31.25.64.37.95l2.38-1.21c3.9-1.98,6.39-5.63,7.06-9.64l-11.61,5.9,1.79,4Z"/><path d="M471.1 491.53L454.43 500h17.92c.23-2.8-.18-5.69-1.26-8.47z"/><path d="M470.73 490.58l-1.79-4-24.11 12.25c-.65.33-1.32.55-1.99.68l-.45.49h12.05l16.67-8.47-.37-.95zm8.57-18.09c1.2 2.36 1.61 4.91 1.36 7.36l.21-.11c.65-.33 1.32-.55 1.99-.68 2.27-2.29 2.94-5.87 1.39-8.9l-1.64-3.23c-1.55-3.06-4.87-4.63-8.09-4.11l-.09.12 4.86 9.56z"/><path d="M471.83 465.11l-10.19 5.18 7.02 15.66 12.01-6.1c.25-2.45-.16-5-1.36-7.36l-4.86-9.56c-.68.88-1.55 1.64-2.61 2.18zm-27.02 32.95l23.84-12.12-7.02-15.66-25.87 13.15a7.88 7.88 0 0 1-2.26.74c-1.67 2.27-2.04 5.37-.67 8.05l1.64 3.23c1.6 3.14 5.06 4.71 8.36 4.06a7.78 7.78 0 0 1 1.98-1.45z"/><path d="M474.44 462.93l.09-.12c-.05 0-.09.02-.14.02l.05.09z"/><path d="M471.83 465.11a7.62 7.62 0 0 0 2.61-2.18l-.05-.09a7.57 7.57 0 0 0-2.12.71l-11.12 5.65.49 1.09 10.19-5.18z"/><path d="M461.64 470.29l-.49-1.09-24.94 12.67a7.57 7.57 0 0 0-2.7 2.3 7.31 7.31 0 0 0 2.26-.74l25.87-13.15zm19.02 9.56l-.12.83.34-.17c.76-.38 1.42-.88 1.98-1.45-.68.13-1.35.36-1.99.68l-.21.11z"/><path d="M468.66 485.95l.28.63 11.61-5.9.12-.83-12.01 6.1z"/><path d="M444.81 498.06c-.76.38-1.42.88-1.98 1.45a7.33 7.33 0 0 0 1.99-.68l24.11-12.25-.28-.63-23.84 12.12zm-32.34-43.14l-1.34-2.99-6.48 3.29c-3 1.52-4.2 5.19-2.67 8.19l3.1 6.09c1.52 3 5.19 4.2 8.19 2.67l1.09-.55-2.14-4.21c-2.08-4.1-1.83-8.76.25-12.49z"/><path d="M412.22,467.41l2.14,4.21,4.56-2.32-6.45-14.38c-2.08,3.73-2.33,8.4-.25,12.49Z"/><path d="M418.04 449.58l7.23-3.68a6.06 6.06 0 0 0-3.49.62l-10.65 5.41 1.34 2.99c1.24-2.22 3.13-4.11 5.56-5.34z"/><path d="M433.07,455.28l-3.1-6.09c-.96-1.88-2.75-3.05-4.7-3.29l-7.23,3.68c-2.44,1.24-4.32,3.13-5.56,5.34l6.45,14.38,11.48-5.83c3-1.52,4.2-5.19,2.67-8.19Z"/></g>',
svgHandCig: '<path d="M363.91 267.23h53.43v13.51h-53.43z" fill="#fff"/><path d="M362.13,267.23h19.58v13.51h-19.58c-3.52,0-6.38-2.86-6.38-6.38v-.75c0-3.52,2.86-6.38,6.38-6.38Z" fill="#fc6"/><g fill="#999"><ellipse cx="417.15" cy="273.98" rx="3.66" ry="6.91"/><ellipse cx="422.21" cy="273.98" rx="3.66" ry="6.91"/><path d="M416.94 267.08h5.38v13.75h-5.38z"/></g>',
svgHandCobbee: '<path d="M376.92 428.32h97.25V501h-97.25z" fill="SKIN_COLOR_DARK"/><g fill="#e6e6e6"><path d="M381 408.36c-14.15 0-25.62 11.47-25.62 25.62S366.85 459.6 381 459.6s25.62-11.47 25.62-25.62-11.47-25.62-25.62-25.62zm0 41.05c-8.52 0-15.43-6.91-15.43-15.43s6.91-15.43 15.43-15.43 15.43 6.91 15.43 15.43-6.91 15.43-15.43 15.43z"/><path d="M378.85 398.85h92.98v73.47c0 14.43-11.72 26.15-26.15 26.15H405c-14.43 0-26.15-11.72-26.15-26.15v-73.47h0z"/></g><ellipse cx="425.34" cy="398.95" rx="46.5" ry="6.34" fill="gray"/><ellipse cx="425.26" cy="398.89" rx="44" ry="5.62"/><g fill="SKIN_COLOR_DARK"><rect x="375.91" y="424.28" width="34.19" height="21.28" rx="7.24"/></g><path d="M429.34,399c-3.52-1.88,2.79-13.87,4.53-31.92,3.33-34.61-14.93-41.97-12-69.28,2.94-27.36,21.81-25,29.21-59.09,6.08-28-2.77-47.42,7.47-53.21,6.6-3.73,17.57.2,24,6.57,12.11,11.98,3.46,27.99-.68,79.25-2.99,37.11-.9,58.96-13.13,82.42-4.37,8.38-10.39,16.6-12,18.79-1.52,2.06-21.84,29.45-27.4,26.49Z" fill="#f2f2f2"/><defs ><path id="B" d="M475.52 458.4H451a6.11 6.11 0 0 1-6.11-6.11v-2.94a6.11 6.11 0 0 1 6.11-6.11h24.52c1.96 0 3.56 1.59 3.56 3.56v8.06c0 1.96-1.59 3.56-3.56 3.56z"/></defs>',
svgHandCigCobbee: '<path d="M363.91 267.23h53.43v13.51h-53.43z" fill="#fff"/><path d="M362.13,267.23h19.58v13.51h-19.58c-3.52,0-6.38-2.86-6.38-6.38v-.75c0-3.52,2.86-6.38,6.38-6.38Z" fill="#fc6"/><g fill="#999"><ellipse cx="417.15" cy="273.98" rx="3.66" ry="6.91"/><ellipse cx="422.21" cy="273.98" rx="3.66" ry="6.91"/><path d="M416.94 267.08h5.38v13.75h-5.38z"/></g><path d="M376.92 428.32h97.25V501h-97.25z" fill="SKIN_COLOR_DARK"/><g fill="#e6e6e6"><path d="M381 408.36c-14.15 0-25.62 11.47-25.62 25.62S366.85 459.6 381 459.6s25.62-11.47 25.62-25.62-11.47-25.62-25.62-25.62zm0 41.05c-8.52 0-15.43-6.91-15.43-15.43s6.91-15.43 15.43-15.43 15.43 6.91 15.43 15.43-6.91 15.43-15.43 15.43z"/><path d="M378.85 398.85h92.98v73.47c0 14.43-11.72 26.15-26.15 26.15H405c-14.43 0-26.15-11.72-26.15-26.15v-73.47h0z"/></g><ellipse cx="425.34" cy="398.95" rx="46.5" ry="6.34" fill="gray"/><ellipse cx="425.26" cy="398.89" rx="44" ry="5.62"/><g fill="SKIN_COLOR_DARK"><rect x="375.91" y="424.28" width="34.19" height="21.28" rx="7.24"/></g><path d="M429.34,399c-3.52-1.88,2.79-13.87,4.53-31.92,3.33-34.61-14.93-41.97-12-69.28,2.94-27.36,21.81-25,29.21-59.09,6.08-28-2.77-47.42,7.47-53.21,6.6-3.73,17.57.2,24,6.57,12.11,11.98,3.46,27.99-.68,79.25-2.99,37.11-.9,58.96-13.13,82.42-4.37,8.38-10.39,16.6-12,18.79-1.52,2.06-21.84,29.45-27.4,26.49Z" fill="#f2f2f2"/><defs ><path id="B" d="M475.52 458.4H451a6.11 6.11 0 0 1-6.11-6.11v-2.94a6.11 6.11 0 0 1 6.11-6.11h24.52c1.96 0 3.56 1.59 3.56 3.56v8.06c0 1.96-1.59 3.56-3.56 3.56z"/></defs>',
}
const traitEar = {
svgEarDiamondRound: '<circle cx="141.42" cy="232.13" r="9.81" fill="#abfffd"/>',
svgEarDiamond: '<path d="M132.49 223.19h17.87v17.87h-17.87z" fill="#abfffd"/>',
svgEarGold: '<path d="M144.14 223.77h-5.43l-4.4 3.19-1.68 5.17 1.68 5.16 4.4 3.19h5.43l4.39-3.19 1.68-5.16-1.68-5.17-4.39-3.19z" fill="#fbb03b"/>',
svgEarGoldFlower: '<path d="M138.61 221.15l.65.33a4.34 4.34 0 0 0 4.04-.05l.64-.35c3.16-1.71 6.91.95 6.35 4.5l-.11.72c-.22 1.41.26 2.84 1.29 3.82l.53.5c2.6 2.48 1.24 6.87-2.32 7.43l-.72.11c-1.41.22-2.62 1.12-3.24 2.41l-.31.65c-1.55 3.24-6.15 3.3-7.78.09l-.33-.65c-.65-1.27-1.88-2.15-3.29-2.33l-.72-.1c-3.56-.47-5.04-4.83-2.49-7.37l.51-.51a4.33 4.33 0 0 0 1.2-3.85l-.13-.71c-.65-3.54 3.04-6.28 6.24-4.65z" fill="#fbb03b"/>',
}
// Resize window
window.addEventListener('resize', resize, true)
resize()
// Retrieve content inscription id
let mintText = document.getElementById('preview').getAttribute('mint')
// Check no mint provided
if(mintText.includes('MINT_INSCRIPTION_ID')) {
let input = document.getElementById('blk')
input.style.display = 'block'
input.style.position = 'absolute'
input.style.fontSize = '20px'
input.style.margin = '20px'
input.style.top = '0'
input.value = blockNumber
input.addEventListener('input',(event) => {
blockNumber = input.value
update()
})
update()
}
// Mint was provided
else {
const request = new XMLHttpRequest()
try {
request.open('GET', '/content/' + mintText)
request.responseType = 'text'
request.addEventListener('load', () => initialize(request.response))
request.addEventListener('error', () => console.error('XHR error'))
request.send()
} catch (error) {
console.error(`XHR error ${request.status}`)
}
}
function initialize(result) {
if(result) {
console.log('Result', result)
data = JSON.parse(result)
blockNumber = data.blk
}
update()
}
function resize(event) {
root.width = window.innerWidth
root.height = window.innerHeight
scaleW = root.width / orgWidth
scaleH = root.height / orgHeight
offsetX = 0
offsetY = 0
if(scaleH < scaleW) {
scaleW = scaleH
offsetX = (root.width - orgWidth * scaleW) / 2
}
else {
scaleH = scaleW
offsetY = (root.height - orgHeight * scaleH) / 2
}
root.style.zoom = scaleW / 2
update('resize')
}
function update() {
return generateHtmlBasedOnBlockNumber(blockNumber)
}
function moduleNumber(number, module) {
return number % module
}
function getReversedDigit(blockNumber, digit) {
const originalString = blockNumber.toString()
const digits = originalString.padStart(7, '0').split('').map(Number).reverse()
return digits[digit-1];
}
function sideOfBlockNumber(blockNumber, chars) {
return parseInt(blockNumber.toString().slice(-chars));
}
function reverseSideOfBlockNumber(blockNumber, chars) {
return parseInt(blockNumber.toString().slice(-chars).split("").reverse().join(""));
}
function getHash(input, max = 10) {
let hash = input * 2654435761 % 429496729; // Using Knuth's multiplicative method
return Math.abs(hash) % max;
}
function getBackgroundType(blockNumber) {
const digit = getReversedDigit(blockNumber, 3);
const hashIndex = getHash(blockNumber + digit, Object.keys(traitBackground).length)
return Object.keys(traitBackground)[hashIndex];
}
function getBodyType(blockNumber) {
const digit = getReversedDigit(blockNumber, 1);
const hashIndex = getHash(blockNumber + digit, 10)
return Object.keys(traitBody)[hashIndex]
}
function displayBody(bodyType) {
return `<rect x="141.11" y="120.28" width="232.75" height="232.75" rx="41.89" fill="${colorMap[bodyType]}"/><path d="M396.74 500.21h-82.73V374.99c0-13.09 10.61-23.7 23.7-23.7h35.34c13.09 0 23.7 10.61 23.7 23.7v125.22z" fill="${colorMap2[bodyType]}"/><g fill="${colorMap[bodyType]}"><path d="M373.87 500H128.78V385.46c0-18.99 15.39-34.38 34.38-34.38h176.33c18.99 0 34.38 15.39 34.38 34.38V500z"/><rect x="175.53" y="98.32" width="91.02" height="101.89" rx="17.33"/><rect x="264.42" y="98.09" width="92.38" height="101.89" rx="17.46"/></g><g fill="${colorMap2[bodyType]}"><rect x="296.43" y="133.75" width="81.21" height="98.38" rx="16.09"/><rect x="209.39" y="133.75" width="81.21" height="98.38" rx="16.09"/><path d="M188.69 500h-67.92V372.55a21.47 21.47 0 0 1 21.47-21.47h24.98a21.47 21.47 0 0 1 21.47 21.47V500z"/></g><rect x="188.69" y="245.29" width="204.68" height="60.68" rx="20.06" fill="#ff1d25"/><rect x="225.45" y="267.45" width="166.44" height="13.36" rx="4.2"/>`
}
function getEyesType(blockNumber) {
const digit = getReversedDigit(blockNumber, 2);
const hashIndex = getHash(blockNumber + digit, 10)
return Object.keys(traitEyes)[hashIndex]
}
function getClothesType(blockNumber) {
const side = sideOfBlockNumber(blockNumber, 3);
const hashIndex = getHash(blockNumber + side, 100)
if(hashIndex <= 5) return "svgClothesBlackHoodie"
if(hashIndex <= 10) return "svgClothesWhiteHoodie"
if(hashIndex <= 26) return "svgClothesBlackShirt"
if(hashIndex <= 33) return "svgClothesBlackTShirt"
if(hashIndex <= 41) return "svgClothesBlueTShirt"
if(hashIndex <= 52) return "svgClothesPurpleTShirt"
if(hashIndex <= 64) return "svgClothesShirt"
if(hashIndex <= 71) return "svgClothesTankTop"
return ""
}
function getGlassesType(blockNumber) {
const side = reverseSideOfBlockNumber(blockNumber, 2);
const hashIndex = getHash(blockNumber + side, 100)
if(hashIndex <= 7) return "svgGlasses3D"
if(hashIndex <= 20) return "svgGlassesDealWithIt"
if(hashIndex <= 25) return "svgGlassesEyePatch"
if(hashIndex <= 35) return "svgGlassesRoundGlasses"
if(hashIndex <= 45) return "svgGlassesShades"
if(hashIndex <= 53) return "svgGlassesVR"
return ""
}
function getHatType(blockNumber) {
const seed = getReversedDigit(blockNumber, 4);
const hatSeed = getHash(blockNumber + seed, 100)
if(hatSeed <= 8) return 'svgHatBandana'
if(hatSeed <= 15) return 'svgHatBucketHat'
if(hatSeed <= 25) return 'svgHatCap'
if(hatSeed <= 35) return 'svgHatChad'
if(hatSeed <= 40) return 'svgHatCrown'
if(hatSeed <= 50) return 'svgHatPurpleCap'
if(hatSeed <= 65) return 'svgHatTopHat'
if(hatSeed <= 75) return 'svgHatWhiteCap'
return ""
}
function getHandType(blockNumber) {
if(moduleNumber(blockNumber, 16) == 0) return 'svgHandCobbee'
if(moduleNumber(blockNumber, 17) == 0) return 'svgHandCig'
if(moduleNumber(blockNumber, 18) == 0) return 'svgHandBongRip'
if(moduleNumber(blockNumber, 27) == 0) return 'svgHandCigCobbee'
return ""
}
function displayHand(handType, bodyType) {
return traitHand[handType] ? traitHand[handType].replace(/SKIN_COLOR_LIGHT/gi, colorMap[bodyType]).replace(/SKIN_COLOR_DARK/gi, colorMap2[bodyType]) : ""
}
function getEarType(blockNumber) {
if(moduleNumber(blockNumber, 11) == 0) return 'svgEarDiamondRound'
if(moduleNumber(blockNumber, 12) == 0) return 'svgEarDiamond'
if(moduleNumber(blockNumber, 13) == 0) return 'svgEarGold'
if(moduleNumber(blockNumber, 14) == 0) return 'svgEarGoldFlower'
return ""
}
function generateHtmlBasedOnBlockNumber(blockNumber) {
blockNumber = parseInt(blockNumber)
let backgroundType = ''
let background = ''
let bodyType = ''
let body = ''
let eyesType = ''
let eyes = ''
let clothesType = ''
let clothes = ''
let glassesType = ''
let glasses = ''
let hatType = ''
let hat = ''
let handType = ''
let hand = ''
let earType = ''
let ear = ''
backgroundType = getBackgroundType(blockNumber)
background = traitBackground[backgroundType]
bodyType = getBodyType(blockNumber);
body = displayBody(bodyType)
eyesType = getEyesType(blockNumber)
eyes = traitEyes[eyesType] ? traitEyes[eyesType] : ""
clothesType = getClothesType(blockNumber)
clothes = traitClothes[clothesType] ? traitClothes[clothesType] : ""
glassesType = getGlassesType(blockNumber)
glasses = traitGlasses[glassesType] ? traitGlasses[glassesType] : ""
let showHat = clothesType != 'svgClothesBlackHoodie' && clothesType != 'svgClothesWhiteHoodie'
if(showHat) {
hatType = getHatType(blockNumber)
hat = traitHat[hatType] ? traitHat[hatType] : ""
}
handType = getHandType(blockNumber)
hand = displayHand(handType, bodyType)
let showEar = clothesType != 'svgClothesBlackHoodie' && clothesType != 'svgClothesWhiteHoodie' && hatType != 'svgHatChad'
if(showEar) {
earType = getEarType(blockNumber)
ear = traitEar[earType] ? traitEar[earType] : ""
}
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="425" height="425" viewBox="0 0 500 500" style="width: 100%; height: 100%;">
<path d="M0 0h500v500H0z" fill="${background}"/>
${body + eyes + glasses + clothes + hat + ear + hand}
</svg>
`
document.getElementById('unatpepeviewer').innerHTML = svgContent
}
</script>