#0
0.00000001 BSV
cordQ text/html ME<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>High-Impact 8-Bit NFT</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.container {
width: 480px;
height: 480px;
overflow: hidden;
image-rendering: pixelated;
image-rendering: crisp-edges;
box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
}
svg {
display: block;
image-rendering: pixelated;
}
</style>
</head>
<body>
<div class="container">
<svg width="480" height="480" viewBox="0 0 480 480" preserveAspectRatio="xMidYMid slice">
<!-- Background -->
<rect width="480" height="480" fill="#0A0A0A" id="background" />
<defs id="pattern-defs">
<!-- Patterns will be generated dynamically by JavaScript -->
</defs>
<!-- Pattern layers will be added here by JavaScript -->
<g id="pattern-layers" style="isolation: isolate">
</g>
</svg>
</div>
<script>
// Get SVG elements
const patternDefs = document.getElementById('pattern-defs');
const patternLayers = document.getElementById('pattern-layers');
const backgroundRect = document.getElementById('background');
// Random number utilities
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomFloat(min, max) {
return Math.random() * (max - min) + min;
}
function randomChoice(array) {
return array[Math.floor(Math.random() * array.length)];
}
// Generate ultra-vibrant colors
function generateVibrantColors(count) {
// Ultra-vibrant neon color palettes
const neonPalettes = [
// Cyberpunk neon
['#FF00FF', '#00FFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
// Vaporwave
['#FF71CE', '#01CDFE', '#05FFA1', '#B967FF', '#FFFB96'],
// Retro arcade
['#39FF14', '#FF3131', '#1F51FF', '#FF1493', '#FFF01F'],
// Digital future
['#FF10F0', '#00FFFF', '#FB33DB', '#7FFF00', '#FF3131']
];
// Pick a random palette and shuffle it
const palette = [...randomChoice(neonPalettes)].sort(() => Math.random() - 0.5);
// Select colors from the palette
const selectedColors = [];
for (let i = 0; i < count; i++) {
selectedColors.push(palette[i % palette.length]);
}
return selectedColors;
}
// Generate advanced 8-bit pixelated shapes
function generate8BitShapes() {
// Collection of pixel art patterns defined as grids
const pixelPatterns = [
// Classic space invader (5x5)
[
[0, 0, 1, 0, 0],
[0, 1, 1, 1, 0],
[1, 1, 1, 1, 1],
[1, 0, 1, 0, 1],
[0, 1, 0, 1, 0]
],
// Pac-Man ghost (5x5)
[
[0, 1, 1, 1, 0],
[1, 1, 1, 1, 1],
[1, 0, 1, 0, 1],
[1, 1, 1, 1, 1],
[1, 0, 1, 0, 1]
],
// Star (5x5)
[
[0, 0, 1, 0, 0],
[0, 1, 1, 1, 0],
[1, 1, 1, 1, 1],
[0, 1, 1, 1, 0],
[0, 0, 1, 0, 0]
],
// Skull (5x5)
[
[0, 1, 1, 1, 0],
[1, 0, 1, 0, 1],
[1, 1, 1, 1, 1],
[0, 1, 1, 1, 0],
[0, 1, 0, 1, 0]
],
// Heart (5x5)
[
[0, 1, 0, 1, 0],
[1, 1, 1, 1, 1],
[1, 1, 1, 1, 1],
[0, 1, 1, 1, 0],
[0, 0, 1, 0, 0]
],
// Mushroom (5x5)
[
[0, 0, 1, 0, 0],
[0, 1, 1, 1, 0],
[1, 1, 1, 1, 1],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0]
],
// Tetris Z piece (4x4)
[
[1, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
],
// Tetris T piece (3x3)
[
[0, 1, 0],
[1, 1, 1],
[0, 0, 0]
],
// Checkerboard (4x4)
[
[1, 0, 1, 0],
[0, 1, 0, 1],
[1, 0, 1, 0],
[0, 1, 0, 1]
],
// Spiral (5x5)
[
[1, 1, 1, 1, 1],
[1, 0, 0, 0, 1],
[1, 0, 1, 0, 1],
[1, 0, 1, 1, 1],
[0, 0, 0, 0, 0]
]
];
// Convert pixel grids to SVG functions
const shapeFunctions = pixelPatterns.map(grid => {
return (pixelSize, color, secondaryColor) => {
const gridSize = grid.length;
let svg = '';
for (let y = 0; y < gridSize; y++) {
for (let x = 0; x < gridSize; x++) {
if (grid[y][x] === 1) {
// Randomly use secondary color for some pixels (25% chance)
const useSecondaryColor = Math.random() < 0.25;
const fillColor = useSecondaryColor ? secondaryColor : color;
svg += `<rect x="${x * pixelSize}" y="${y * pixelSize}" width="${pixelSize}" height="${pixelSize}" fill="${fillColor}" />`;
}
}
}
return svg;
};
});
return shapeFunctions.sort(() => Math.random() - 0.5).slice(0, randomInt(3, 6));
}
// Enhanced motion patterns with more variety and impact
const motionPatterns = [
// Circular orbit
(amplitude, phaseOffset = 0) => {
return (t) => {
const angle = t * Math.PI * 2 + phaseOffset;
return {
x: Math.round(amplitude * Math.cos(angle) / 20) * 20,
y: Math.round(amplitude * Math.sin(angle) / 20) * 20
};
};
},
// Figure-8
(amplitude, phaseOffset = 0) => {
return (t) => {
const angle = t * Math.PI * 2 + phaseOffset;
const denominator = 1 + Math.sin(angle) * Math.sin(angle);
return {
x: Math.round((amplitude * 1.5 * Math.cos(angle) / denominator) / 20) * 20,
y: Math.round((amplitude * Math.sin(angle) * Math.cos(angle) / denominator) / 20) * 20
};
};
},
// Square path
(amplitude, phaseOffset = 0) => {
return (t) => {
// Divide the cycle into 4 segments
const segment = Math.floor(t * 4);
const segmentProgress = (t * 4) % 1;
let x, y;
switch(segment) {
case 0: // Top edge
x = Math.round((amplitude * (segmentProgress * 2 - 1)) / 20) * 20;
y = Math.round(-amplitude / 20) * 20;
break;
case 1: // Right edge
x = Math.round(amplitude / 20) * 20;
y = Math.round((amplitude * (segmentProgress * 2 - 1)) / 20) * 20;
break;
case 2: // Bottom edge
x = Math.round((amplitude * (1 - segmentProgress * 2)) / 20) * 20;
y = Math.round(amplitude / 20) * 20;
break;
case 3: // Left edge
x = Math.round(-amplitude / 20) * 20;
y = Math.round((amplitude * (1 - segmentProgress * 2)) / 20) * 20;
break;
}
return { x, y };
};
},
// Zigzag
(amplitude, phaseOffset = 0) => {
return (t) => {
const angle = t * Math.PI * 8 + phaseOffset; // 4 zigzags
return {
x: Math.round((t * amplitude * 2 - amplitude) / 20) * 20,
y: Math.round((amplitude * 0.8 * Math.sin(angle)) / 20) * 20
};
};
},
// Spiral
(amplitude, phaseOffset = 0) => {
return (t) => {
// Use sine to make radius oscillate for perfect looping
const radius = amplitude * Math.sin(t * Math.PI);
const angle = t * Math.PI * 4 + phaseOffset;
return {
x: Math.round((radius * Math.cos(angle)) / 20) * 20,
y: Math.round((radius * Math.sin(angle)) / 20) * 20
};
};
},
// Bouncing
(amplitude, phaseOffset = 0) => {
return (t) => {
// Horizontal movement
const x = Math.round((amplitude * 2 * (t - 0.5)) / 20) * 20;
// Vertical bouncing with easing
const bounceHeight = amplitude * 1.2;
const bounceT = (t * 2) % 1; // Two bounces per cycle
const y = Math.round((bounceHeight * 4 * bounceT * (1 - bounceT)) / 20) * 20;
return { x, y };
};
}
];
// Generate random animation parameters with more variation
function generateAnimationParams(layerCount) {
const params = [];
// Base cycle duration between 2-5 seconds
const baseCycleDuration = randomInt(2000, 5000);
// Decide on a color scheme
const colors = generateVibrantColors(layerCount * 2); // Get extra colors for secondary colors
// Decide on a background effect
const backgroundEffect = randomInt(1, 3);
for (let i = 0; i < layerCount; i++) {
// Each layer gets unique parameters
params.push({
// Pixel size (20x20 pixels)
pixelSize: 20,
// Primary color
color: colors[i],
// Secondary color for some pixels
secondaryColor: colors[i + layerCount],
// Movement amplitude (40-160 pixels, in steps of 20)
amplitude: randomInt(2, 8) * 20,
// Cycle duration variation (70-130% of base)
cycleDuration: baseCycleDuration * randomFloat(0.7, 1.3),
// Phase offset (0-2Ï)
phaseOffset: Math.random() * Math.PI * 2,
// Motion pattern function (randomly selected)
motionPattern: randomChoice(motionPatterns)(
randomInt(2, 8) * 20, // Amplitude in steps of 20px
Math.random() * Math.PI * 2 // Phase offset
),
// Special effects
effects: {
// Pulsing opacity
pulseOpacity: Math.random() < 0.5,
pulseFrequency: randomFloat(0.5, 2),
// Color cycling
cycleColors: Math.random() < 0.3,
// Rotation (rare)
rotate: Math.random() < 0.2,
rotationSpeed: randomFloat(0.5, 2) * (Math.random() < 0.5 ? 1 : -1)
}
});
}
// Add background effect parameters
params.backgroundEffect = backgroundEffect;
return params;
}
// Create the dynamic patterns and animation
function createDynamicPatterns() {
// Clear existing patterns
patternDefs.innerHTML = '';
patternLayers.innerHTML = '';
// Decide how many layers (3-6)
const layerCount = randomInt(3, 6);
// Generate animation parameters
const animParams = generateAnimationParams(layerCount);
// Set background color based on effect type
if (animParams.backgroundEffect === 1) {
// Solid vibrant color
const bgColor = generateVibrantColors(1)[0];
backgroundRect.setAttribute('fill', bgColor);
} else if (animParams.backgroundEffect === 2) {
// Gradient background
const gradientColors = generateVibrantColors(2);
// Create gradient
const gradientId = 'bg-gradient';
const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
gradient.setAttribute("id", gradientId);
gradient.setAttribute("x1", "0%");
gradient.setAttribute("y1", "0%");
gradient.setAttribute("x2", "100%");
gradient.setAttribute("y2", "100%");
// Add stops
const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
stop1.setAttribute("offset", "0%");
stop1.setAttribute("stop-color", gradientColors[0]);
const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
stop2.setAttribute("offset", "100%");
stop2.setAttribute("stop-color", gradientColors[1]);
gradient.appendChild(stop1);
gradient.appendChild(stop2);
patternDefs.appendChild(gradient);
// Apply gradient to background
backgroundRect.setAttribute('fill', `url(#${gradientId})`);
} else {
// Dark background for contrast
backgroundRect.setAttribute('fill', '#000000');
}
// Generate shape functions
const shapeFunctions = generate8BitShapes();
// Create patterns and layers
for (let i = 0; i < layerCount; i++) {
const params = animParams[i];
const shapeFunction = randomChoice(shapeFunctions);
// Create pattern
const patternId = `pattern-${i}`;
const patternElement = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
patternElement.setAttribute("id", patternId);
patternElement.setAttribute("x", "0");
patternElement.setAttribute("y", "0");
patternElement.setAttribute("width", (5 * params.pixelSize).toString());
patternElement.setAttribute("height", (5 * params.pixelSize).toString());
patternElement.setAttribute("patternUnits", "userSpaceOnUse");
patternElement.setAttribute("patternTransform", "translate(0 0)");
// Add shape to pattern with primary and secondary colors
patternElement.innerHTML = shapeFunction(params.pixelSize, params.color, params.secondaryColor);
patternDefs.appendChild(patternElement);
// Create layer using the pattern
const layerElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
layerElement.setAttribute("id", `layer-${i}`);
layerElement.setAttribute("width", "480");
layerElement.setAttribute("height", "480");
layerElement.setAttribute("fill", `url(#${patternId})`);
// Set blend mode based on layer index
const blendModes = ["lighten", "screen", "overlay", "color-dodge"];
const blendMode = blendModes[i % blendModes.length];
layerElement.setAttribute("style", `mix-blend-mode: ${blendMode}; opacity: 0.9`);
patternLayers.appendChild(layerElement);
// Store elements for animation
animParams[i].patternElement = patternElement;
animParams[i].layerElement = layerElement;
}
return animParams;
}
// Animation function with special effects
function animatePatterns(params) {
let startTime = performance.now();
let animationFrame = null;
function animate(timestamp) {
const elapsed = timestamp - startTime;
// Animate each layer
params.forEach((param, index) => {
if (!param.patternElement) return; // Skip if not a layer object
// Normalize time to 0-1 range for one complete cycle
const t = (elapsed % param.cycleDuration) / param.cycleDuration;
// Get position from motion pattern function
const position = param.motionPattern(t);
// Apply transform
let transform = `translate(${position.x} ${position.y})`;
// Apply rotation if enabled
if (param.effects.rotate) {
const rotationAngle = 360 * param.effects.rotationSpeed * t;
transform += ` rotate(${rotationAngle}, 240, 240)`;
}
param.patternElement.setAttribute('patternTransform', transform);
// Apply pulsing opacity if enabled
if (param.effects.pulseOpacity) {
const opacityBase = 0.7;
const opacityVariation = 0.3;
const opacity = opacityBase + opacityVariation * Math.sin(t * Math.PI * 2 * param.effects.pulseFrequency);
param.layerElement.setAttribute('opacity', opacity.toString());
}
// Apply color cycling if enabled
if (param.effects.cycleColors && elapsed % 500 < 50) {
// Occasionally shift hue
const hueShift = Math.sin(elapsed / 1000) * 30; // -30 to +30 degrees
param.layerElement.setAttribute('filter', `hue-rotate(${hueShift}deg)`);
}
});
// Continue animation loop
animationFrame = requestAnimationFrame(animate);
}
// Start animation
animationFrame = requestAnimationFrame(animate);
// Handle page visibility
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (animationFrame) {
cancelAnimationFrame(animationFrame);
animationFrame = null;
}
} else {
if (!animationFrame) {
startTime = performance.now();
animationFrame = requestAnimationFrame(animate);
}
}
});
}
// Initialize everything
const animParams = createDynamicPatterns();
animatePatterns(animParams);
// Allow regeneration on click for testing
document.querySelector('.container').addEventListener('click', () => {
const newParams = createDynamicPatterns();
animatePatterns(newParams);
});
</script>
</body>
</html>hv© ´Î2½Knâ±w9oP-Ϭ
https://whatsonchain.com/tx/ee8d0a042d0deae738cbfbcf953d1d3b00bb75fa7b08e1c4704762c879c2bcb8