Hi 👋 

import { useState } from 'react'; import { Input } from "/components/ui/input"; import { Label } from "/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "/components/ui/select"; import { Button } from "/components/ui/button"; const SvgPatternGenerator = () => { const [pattern, setPattern] = useState(''); const [shape, setShape] = useState('circle'); const [size, setSize] = useState(10); const [spacing, setSpacing] = useState(10); const [strokeWidth, setStrokeWidth] = useState(1); const [strokeColor, setStrokeColor] = useState('#000'); const [fillColor, setFillColor] = useState('#fff'); const generatePattern = () => { const svg = ` <${shape} cx="${size / 2}" cy="${size / 2}" r="${size / 2}" stroke-width="${strokeWidth}" stroke="${strokeColor}" fill="${fillColor}"/> `; setPattern(svg); }; return (

SVG Pattern Generator

setSize(Number(e.target.value))} />
setSpacing(Number(e.target.value))} />
setStrokeWidth(Number(e.target.value))} />
setStrokeColor(e.target.value)} />
setFillColor(e.target.value)} />

Generated Pattern:

); }; export default SvgPatternGenerator;

Popular Posts