Select Background Design
// Background pattern generator
function generateBackgroundPatterns() {
const patterns = [
// Geometric patterns
{
name: "Diamonds",
generate: function(ctx, width, height) {
const size = 40;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = 'rgba(37, 211, 102, 0.3)';
ctx.lineWidth = 2;
for (let x = 0; x < width + size; x += size) {
for (let y = 0; y < height + size; y += size) {
ctx.beginPath();
ctx.moveTo(x, y + size/2);
ctx.lineTo(x + size/2, y);
ctx.lineTo(x + size, y + size/2);
ctx.lineTo(x + size/2, y + size);
ctx.closePath();
ctx.stroke();
}
}
}
},
{
name: "Bubbles",
generate: function(ctx, width, height) {
const gradient = ctx.createLinearGradient(0, 0, width, height);
gradient.addColorStop(0, '#8E2DE2');
gradient.addColorStop(1, '#4A00E0');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
const bubbleCount = 50;
for (let i = 0; i < bubbleCount; i++) {
const x = Math.random() * width;
const y = Math.random() * height;
const radius = Math.random() * 20 + 5;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
}
},
// Gradient patterns
{
name: "Sunset",
generate: function(ctx, width, height) {
const gradient = ctx.createLinearGradient(0, 0, width, height);
gradient.addColorStop(0, '#FF416C');
gradient.addColorStop(1, '#FF4B2B');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
}
},
{
name: "Ocean",
generate: function(ctx, width, height) {
const gradient = ctx.createRadialGradient(
width/2, height/2, 0,
width/2, height/2, Math.max(width, height)/2
);
gradient.addColorStop(0, '#00B4DB');
gradient.addColorStop(1, '#0083B0');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
}
},
// Textured patterns
{
name: "Confetti",
generate: function(ctx, width, height) {
ctx.fillStyle = '#f5f5f5';
ctx.fillRect(0, 0, width, height);
const colors = ['#25D366', '#128C7E', '#075E54', '#DCF8C6'];
const confettiCount = 100;
for (let i = 0; i < confettiCount; i++) {
const x = Math.random() * width;
const y = Math.random() * height;
const size = Math.random() * 10 + 5;
const angle = Math.random() * Math.PI;
const color = colors[Math.floor(Math.random() * colors.length)];
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillStyle = color;
ctx.fillRect(-size/2, -size/2, size, size);
ctx.restore();
}
}
},
{
name: "Hearts",
generate: function(ctx, width, height) {
ctx.fillStyle = '#FF9A8B';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
const heartCount = 30;
const heartSize = 20;
for (let i = 0; i < heartCount; i++) {
const x = Math.random() * width;
const y = Math.random() * height;
ctx.save();
ctx.translate(x, y);
ctx.scale(heartSize/100, heartSize/100);
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();
ctx.restore();
}
}
}
];
return patterns;
}
// Function to create pattern previews
function createPatternPreviews() {
const patterns = generateBackgroundPatterns();
const container = document.getElementById('bgPatterns');
container.innerHTML = '';
const previewSize = 100;
patterns.forEach(pattern => {
const canvas = document.createElement('canvas');
canvas.width = previewSize;
canvas.height = previewSize;
const ctx = canvas.getContext('2d');
// Generate the pattern
pattern.generate(ctx, previewSize, previewSize);
const patternElement = document.createElement('div');
patternElement.className = 'bg-pattern';
patternElement.title = pattern.name;
patternElement.appendChild(canvas);
patternElement.addEventListener('click', function() {
document.querySelectorAll('.bg-pattern').forEach(p => {
p.classList.remove('selected');
});
this.classList.add('selected');
// Apply this pattern to the main card
applyPatternToCard(pattern);
});
container.appendChild(patternElement);
});
// Select first pattern by default
if (container.firstChild) {
container.firstChild.classList.add('selected');
applyPatternToCard(patterns[0]);
}
}
// Apply selected pattern to wish card
function applyPatternToCard(pattern) {
const card = document.getElementById('wishCardBg');
const canvas = document.createElement('canvas');
const width = card.offsetWidth;
const height = card.offsetHeight;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Generate the pattern at full size
pattern.generate(ctx, width, height);
// Set as background
card.style.backgroundImage = `url(${canvas.toDataURL()})`;
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
createPatternPreviews();
// Reapply pattern when window is resized
window.addEventListener('resize', function() {
const selected = document.querySelector('.bg-pattern.selected');
if (selected) {
const patterns = generateBackgroundPatterns();
const patternName = selected.title;
const pattern = patterns.find(p => p.name === patternName);
if (pattern) applyPatternToCard(pattern);
}
});
});
.webp)
.webp)
