<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Drawer</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
<div class="text-center">
<h1 class="text-3xl font-bold mb-4">Rainbow Drawer</h1>
<div id="color-pickers" class="mb-4">
<label for="color1">Color 1:</label>
<input type="color" id="color1" value="#ff0000">
<label for="color2">Color 2:</label>
<input type="color" id="color2" value="#ff7f00">
<label for="color3">Color 3:</label>
<input type="color" id="color3" value="#ffff00">
<label for="color4">Color 4:</label>
<input type="color" id="color4" value="#00ff00">
<label for="color5">Color 5:</label>
<input type="color" id="color5" value="#0000ff">
<label for="color6">Color 6:</label>
<input type="color" id="color6" value="#7f00ff">
<label for="color7">Color 7:</label>
<input type="color" id="color7" value="#ff00ff">
</div>
<button id="draw-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Draw Rainbow</button>
<svg id="rainbow-canvas" class="rainbow-canvas mt-4" viewBox="0 0 500 300"></svg>
</div>
<script>
const colorPickers = document.querySelectorAll('input[type="color"]');
const drawBtn = document.getElementById('draw-btn');
const svg = document.getElementById('rainbow-canvas');
function drawRainbow() {
const colors = [];
let hasEmptyColor = false;
for (const picker of colorPickers) {
colors.push(picker.value);
if (!picker.value) {
hasEmptyColor = true;
break;
}
}
if (hasEmptyColor) {
alert('Please select a color for each section of the rainbow!');
return;
}
const sectionWidth = 100 / colors.length;
let pathData = '';
colors.forEach((color, index) => {
const startX = index * sectionWidth;
const endX = (index + 1) * sectionWidth;
pathData += `M ${startX},0 A 250,250 0 0,1 ${endX},300 `;
});
svg.innerHTML = `<path d="${pathData}" fill="none" stroke="black" />`;
colors.forEach((color, index) => {
const start = index * sectionWidth;
const end = (index + 1) * sectionWidth;
const linearGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
linearGradient.setAttribute('id', `gradient-${index}`);
linearGradient.setAttribute('x1', `${start}%`);
linearGradient.setAttribute('y1', '0%');
linearGradient.setAttribute('x2', `${end}%`);
linearGradient.setAttribute('y2', '100%');
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('style', `stop-color:${color};stop-opacity:1`);
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('style', `stop-color:${colors[(index + 1) % colors.length]};stop-opacity:1`);
linearGradient.appendChild(stop1);
linearGradient.appendChild(stop2);
svg.appendChild(linearGradient);
});
const path = svg.querySelector('path');
path.setAttribute('stroke', 'url(#gradient-0)');
for (let i = 0; i < colors.length; i++) {
path.setAttribute(`stroke-url(#gradient-${i})`, colors[i]);
}
}
drawBtn.addEventListener('click', drawRainbow);
</script>
</body>
</html>