<!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> <!-- Include Tailwind CSS --> <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)'); // Set initial gradient for (let i = 0; i < colors.length; i++) { path.setAttribute(`stroke-url(#gradient-${i})`, colors[i]); } } drawBtn.addEventListener('click', drawRainbow); </script> </body> </html>