Multi-size sewing pattern picker
A paper sewing pattern with nested graded sizes: the chosen one is traced in red and the others fade back.
Settings
Code
<fieldset class="uvq04-pat"><legend>Pattern size</legend><div class="pp" aria-hidden="true"><svg class="dr" viewBox="14 2 86 92"><path class="g g1" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.82) translate(-30 -90)" vector-effect="non-scaling-stroke" stroke-dasharray="none"/><path class="g g2" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.88) translate(-30 -90)" vector-effect="non-scaling-stroke" stroke-dasharray="5 3"/><path class="g g3" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.94) translate(-30 -90)" vector-effect="non-scaling-stroke" stroke-dasharray="1 2.6"/><path class="g g4" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(1) translate(-30 -90)" vector-effect="non-scaling-stroke" stroke-dasharray="7 2 1.5 2"/><path class="g g5" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(1.06) translate(-30 -90)" vector-effect="non-scaling-stroke" stroke-dasharray="10 3"/><path class="gl" d="M54 36V72M51 40L54 36L57 40M51 68L54 72L57 68"/><path class="fd" d="M25 28V86"/></svg><svg class="sc" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.6 7.6L20 16M8.6 16.4L20 8"/></svg><p class="tx">Front · cut 1 on fold</p></div><div class="op"><label><input type="radio" name="uvq04-pat"><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" stroke-dasharray="none"/></svg><b>36</b></span></label><label><input type="radio" name="uvq04-pat"><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" stroke-dasharray="5 3"/></svg><b>38</b></span></label><label><input type="radio" name="uvq04-pat" checked><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" stroke-dasharray="1 2.6"/></svg><b>40</b></span></label><label><input type="radio" name="uvq04-pat"><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" stroke-dasharray="7 2 1.5 2"/></svg><b>42</b></span></label><label><input type="radio" name="uvq04-pat"><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" stroke-dasharray="10 3"/></svg><b>44</b></span></label></div></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Like a real multi-size sewing pattern, five bodice outlines are nested inside each other on gridded tissue paper, each size with its own line style: solid, dashed, dotted and dash-dot. Picking a size traces its outline in red with a light fill, fades the rest and makes the scissors snip. Useful for sewing pattern shops, fashion courses and size guides.
The main color marks the chosen size and the secondary color is the paper. The five outlines share one SVG path scaled from the fold, so you can swap it for a sleeve or a skirt piece and keep the grading.