<div id="natdogoooooviewer" 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('natdogoooooviewer')
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'
// Define the color map with the given colors
const colorMap = {
1: "#DF4423", // Red
2: "#0C57B0", // Deep blue
3: "#FB9BC4", // Pink
4: "#ACAD9C", // Gley
5: "#69C0CE", // Sky blue
6: "#30BE6D", // Green
7: "#9568C5", // Purple
8: "#372B28", // Dark
9: "#D8C100", // Gold
0: "#BBACC3", // Lilac
}
// Define the color map with the given colors
const colorMap2 = {
1: "#FC6EA5", // Pink
2: "#EC6A49", // Orange
3: "#0057ED", // Blue
4: "#9493FF", // Lilac
5: "#FFFF00", // Yellow
6: "#6B6B6B", // Gley
7: "#403837", // Dark
8: "#75FF00", // Dark red
9: "#9E485F", // Luminous
0: "#845DD5", // Ash purple
}
// 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() {
generateHtmlBasedOnBlockNumber(blockNumber)
}
function generateSvgForDigits(blockNumber) {
const originalString = blockNumber.toString()
const digits = originalString.padStart(7, '0').split('').map(Number).reverse()
let svgs = []
// left earling
if (originalString.length >= 5) {
const colorForThirdDigit = colorMap2[digits[4]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 160px; left: 0
px;">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="19" stroke="${colorForThirdDigit}" stroke-width="12"/>
</svg>
</div>
`)
}
// right earling
if (originalString.length >= 4) {
const colorForFourthDigit = colorMap2[digits[3]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 160px; left: 375px;">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="19" stroke="${colorForFourthDigit}" stroke-width="12"/>
</svg>
</div>
`)
}
// body
if (originalString.length >= 2) {
const colorForSecondDigit = colorMap2[digits[1]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 281px; left: 140px;">
<svg width="106" height="144" viewBox="0 0 106 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 24, 12.5 144, 106 144, 93.5 24" height="80" fill="${colorForSecondDigit}"/>
<polygon points="30 0, 34 26, 64 26, 60 0" height="80" fill="${colorForSecondDigit}"/>
</svg>
</div>
`)
}
// face
if (originalString.length >= 6) {
const colorForFirstDigit = colorMap[digits[5]]
svgs.push(`<div style="position: absolute; top: 44px; left: 50px;">
<svg width="325" height="246.62" viewBox="00 00 325 246.62" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="cls-1" d="M260,188.52c-35.9,0-65-19.25-65-43s29.1-43,65-43,63.06,18,64.9,40.65c-2.48-45.15-53.6-82.71-122.12-93.46,0,0-14.14-2.76-21.31-10.93-7.09-8.08-14.79-21.61-18.97-38.78-4.37,21.02-12.09,31.64-18.35,39.05-5.99,7.08-23.23,10.87-23.23,10.87C51.32,61.22,0,100.23,0,146.61c0,55.23,72.75,100,162.5,100s162.5-44.77,162.5-100c0-.24,0-.47,0-.71-.31,23.57-29.29,42.62-64.99,42.62Zm-156.58,0c-35.9,0-65-19.25-65-43s29.1-43,65-43,65,19.25,65,43-29.1,43-65,43Zm221.57-42.62c-.01-.91-.04-1.82-.09-2.73,.06,.78,.1,1.56,.1,2.35,0,.13,0,.26,0,.38Z" fill="${colorForFirstDigit}"/>
</svg>
</div>
`)
}
// nose
if (originalString.length >= 3) {
const colorForFifthDigit = colorMap2[digits[2]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 200px; left: 219px;">
<svg width="25" height="6" viewBox="0 0 25 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="3" cy="3" r="3" fill="${colorForFifthDigit}"/>
<circle cx="22" cy="3" r="3" fill="${colorForFifthDigit}"/>
</svg>
</div>
`)
}
// left arm
if (originalString.length >= 4) {
const colorForSixthDigit = colorMap[digits[3]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 305px; left: 75;">
<svg width="300" height="95" viewBox="0 0 300 95" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="84" y="59" width="9" height="12" fill="${colorForSixthDigit}"/>
<polygon points ="34 0, 0 95, 120 95, 120 70, 42 70, 65 0" fill="${colorForSixthDigit}"/>
</svg>
</div>
`)
}
// right arm
if (originalString.length >= 1) {
const colorForSecondDigit = colorMap2[digits[0]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 305px; left: 75;">
<svg width="300" height="95" viewBox="0 0 300 95" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="158 0, 200 95, 300 95, 300 70, 220 70, 188 0" fill="${colorForSecondDigit}"/>
<rect x="266" y="59" width="9" height="12" fill="${colorForSecondDigit}"/>
</svg>
</div>
`)
}
return svgs.join('')
}
//eye direction
function getLook(number) {
const numberStr = number.toString()
const lastFourDigits = parseInt(numberStr.substring(numberStr.length - 4))
if (lastFourDigits < 3334) {
return "look_left"
} else if (lastFourDigits >= 3334 && lastFourDigits <= 6666) {
return "look_crossed"
} else {
return "look_center"
}
}
function generateLookSvg(lookDir) {
let lookHtml = ""
if (lookDir === "look_center") {
lookHtml = `<div style="position: absolute; top: 186px; left: 132px;">
<svg width="200" height="20" viewBox="0 0 200 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="22" cy="0" rx="22" ry="20" fill="#00BCFF"/>
<ellipse cx="176" cy="0" rx="22" ry="20" fill="#00BCFF"/>
</svg>
</div>`
} else if (lookDir === "look_left") {
lookHtml = `<div style="position: absolute; top: 186px; left: 100px;">
<svg width="200" height="20" viewBox="0 0 200 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="22" cy="0" rx="22" ry="20" fill="#00BCFF"/>
<ellipse cx="176" cy="0" rx="22" ry="20" fill="#00BCFF"/>
</svg>
</div>`
} else if (lookDir === "look_crossed") {
lookHtml = `<div style="position: absolute; top: 186px; left: 169px;">
<svg width="126" height="20" viewBox="0 0 126 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="22" cy="0" rx="22" ry="20" fill="#00BCFF"/>
<ellipse cx="103" cy="0" rx="22" ry="20" fill="#00BCFF"/>
</svg>
</div>`
}
return lookHtml
}
function c607(number) {
const numberStr = number.toString()
return numberStr.includes('607')
}
// boob
function displayboob() {
return `<div style="position: absolute; top: 320px; left: 168px;">
<svg width="96" height="55" viewBox="0 0 96 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="0 0, 0 55, 48 27.5" fill="#FFFF66"/>
<polygon points ="48 0, 48 55, 96 27.5" fill="#FFFF66"/>
</svg>
</div>`
}
function c6a0(number) {
const numberStr = number.toString()
return numberStr.includes('6') && numberStr.includes('0')
}
// boob2
function displayboob2(number) {
return `<div style="position: absolute; top: 320px; left: 168px;">
<svg width="96" height="55" viewBox="0 0 96 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="0 0, 0 55, 48 27.5" fill="#9B272D"/>
<polygon points ="48 0, 48 55, 96 27.5" fill="#9B272D"/>
</svg>
</div>`
}
function c0(number) {
const numberStr = number.toString()
return numberStr.includes('0')
}
// Horn
function displayHorn(number) {
return `<div style="position: absolute; top: 46px; left: 66px;">
<svg width="292" height="100" viewBox="0 0 292 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="20 0, 3 100, 40 84" fill="#DBF820"/>
<polygon points ="275 0, 244 84, 292 100" fill="#DBF820"/>
</svg>
</div>`
}
function c00(number) {
const numberStr = number.toString()
return numberStr.includes('00')
}
// Catear
function displayCatear(number) {
return `<div style="position: absolute; top: 46px; left: 66px;">
<svg width="292" height="100" viewBox="0 0 292 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="20 0, 3 100, 93 66" fill="#515050"/>
<polygon points ="275 0, 202 65, 292 100" fill="#515050"/>
</svg>
</div>`
}
function c0000(number) {
const numberStr = number.toString()
return numberStr.includes('0000')
}
// Catearling
function displayCatearling(number) {
return `<div style="position: absolute; top: 70px; left: 334px;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="7" width="20" height="8" transform="rotate(-10 12 12)" fill="#0097FF"/>
</svg>
</div>`
}
function c00000(number) {
const numberStr = number.toString()
return numberStr.includes('00000')
}
// Catearpiace
function displayCatearpiace(number) {
return `<div style="position: absolute; top: 100px; left: 338px;">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="5" fill="#FF3AFF"/>
</svg>
</div>`
}
function c3(number) {
const numberStr = number.toString()
return numberStr.includes('3')
}
// Planet1
function displayPlanet1(number) {
return `<div style="position: absolute; top: 0px; left: 0px;">
<svg width="425" height="90" viewBox="0 0 425 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="375" cy="35" r="24" fill="#169F94"/>
<circle cx="20" cy="42" r="8" fill="#FFFFFF"/>
<circle cx="70" cy="83" r="7" fill="#EEFE6B"/>
</svg>
</div>`
}
function c33(number) {
const numberStr = number.toString()
return numberStr.includes('33')
}
// Planet2
function displayPlanet2(number) {
return `<div style="position: absolute; top: 0px; left: 325px;">
<svg width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="35" rx="41" ry="8" stroke="#169F94" stroke-width="2"/>
</svg>
</div>`
}
function c333(number) {
const numberStr = number.toString()
return numberStr.includes('333')
}
// Planet3
function displayPlanet3(number) {
return `<div style="position: absolute; top: 0px; left: 325px;">
<svg width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="41" r="3" fill="#FFE357"/>
</svg>
</div>`
}
function c3333(number) {
const numberStr = number.toString()
return numberStr.includes('3333')
}
// Planet4
function displayFlysLaserEyes(number) {
return `<div style="position: absolute; top: 0px; left: 325px;">
<svg width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="42" r="4" fill="#FFFFFF"/>
</svg>
</div>`
}
function c4a4(number) {
const numberStr = number.toString()
const count = (numberStr.match(/4/g) || []).length
return count >= 2 ? "c4a4" : null
}
// Mouth
function displayMouth(number) {
return `<div style="position: absolute; top: 220px; left: 206px;">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 40, 25 0, 50 40" fill="#151515"/>
</svg>
</div>`
}
function c44(number) {
const numberStr = number.toString()
return numberStr.includes('44')
}
// Bigmouth
function displayBigmouth(number) {
return `<div style="position: absolute; top: 220px; left: 206px;">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" fill="#151515"/>
</svg>
</div>`
}
function c444(number) {
const numberStr = number.toString()
return numberStr.includes('444')
}
// Yellowmouth
function displayYellowmouth(number) {
return `<div style="position: absolute; top: 220px; left: 206px;">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" fill="#FFFF2D"/>
</svg>
</div>`
}
function c4444(number) {
const numberStr = number.toString()
return numberStr.includes('4444')
}
// Tonguepink
function displayTonguepink(number) {
return `<div style="position: absolute; top: 250px; left: 206px;">
<svg width="80" height="20" viewBox="0 0 80 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="70" height="20" fill="#DB6182"/>
<circle cx="70" cy="10" r="10" fill="#DB6182"/>
</svg>
</div>`
}
function c44444(number) {
const numberStr = number.toString()
return numberStr.includes('44444')
}
// Tongueblue
function displayTongueblue(number) {
return `<div style="position: absolute; top: 250px; left: 206px;">
<svg width="80" height="20" viewBox="0 0 80 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="70" height="20" fill="#006182"/>
<circle cx="70" cy="10" r="10" fill="#006182"/>
</svg>
</div>`
}
function cp6(number) {
const numberStr = number.toString()
// Loop through the number string
for (let i = 0; i <= numberStr.length - 6; i++) { // Ensure there are at least 6 characters to check
const substring = numberStr.substring(i, i + 6) // Get the substring of 6 characters
// Check if the substring is a palindrome
if (substring === substring.split('').reverse().join('')) {
return "cp6"
}
}
return null
}
// Arrow
function displayArrow(number) {
return `<div style="position: absolute; top: 360px; left: 10px;">
<svg width="50" height="40" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 15, 0 25, 29.5 25, 16.5 40, 33 40, 50 20, 33 0, 16.5 0, 29.5 15" fill="#AA00FF"/>
</svg>
</div>`
}
function c9a9(number) {
const numberStr = number.toString()
const count = (numberStr.match(/9/g) || []).length
return count >= 2 ? "c9a9" : null
}
// Rifle1
function displayRifle1(number) {
return `<div style="position: absolute; top: 296px; left: 140px;">
<svg width="280" height="118" viewBox="0 0 280 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="34" cy="34" r="34" fill="#DB6182"/>
<rect x="34" y="24" width="174" height="20" fill="#DB6182"/>
<circle cx="152" cy="34" r="34" fill="#DB6182"/>
<rect x="34" y="0" width="120" height="68" fill="#DB6182"/>
<rect x="28" y="64" width="27" height="15" fill="#DB6182"/>
<rect x="28" y="104" width="27" height="10" fill="#DB6182"/>
<rect x="224" y="29" width="10" height="10" fill="#FFFF00"/>
<rect x="244" y="29" width="10" height="10" fill="#FFFF00"/>
<rect x="264" y="29" width="10" height="10" fill="#FFFF00"/>
</svg>
</div>`
}
function c99(number) {
const numberStr = number.toString()
return numberStr.includes('99')
}
// Rifle2
function displayRifle2(number) {
return `<div style="position: absolute; top: 296px; left: 190px;">
<svg width="90" height="68" viewBox="0 0 90 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="18" height="68" fill="#49EFEF"/>
<rect x="36" y="0" width="18" height="68" fill="#49EFEF"/>
<rect x="72" y="0" width="18" height="68" fill="#49EFEF"/>
</svg>
</div>`
}
function c999(number) {
const numberStr = number.toString()
return numberStr.includes('999')
}
// Rifle3
function displayRifle3(number) {
return `<div style="position: absolute; top: 296px; left: 140px;">
<svg width="280" height="118" viewBox="0 0 280 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="28" y="64" width="27" height="15" fill="#000000"/>
<rect x="28" y="104" width="27" height="10" fill="#000000"/>
<circle cx="34" cy="34" r="34" fill="#00FFB5"/>
<rect x="34" y="24" width="174" height="20" fill="#00FFB5"/>
<circle cx="152" cy="34" r="34" fill="#00FFB5"/>
<rect x="34" y="0" width="120" height="68" fill="#00FFB5"/>
<rect x="224" y="29" width="10" height="10" fill="#FF0000"/>
<rect x="244" y="29" width="10" height="10" fill="#FF0000"/>
<rect x="264" y="29" width="10" height="10" fill="#FF0000"/>
</svg>
</div>`
}
// Rifle4
function c9999(number) {
const numberStr = number.toString()
return numberStr.includes('9999')
}
function displayRifle4(number) {
return `<div style="position: absolute; top: 296px; left: 140px;">
<svg width="280" height="118" viewBox="0 0 280 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="28" y="64" width="27" height="15" fill="#FFFF00"/>
<rect x="28" y="104" width="27" height="10" fill="#FFFF00"/>
<circle cx="34" cy="34" r="34" fill="#FFFF00"/>
<rect x="34" y="24" width="174" height="20" fill="#FFFF00"/>
<circle cx="152" cy="34" r="34" fill="#FFFF00"/>
<rect x="34" y="0" width="120" height="68" fill="#00FFB5"/>
<rect x="224" y="29" width="10" height="10" fill="#000000"/>
<rect x="244" y="29" width="10" height="10" fill="#000000"/>
<rect x="264" y="29" width="10" height="10" fill="#000000"/>
</svg>
</div>`
}
function cs5(number) {
const numberStr = number.toString()
for (let i = 0; i < numberStr.length - 4; i++) { // Ensure there are at least 3 characters to check
const substring = numberStr.substring(i, i + 5) // Get the substring of 3 characters
if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
const subNum = parseInt(substring, 10)
const s = Math.sqrt(subNum)
if (s === Math.floor(s)) { // Check if s is a perfect square
return "cs5d" // Return a different identifier for 3-digit perfect squares
}
}
}
return null
}
// Halo
function displayHalo(number) {
return `<div style="position: absolute; top: 20px; left: 130px;">
<svg width="164" height="20" viewBox="0 0 164 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="82" cy="10" rx="80" ry="8" stroke="#FFFF32" stroke-width="4"/>
</svg>
</div>`
}
// Function to check if a number contains a 4-digit square as a substring
function containsFourDigitSquare(number) {
const numberStr = number.toString()
for (let i = 0; i <= numberStr.length - 4; i++) {
const substring = numberStr.substring(i, i + 4)
const num = parseInt(substring, 10)
if (Math.sqrt(num) % 1 === 0) {
return true
}
}
return false
}
// Determine the range for laser eyes based on the last four digits
function getLaserEyeRange(lastFourDigits) {
if (lastFourDigits < 3334) {
return "laser_left"
} else if (lastFourDigits >= 3334 && lastFourDigits <= 6666) {
return "laser_crossed"
} else {
return "laser_center"
}
}
// Function to generate SVG for laser eyes based on direction
function displayLaserEyes(eyeDirection) {
let svgHTML = ""
switch (eyeDirection) {
case "laser_center":
svgHTML = `<div style="position: absolute; top: 134px; left: 94px;">
<svg width="278" height="120" viewBox="0 0 278 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="0 60, 50 70, 60 120, 70 70, 120 60, 70 50, 60 0, 50 50" fill="#FF8000" />
<polygon points ="154 60, 204 70, 214 120, 224 70, 274 60, 224 50, 214 0, 204 50" fill="#FF8000"/>
</svg>
</div>`
break
}
return svgHTML
}
function cs6(number) {
const numberStr = number.toString()
for (let i = 0; i < numberStr.length - 5; i++) { // Ensure there are at least 3 characters to check
const substring = numberStr.substring(i, i + 6) // Get the substring of 3 characters
if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
const subNum = parseInt(substring, 10)
const s = Math.sqrt(subNum)
if (s === Math.floor(s)) { // Check if s is a perfect square
return "cs3d" // Return a different identifier for 3-digit perfect squares
}
}
}
return null
}
// Pauldron
function displayPauldron(number) {
return `<div style="position: absolute; top: 305px; left: 60px;">
<svg width="250" height="24" viewBox="0 0 250 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points=" 0 0, 40 24, 57 0 " fill="#FFFF55"/>
<polygon points=" 196 0, 214 24, 250 0 " fill="#FFFF55"/>
</svg>
</div>`
}
function m12(number) {
return number % 12 === 0
}
// Thunder
function displayThunder(number) {
return `<div style="position: absolute; top: 30px; left: 120px;">
<svg width="60" height="82" viewBox="0 0 60 82" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="0 0, 14 56, 25 46, 60 82, 48 25, 36 36" fill="#FFFF66"/>
</svg>
</div>`
}
function m13(number) {
return number % 13 === 0
}
// Tear
function displayTear(number) {
return `<div style="position: absolute; top: 250px; left: 100px;">
<svg width="41" height="63" viewBox="0 0 41 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="cls-1" d="M38.59,31.74L20.74,0h-.41L2.49,31.74c-1.59,2.92-2.49,6.95-2.49,10.51,0,11.35,9.2,20.54,20.54,20.54s20.54-9.2,20.54-20.54c0-3.56-.9-7.59-2.49-10.51Z" fill="#6CCBAB"/>
</svg>
</div>`
}
function m14(number) {
return number % 14 === 0
}
// Knife
function displayKnife(number) {
return`<div style="position: absolute; top: 308px; left: 346px;">
<svg width="18" height="67" viewBox="0 0 18 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="0 0, 0 67, 9 67, 9 43, 18 43" fill="#FF9877"/>
</svg>
</div>`
}
function m15(number) {
return number % 15 === 0
}
// Fork
function displayFork(number) {
return `<div style="position: absolute; top: 312.7px; left: 165px;">
<svg width="29" height="63" viewBox="0 0 29 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="1.5 0, 0 38, 10 38, 10 63, 19 63, 19 38, 29 38, 27.5 0, 21 0, 21 21, 17.5 21, 17.5 0, 11.5 0, 11.5 21, 8.11 21,8.11 0" fill="#FF9877"/>
</svg>
</div>`
}
function m16(number) {
return number % 16 === 0
}
// Necklace
function displayNecklace(number) {
return `<div style="position: absolute; top: 291px; left: 150px;">
<svg width="70" height="14" viewBox="0 0 70 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="70" height="14" fill="#A2FF00"/>
<polygon points ="0 0, 0 14, 14 0, 14 14, 28 0, 28 14, 42 0, 42 14, 56 0, 56 14, 70 0" fill="#FF9877"/>
</svg>
</div>`
}
function m69(number) {
return number % 69 === 0
}
// Antenna
function displayAntenna(number) {
return `<div style="position: absolute; top: 50px; left: 103px;">
<svg width="220" height="30" viewBox="0 0 220 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points ="0 0, 0 30, 220 0, 220 30" fill="#75FF00"/>
</svg>
</div>`
}
function m11(number) {
return number % 11 === 0
}
// Darkmatter1
function displayDarkmatter1(number) {
return `<div style="position: absolute; top: 50px; left: 10px;">
<svg width="400" height="355" viewBox="0 0 400 355" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="cls-1" d="m6.8,29.37C-5.23,52.46-.37,81.1,14.13,102.9c11.57,17.38,29.71,34.88,24.85,54.87-3.01,12.38-14.21,21.2-22.21,31.43-10.43,13.36-15.7,30.21-14.61,46.76.16,2.37.5,4.87,2.09,6.71,3.03,3.49,8.76,2.91,13.46,2,14.91-2.87,29.81-5.74,44.72-8.61-.86,0-4.27,5.98-4.87,6.83-1.71,2.39-3.41,4.78-5.12,7.17-3.49,4.9-6.99,9.79-10.48,14.69-1.39,1.95-3.68,4.21-4.35,6.45-.58,1.94-.11,4.57.34,6.49,1.72,7.32,6.95,11.17,13.57,14.59,7.18,3.71,14.7,7.01,22.75,8.62,11.43,2.29,24.41.66,32.9-6.89,3.35-2.98,6.23-6.95,10.72-7.92,5.1-1.11,10.03,2.11,14.04,5.26,13.2,10.37,25.18,22.11,35.66,34.94,3.8,4.65,7.5,9.54,12.57,12.96,8.63,5.82,20.88,6.44,30.12,1.53s15.01-15.09,14.18-25.04c.27,3.21,5.11,8.43,6.99,11,2.93,4.01,6.14,7.81,9.61,11.37,3.16,3.24,6.75,7.25,10.58,9.67,11.5,7.27,20.87-5.73,23.99-15.09,2.14-6.43,2.65-13.39,1.86-20.1-1.52-12.76-7.19-24.7-12.8-36.4,2.42,18.15,16.76,33.54,34.08,41.84,3.44,1.65,7.01,3.07,10.66,4.26,12.24,4.02,25.24,5.57,38.15,5.91,5.92.16,11.62.22,17.16-2.05,5.16-2.11,9.65-5.61,13.09-9.77,5.43-6.57,8.43-14.64,10.38-22.76-1.19,3.73-4.3,6.77-8.01,8.49s-7.97,2.23-12.09,1.95c-2.76-.19-5.59-.76-7.85-2.27-2.26-1.51-3.83-4.13-3.39-6.7-.03,2.14-.17,4.38-1.33,6.22-1.26,1.98-3.56,3.21-5.94,3.76s-4.86.49-7.31.44c-1.61-.04-3.26-.09-4.73-.71-3.24-1.38-4.5-5.02-5.42-8.25.06,3.86-2.68,7.47-6.33,9.24s-8.02,1.87-12,.93c-3.25-.77-6.33-2.43-9.34-3.78-3.26-1.47-6.06-3.73-8.76-5.96-5.88-4.84-12.04-9.49-17.77-14.49-3.79-3.31-7.47-9.85-13.33-9-2.46.36-4.78,1.96-5.74,4.25-.71,1.71-.66,3.62-.59,5.47.12,3.34.33,5.82,1.29,9.05,1.72,5.79,3.37,11.59,4.94,17.42,1.01,3.75,2.88,7.31,3.63,11.13.55,2.76-.11,5.74-1.76,8.01-3.38,4.65-7.05,2.87-11.7-5.92,1.05.97,1.03,9.06-.22,9.79-1.41.83-4.55,1.54-5.95.66-3.71-2.31-7.05-8.93-9.12-12.66-3.15-5.68-6.22-12.54-10.87-17.16-4.15-4.12-13.86-8.56-18.94-3.84-1.62,1.5-2.06,3.77-2.57,5.85-.61,2.47-1.47,4.94-3.15,6.93-1.98,2.35-4.37,2.75-7.22,3.46-3.07.77-5.96,1.37-9.16,1.47-4.32.14-8.69-.53-12.69-2.09-12.55-4.91-21.24-15.65-29.27-25.96s-16.6-21.1-29.06-26.21c-5.67-2.33-12.55-3.24-17.84-.21-5.29,3.03-7.54,9.05-11.42,13.6-4.31,5.05-11.81,6.27-18.28,5.45-2.54-.32-5.08-1.52-7.36-2.56-.9-.41-1.79-.86-2.52-1.5-1.81-1.6-2.28-4.14-2.19-6.47.46-12.12,11.48-21.37,12.02-33.55.16-3.59.16-7.6-2.46-10.21-2.74-2.72-7.21-2.84-11.19-2.96-10.05-.32-20.02,1.57-27.95-4.23-7.93-5.81-10.02-14.44-5.75-23,2.82-5.66,8.27-12.7,12.83-17.25,12.43-12.4,12.09-33.92,7.54-50.42-4.55-16.5-14.8-31.01-24.88-45.17,8.28-.89,14.41-8.27,16.12-15.95,1.26-5.65,1.27-9.92-3.47-13.82-1.6-1.32-3.02-2.81-4.24-4.45-.96-1.29-1.79-2.7-2.07-4.25s.08-3.27,1.26-4.38c1.29-1.23,3.32-1.53,5.14-1.32s3.57.85,5.36,1.24c6.65,1.44,10.8-2.59,12.68-8.29.83-2.52-.92-4.54-1.59-7.01-.6-2.2-.15-5.01,2.04-5.98.83-.37,1.79-.41,2.71-.38,4.5.15,8.92,1.84,12.24,4.69,2.22,1.9,3.94,4.3,5.02,6.93.45,1.11.48,2.88,1.15,3.84.62.89,2.56,1.73,3.54,2.23,3.24,1.64,7.2,1.98,10.7.93.29-.09.6-.2.78-.43.2-.25.21-.59.21-.91-.01-2.14-.03-4.27-.04-6.41,0-.43,0-.87.21-1.25.45-.81,1.6-.96,2.56-.89,2.85.22,5.46,1.56,8.25,2.14s6.25.11,7.62-2.25c1.03-1.77.51-4-.47-5.8-1.21-2.23-3.05-4.1-5.01-5.79C85.42,6.48,68.83-.61,51.96.04,31.87.81,15.48,12.69,6.8,29.37Z" fill="#75FF00"/>
</svg>
</div>`
}
function m888(number) {
return number % 888 === 0
}
// Darkmatter2
function displayDarkmatter2(number) {
return `<div style="position: absolute; top: 50px; left: 10px;">
<svg width="400" height="355" viewBox="0 0 400 355" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="cls-1" d="m6.8,29.37C-5.23,52.46-.37,81.1,14.13,102.9c11.57,17.38,29.71,34.88,24.85,54.87-3.01,12.38-14.21,21.2-22.21,31.43-10.43,13.36-15.7,30.21-14.61,46.76.16,2.37.5,4.87,2.09,6.71,3.03,3.49,8.76,2.91,13.46,2,14.91-2.87,29.81-5.74,44.72-8.61-.86,0-4.27,5.98-4.87,6.83-1.71,2.39-3.41,4.78-5.12,7.17-3.49,4.9-6.99,9.79-10.48,14.69-1.39,1.95-3.68,4.21-4.35,6.45-.58,1.94-.11,4.57.34,6.49,1.72,7.32,6.95,11.17,13.57,14.59,7.18,3.71,14.7,7.01,22.75,8.62,11.43,2.29,24.41.66,32.9-6.89,3.35-2.98,6.23-6.95,10.72-7.92,5.1-1.11,10.03,2.11,14.04,5.26,13.2,10.37,25.18,22.11,35.66,34.94,3.8,4.65,7.5,9.54,12.57,12.96,8.63,5.82,20.88,6.44,30.12,1.53s15.01-15.09,14.18-25.04c.27,3.21,5.11,8.43,6.99,11,2.93,4.01,6.14,7.81,9.61,11.37,3.16,3.24,6.75,7.25,10.58,9.67,11.5,7.27,20.87-5.73,23.99-15.09,2.14-6.43,2.65-13.39,1.86-20.1-1.52-12.76-7.19-24.7-12.8-36.4,2.42,18.15,16.76,33.54,34.08,41.84,3.44,1.65,7.01,3.07,10.66,4.26,12.24,4.02,25.24,5.57,38.15,5.91,5.92.16,11.62.22,17.16-2.05,5.16-2.11,9.65-5.61,13.09-9.77,5.43-6.57,8.43-14.64,10.38-22.76-1.19,3.73-4.3,6.77-8.01,8.49s-7.97,2.23-12.09,1.95c-2.76-.19-5.59-.76-7.85-2.27-2.26-1.51-3.83-4.13-3.39-6.7-.03,2.14-.17,4.38-1.33,6.22-1.26,1.98-3.56,3.21-5.94,3.76s-4.86.49-7.31.44c-1.61-.04-3.26-.09-4.73-.71-3.24-1.38-4.5-5.02-5.42-8.25.06,3.86-2.68,7.47-6.33,9.24s-8.02,1.87-12,.93c-3.25-.77-6.33-2.43-9.34-3.78-3.26-1.47-6.06-3.73-8.76-5.96-5.88-4.84-12.04-9.49-17.77-14.49-3.79-3.31-7.47-9.85-13.33-9-2.46.36-4.78,1.96-5.74,4.25-.71,1.71-.66,3.62-.59,5.47.12,3.34.33,5.82,1.29,9.05,1.72,5.79,3.37,11.59,4.94,17.42,1.01,3.75,2.88,7.31,3.63,11.13.55,2.76-.11,5.74-1.76,8.01-3.38,4.65-7.05,2.87-11.7-5.92,1.05.97,1.03,9.06-.22,9.79-1.41.83-4.55,1.54-5.95.66-3.71-2.31-7.05-8.93-9.12-12.66-3.15-5.68-6.22-12.54-10.87-17.16-4.15-4.12-13.86-8.56-18.94-3.84-1.62,1.5-2.06,3.77-2.57,5.85-.61,2.47-1.47,4.94-3.15,6.93-1.98,2.35-4.37,2.75-7.22,3.46-3.07.77-5.96,1.37-9.16,1.47-4.32.14-8.69-.53-12.69-2.09-12.55-4.91-21.24-15.65-29.27-25.96s-16.6-21.1-29.06-26.21c-5.67-2.33-12.55-3.24-17.84-.21-5.29,3.03-7.54,9.05-11.42,13.6-4.31,5.05-11.81,6.27-18.28,5.45-2.54-.32-5.08-1.52-7.36-2.56-.9-.41-1.79-.86-2.52-1.5-1.81-1.6-2.28-4.14-2.19-6.47.46-12.12,11.48-21.37,12.02-33.55.16-3.59.16-7.6-2.46-10.21-2.74-2.72-7.21-2.84-11.19-2.96-10.05-.32-20.02,1.57-27.95-4.23-7.93-5.81-10.02-14.44-5.75-23,2.82-5.66,8.27-12.7,12.83-17.25,12.43-12.4,12.09-33.92,7.54-50.42-4.55-16.5-14.8-31.01-24.88-45.17,8.28-.89,14.41-8.27,16.12-15.95,1.26-5.65,1.27-9.92-3.47-13.82-1.6-1.32-3.02-2.81-4.24-4.45-.96-1.29-1.79-2.7-2.07-4.25s.08-3.27,1.26-4.38c1.29-1.23,3.32-1.53,5.14-1.32s3.57.85,5.36,1.24c6.65,1.44,10.8-2.59,12.68-8.29.83-2.52-.92-4.54-1.59-7.01-.6-2.2-.15-5.01,2.04-5.98.83-.37,1.79-.41,2.71-.38,4.5.15,8.92,1.84,12.24,4.69,2.22,1.9,3.94,4.3,5.02,6.93.45,1.11.48,2.88,1.15,3.84.62.89,2.56,1.73,3.54,2.23,3.24,1.64,7.2,1.98,10.7.93.29-.09.6-.2.78-.43.2-.25.21-.59.21-.91-.01-2.14-.03-4.27-.04-6.41,0-.43,0-.87.21-1.25.45-.81,1.6-.96,2.56-.89,2.85.22,5.46,1.56,8.25,2.14s6.25.11,7.62-2.25c1.03-1.77.51-4-.47-5.8-1.21-2.23-3.05-4.1-5.01-5.79C85.42,6.48,68.83-.61,51.96.04,31.87.81,15.48,12.69,6.8,29.37Z" fill="#FF00FF"/>
</svg>
</div>`
}
function ce8(number) {
let numberStr = number.toString()
let exponent = 8
let power = 1
while (true) {
let exponentStr = Math.pow(exponent, power).toString()
if (numberStr.includes(exponentStr)) {
return true
}
if (Math.pow(exponent, power) > number) break // Stop if the exponent value exceeds the number
power++
}
return false
}
function displayNightVision() {
return ` <div style="position: absolute; top: 189.5px; left: 88px">
<svg width="288" height="45" viewBox="0 0 288 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="66" cy="0" rx="66" ry="45" fill="#00BCFF"/>
<ellipse cx="221" cy="0" rx="66" ry="45" fill="#00BCFF"/>
<ellipse cx="66" cy="0" rx="10" ry="10" fill="#00865E"/>
<ellipse cx="221" cy="0" rx="10" ry="10" fill="#00865E"/>
</svg>
</div>`
}
//fixed elements
function generateHtmlBasedOnBlockNumber(blockNumber) {
const lookDir = getLook(blockNumber)
const lookHtml = generateLookSvg(lookDir)
let boob = c607(blockNumber) ? displayboob() : ""
let boob2 = c6a0(blockNumber) ? displayboob2() : ""
let Horn = c0(blockNumber) ? displayHorn() : ""
let Catear = c00(blockNumber) ? displayCatear() : ""
let Catearling = c0000(blockNumber) ? displayCatearling() : ""
let Catearpiace = c00000(blockNumber) ? displayCatearpiace() : ""
let Planet1 = c3(blockNumber) ? displayPlanet1() : ""
let Planet2 = c33(blockNumber) ? displayPlanet2() : ""
let Planet3 = c333(blockNumber) ? displayPlanet3() : ""
let flysLaserEyes = c3333(blockNumber) ? displayFlysLaserEyes() : ""
let Mouth = c4a4(blockNumber) ? displayMouth() : ""
let Bigmouth = c44(blockNumber) ? displayBigmouth() : ""
let Yellowmouth = c444(blockNumber) ? displayYellowmouth() : ""
let Tonguepink = c4444(blockNumber) ? displayTonguepink() : ""
let Tongueblue = c44444(blockNumber) ? displayTongueblue() : ""
let Arrow = cp6(blockNumber) ? displayArrow() : ""
let Halo = cs5(blockNumber) ? displayHalo() : ""
let Pauldron = cs6(blockNumber) ? displayPauldron() : ""
let Rifle1 = c9a9(blockNumber) ? displayRifle1() : ""
let Rifle2 = c99(blockNumber) ? displayRifle2() : ""
let Rifle3 = c999(blockNumber) ? displayRifle3() : ""
let Rifle4 = c9999(blockNumber) ? displayRifle4() : ""
let Darkmatter1 = m11(blockNumber) ? displayDarkmatter1() : ""
let Darkmatter2 = m888(blockNumber) ? displayDarkmatter2() : ""
let nightVision = ce8(blockNumber) ? displayNightVision() : ""
let Thunder = m12(blockNumber) ? displayThunder() : ""
let Tear = m13(blockNumber) ? displayTear() : ""
let Knife = m14(blockNumber) ? displayKnife() : ""
let Fork = m15(blockNumber) ? displayFork() : ""
let Necklace = m16(blockNumber) ? displayNecklace() : ""
let Antenna = m69(blockNumber) ? displayAntenna() : ""
const containsSquare = containsFourDigitSquare(blockNumber)
const eyeDirection = getLaserEyeRange(parseInt(blockNumber.toString().slice(-4)))
const laserEyes = containsSquare ? displayLaserEyes(eyeDirection) : ""
const svgsForDigits = generateSvgForDigits(blockNumber)
//background
const background = `<div style="position: absolute; top: 0px; left: 0px;">
<svg width="425" height="425" viewBox="0 0 425 425" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="425" height="425" fill="#E5E4DC"/>
</svg>
</div>`;
// eyes
const eyes = `
<div style="position: absolute; top: 144.5px; left: 88px;">
<svg width="288" height="90" viewBox="0 0 288 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="66" cy="44" rx="66" ry="45" fill="white"/>
<ellipse cx="221" cy="44" rx="66" ry="45" fill="white"/>
</svg>
</div>`
// eyelib
const eyelib = `
<div style="position: absolute; top: 144.5px; left: 88px">
<svg width="288" height="45" viewBox="0 0 288 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="66" cy="44" rx="66" ry="45" fill="#009C92"/>
<ellipse cx="221" cy="44" rx="66" ry="45" fill="#009C92"/>
</svg>
</div>`
//construction
const htmlContent = background + Horn + Catear + Catearling + eyes + nightVision + lookHtml + eyelib + svgsForDigits + boob2 + boob + Planet1 + Planet2 + Planet3 + Fork + Necklace + Bigmouth + Mouth + Darkmatter1 + Yellowmouth + Thunder + Knife + Antenna + Tear + Tonguepink + Tongueblue + Rifle1 + Rifle2 + Rifle3 + Rifle4 + Halo + Pauldron + Darkmatter2 + Arrow + Catearpiace + flysLaserEyes + laserEyes
document.getElementById('natdogoooooviewer').innerHTML = htmlContent
}
</script>