/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [colors, setColors] = useState(['#ff0000', '#00ff00', '#0000ff']); const [positions, setPositions] = useState([ { x: 0, y: 0 }, { x: 100, y: 50 }, { x: 50, y: 100 }, ]); const canvasRef = useRef(null); useEffect(() => { drawGradient(); }, [colors, positions]); const drawGradient = () => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const gradient = ctx.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 ); colors.forEach((color, index) => { gradient.addColorStop(index / (colors.length - 1), color); }); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); }; const handleColorChange = (index, color) => { const newColors = [...colors]; newColors[index] = color; setColors(newColors); }; const handlePositionChange = (index, axis, value) => { const newPositions = [...positions]; newPositions[index][axis] = parseInt(value); setPositions(newPositions); }; const generateCSS = () => { return `background: radial-gradient(circle at center, ${colors.map((color, index) => `${color} ${Math.round(100 * index / (colors.length - 1))}%` ).join(', ')});`; }; return (

Mesh Gradient Generator

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Mesh Gradient Generator

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; background-color: #f0f0f0; } .container { max-width: 600px; margin: 0 auto; padding: 20px; } canvas { display: block; margin: 20px auto; border: 1px solid #ccc; } .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; } .color-control { display: flex; align-items: center; gap: 5px; } input[type="number"] { width: 50px; } .css-output { background-color: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 4px; } pre { white-space: pre-wrap; word-break: break-all; } `;

Mesh Gradient Generator

CSS Code:

steadfastCrimsonAlligator

Versions

v0