SHOWING: First 60
(function() {
/* Placeholder */
const art = document.getElementById('art');
art.innerHTML = '';
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('height', '512');
rect.setAttribute('width', '512');
rect.setAttribute('fill', 'black');
art.appendChild(rect);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('id', 'text');
text.setAttribute('x', '50%');
text.setAttribute('y', '50%');
text.setAttribute('dominant-baseline', 'middle');
text.setAttribute('text-anchor', 'middle');
text.setAttribute('fill', 'white');
text.setAttribute('font-size', '132');
text.setAttribute('style', "font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto;");
text.textContent = '?';
svg.appendChild(text);
})();#65,092,003text(function() {
/* Art */
const art = document.getElementById('art');
art.innerHTML = '';
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('height', '512');
rect.setAttribute('width', '512');
rect.setAttribute('fill', 'black');
art.appendChild(rect);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('id', 'text');
text.setAttribute('x', '50%');
text.setAttribute('y', '50%');
text.setAttribute('dominant-baseline', 'middle');
text.setAttribute('text-anchor', 'middle');
text.setAttribute('fill', 'white');
text.setAttribute('font-size', '132');
text.setAttribute('style', "font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto;");
text.textContent = svg.dataset.blk;
svg.appendChild(text);
})();#65,091,965text// art
const art = document.getElementById('art');
art.innerHTML = '';
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('height', '512');
rect.setAttribute('width', '512');
rect.setAttribute('fill', 'black');
art.appendChild(rect);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('id', 'text');
text.setAttribute('x', '50%');
text.setAttribute('y', '50%');
text.setAttribute('dominant-baseline', 'middle');
text.setAttribute('text-anchor', 'middle');
text.setAttribute('fill', 'white');
text.setAttribute('font-size', '132');
text.setAttribute('style', "font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto;");
text.textContent = svg.dataset.blk;
svg.appendChild(text);#65,085,428textdmt-mint.dgtest3#65,080,816tap// placeholder
const art = document.getElementById('art');
art.innerHTML = '';
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('height', '512');
rect.setAttribute('width', '512');
rect.setAttribute('fill', 'black');
art.appendChild(rect);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('id', 'text');
text.setAttribute('x', '50%');
text.setAttribute('y', '50%');
text.setAttribute('dominant-baseline', 'middle');
text.setAttribute('text-anchor', 'middle');
text.setAttribute('fill', 'white');
text.setAttribute('font-size', '132');
text.setAttribute('style', "font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto;");
text.textContent = '?';
svg.appendChild(text);#65,079,504textdmt-mint.dgtest2#64,947,335tapdmt-deploy.dgtest2#64,795,556tapCULT.66.11.element#63,856,808textdmt-deploy.dgtest2#63,843,202tap<svg width="512" height="512" viewBox="0 0 512 512" style="shape-rendering: crispedges;">
<!-- background -->
<rect height="512" width="512" fill="black" />
<!-- stroke -->
<rect height="512" width="512" fill="none" stroke="red" stroke-width="40" />
<!-- circle -->
<circle cx="256" cy="256" r="200" fill="white" id="circle" />
</svg>
<input id="input" type="number" style="display:none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
const svg = document.querySelector('svg');
const circle = document.getElementById('circle');
const parentElement = svg.parentElement;
parentElement.style.width = '100%';
parentElement.style.height = '100%';
parentElement.style.padding = '0px';
parentElement.style.margin = '0px';
let blockNumber = '0';
// Colors
const colorMap = {
0: "#585663", // Grey
1: "#6D2BF8", // Purple
2: "#AF89FE", // Lilac
3: "#FDF64D", // Yellow
4: "#2067F0", // Blue
5: "#976F53", // Brown
6: "#CBC7E3", // Light Grey
7: "#15D96F", // Green
8: "#FF64C1", // Pink
9: "#F95E3C", // Orange
}
// Get block number
const mintText = document.getElementById('preview').getAttribute('mint');
console.log('Mint text', mintText);
if (mintText.includes('MINT_INSCRIPTION_ID')) {
let input = document.getElementById('input')
input.style.display = 'block';
input.style.position = 'absolute';
input.style.fontSize = '1rem';
input.style.top = '1rem';
input.style.left = '1rem';
input.value = blockNumber
input.addEventListener('input', (event) => {
blockNumber = input.value
update();
})
update();
} 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) {
data = JSON.parse(result)
blockNumber = data.blk
}
update();
}
function update() {
const colorIndex = getLastDigit(blockNumber);
circle.style.fill = colorMap[colorIndex];
}
// Resize
function resize(event) {
let scaleW = window.innerWidth / 512;
let scaleH = window.innerHeight / 512;
console.log(scaleW, scaleH)
if (scaleH < scaleW) scaleW = scaleH;
svg.style.zoom = scaleW;
generateArt(blockNumber);
}
window.addEventListener('resize', resize, true)
resize();
// Get last digit
function getLastDigit(number) {
return number % 10;
}
</script>#63,840,664textdmt-deploy.dgtest#63,833,615tapdgtest.11.11.element#63,827,002textdmt-deploy.dgtest#63,771,997tapdgtest.42.11.element#63,768,559textDG#63,762,942text