# 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.

- Category: [Radio buttons](https://library.aimran.es/components/radios)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-rd-sewing-pattern
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where 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.

## Code

### HTML

```html
<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>
```

### CSS

```css
.uvq04-pat {
  --c1: #d0342c;
  --c2: #f1e6cc;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

.uvq04-pat {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 18em;
}

.uvq04-pat legend {
  padding: 0;
  margin: 0 0 .8em;
  font-weight: 700;
}

.uvq04-pat .pp {
  position: relative;
  height: 12.5em;
  border-radius: .3em;
  overflow: hidden;
  color: #3b2f22;
  background: radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.45),transparent),linear-gradient(rgba(150,110,60,.09) 1px,transparent 1px) 0 0/1em 1em,linear-gradient(90deg,rgba(150,110,60,.09) 1px,transparent 1px) 0 0/1em 1em,var(--c2);
  box-shadow: 0 1em 2em -1.2em rgba(0,0,0,.5);
}

.uvq04-pat .dr {
  position: absolute;
  inset: .4em .4em 1.2em;
  width: calc(100% - .8em);
  height: calc(100% - 1.6em);
}

.uvq04-pat .g {
  fill: transparent;
  stroke: #5b4a36;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .38;
  transition: stroke calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),stroke-width calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),fill calc(0.4s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-pat .gl,.uvq04-pat .fd {
  fill: none;
  stroke: #5b4a36;
  stroke-width: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}

.uvq04-pat .fd {
  stroke-dasharray: 6 2 1 2;
}

.uvq04-pat .sc {
  position: absolute;
  left: .6em;
  bottom: .45em;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.8;
  stroke-linecap: round;
  transform: rotate(180deg);
}

.uvq04-pat .tx {
  position: absolute;
  right: .8em;
  bottom: .6em;
  margin: 0;
  font-size: .55em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

.uvq04-pat .op {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: .35em;
  margin-top: .6em;
}

.uvq04-pat label {
  position: relative;
  cursor: pointer;
}

.uvq04-pat input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.uvq04-pat label span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  padding: .5em 0 .45em;
  border-radius: .6em;
  color: color-mix(in srgb,var(--fg) 70%,transparent);
  background: color-mix(in srgb,var(--fg) 5%,transparent);
  transition: all calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-pat label svg {
  width: 2em;
  height: .5em;
}

.uvq04-pat label svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.uvq04-pat label b {
  font-size: .9em;
  font-variant-numeric: tabular-nums;
}

.uvq04-pat label:hover span {
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq04-pat label:active span {
  transform: scale(.95);
}

.uvq04-pat input:checked + span {
  color: var(--c1);
  background: color-mix(in srgb,var(--c1) 12%,transparent);
  box-shadow: inset 0 0 0 2px var(--c1);
}

.uvq04-pat input:focus-visible + span {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq04-pat:has(label:nth-of-type(1) input:checked) .g1 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(1) input:checked) .sc {
  animation: uvq04-pat1 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(2) input:checked) .g2 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(2) input:checked) .sc {
  animation: uvq04-pat2 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(3) input:checked) .g3 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(3) input:checked) .sc {
  animation: uvq04-pat3 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(4) input:checked) .g4 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(4) input:checked) .sc {
  animation: uvq04-pat4 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(5) input:checked) .g5 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(5) input:checked) .sc {
  animation: uvq04-pat5 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

@keyframes uvq04-pat1 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat2 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat3 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat4 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat5 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq04-pat,.uvq04-pat *,.uvq04-pat *::before,.uvq04-pat *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
```

### React

```tsx
import type { CSSProperties } from "react";

const css = `
.uvq04-pat {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 18em;
}

.uvq04-pat legend {
  padding: 0;
  margin: 0 0 .8em;
  font-weight: 700;
}

.uvq04-pat .pp {
  position: relative;
  height: 12.5em;
  border-radius: .3em;
  overflow: hidden;
  color: #3b2f22;
  background: radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.45),transparent),linear-gradient(rgba(150,110,60,.09) 1px,transparent 1px) 0 0/1em 1em,linear-gradient(90deg,rgba(150,110,60,.09) 1px,transparent 1px) 0 0/1em 1em,var(--c2);
  box-shadow: 0 1em 2em -1.2em rgba(0,0,0,.5);
}

.uvq04-pat .dr {
  position: absolute;
  inset: .4em .4em 1.2em;
  width: calc(100% - .8em);
  height: calc(100% - 1.6em);
}

.uvq04-pat .g {
  fill: transparent;
  stroke: #5b4a36;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .38;
  transition: stroke calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),stroke-width calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),fill calc(0.4s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-pat .gl,.uvq04-pat .fd {
  fill: none;
  stroke: #5b4a36;
  stroke-width: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}

.uvq04-pat .fd {
  stroke-dasharray: 6 2 1 2;
}

.uvq04-pat .sc {
  position: absolute;
  left: .6em;
  bottom: .45em;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.8;
  stroke-linecap: round;
  transform: rotate(180deg);
}

.uvq04-pat .tx {
  position: absolute;
  right: .8em;
  bottom: .6em;
  margin: 0;
  font-size: .55em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

.uvq04-pat .op {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: .35em;
  margin-top: .6em;
}

.uvq04-pat label {
  position: relative;
  cursor: pointer;
}

.uvq04-pat input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.uvq04-pat label span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  padding: .5em 0 .45em;
  border-radius: .6em;
  color: color-mix(in srgb,var(--fg) 70%,transparent);
  background: color-mix(in srgb,var(--fg) 5%,transparent);
  transition: all calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-pat label svg {
  width: 2em;
  height: .5em;
}

.uvq04-pat label svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.uvq04-pat label b {
  font-size: .9em;
  font-variant-numeric: tabular-nums;
}

.uvq04-pat label:hover span {
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq04-pat label:active span {
  transform: scale(.95);
}

.uvq04-pat input:checked + span {
  color: var(--c1);
  background: color-mix(in srgb,var(--c1) 12%,transparent);
  box-shadow: inset 0 0 0 2px var(--c1);
}

.uvq04-pat input:focus-visible + span {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq04-pat:has(label:nth-of-type(1) input:checked) .g1 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(1) input:checked) .sc {
  animation: uvq04-pat1 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(2) input:checked) .g2 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(2) input:checked) .sc {
  animation: uvq04-pat2 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(3) input:checked) .g3 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(3) input:checked) .sc {
  animation: uvq04-pat3 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(4) input:checked) .g4 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(4) input:checked) .sc {
  animation: uvq04-pat4 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(5) input:checked) .g5 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(5) input:checked) .sc {
  animation: uvq04-pat5 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

@keyframes uvq04-pat1 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat2 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat3 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat4 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat5 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq04-pat,.uvq04-pat *,.uvq04-pat *::before,.uvq04-pat *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

export default function RdSewingPattern() {
  return (
    <>
      <style>{css}</style>
      <div
        style={{
          "--c1": "#d0342c",
          "--c2": "#f1e6cc",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <fieldset className="uvq04-pat"><legend>Pattern size</legend><div className="pp" aria-hidden="true"><svg className="dr" viewBox="14 2 86 92"><path className="g g1" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.82) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="none" /><path className="g g2" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.88) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="5 3" /><path className="g g3" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.94) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="1 2.6" /><path className="g g4" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(1) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="7 2 1.5 2" /><path className="g g5" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(1.06) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="10 3" /><path className="gl" d="M54 36V72M51 40L54 36L57 40M51 68L54 72L57 68" /><path className="fd" d="M25 28V86" /></svg><svg className="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 className="tx">Front · cut 1 on fold</p></div><div className="op"><label><input type="radio" name="uvq04-pat" /><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" strokeDasharray="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" strokeDasharray="5 3" /></svg><b>38</b></span></label><label><input type="radio" name="uvq04-pat" checked={true} /><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" strokeDasharray="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" strokeDasharray="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" strokeDasharray="10 3" /></svg><b>44</b></span></label></div></fieldset>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Multi-size sewing pattern picker” block (Radio buttons) from AIMRAN Library to my project.

## What it is
A paper sewing pattern with nested graded sizes: the chosen one is traced in red and the others fade back.

## Chosen settings
- Main color: #d0342c
- Secondary color: #f1e6cc
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)
- Text: "Talla del patrón"

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import type { CSSProperties } from "react";

const css = `
.uvq04-pat {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 18em;
}

.uvq04-pat legend {
  padding: 0;
  margin: 0 0 .8em;
  font-weight: 700;
}

.uvq04-pat .pp {
  position: relative;
  height: 12.5em;
  border-radius: .3em;
  overflow: hidden;
  color: #3b2f22;
  background: radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.45),transparent),linear-gradient(rgba(150,110,60,.09) 1px,transparent 1px) 0 0/1em 1em,linear-gradient(90deg,rgba(150,110,60,.09) 1px,transparent 1px) 0 0/1em 1em,var(--c2);
  box-shadow: 0 1em 2em -1.2em rgba(0,0,0,.5);
}

.uvq04-pat .dr {
  position: absolute;
  inset: .4em .4em 1.2em;
  width: calc(100% - .8em);
  height: calc(100% - 1.6em);
}

.uvq04-pat .g {
  fill: transparent;
  stroke: #5b4a36;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .38;
  transition: stroke calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),stroke-width calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),fill calc(0.4s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-pat .gl,.uvq04-pat .fd {
  fill: none;
  stroke: #5b4a36;
  stroke-width: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}

.uvq04-pat .fd {
  stroke-dasharray: 6 2 1 2;
}

.uvq04-pat .sc {
  position: absolute;
  left: .6em;
  bottom: .45em;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.8;
  stroke-linecap: round;
  transform: rotate(180deg);
}

.uvq04-pat .tx {
  position: absolute;
  right: .8em;
  bottom: .6em;
  margin: 0;
  font-size: .55em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

.uvq04-pat .op {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: .35em;
  margin-top: .6em;
}

.uvq04-pat label {
  position: relative;
  cursor: pointer;
}

.uvq04-pat input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.uvq04-pat label span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  padding: .5em 0 .45em;
  border-radius: .6em;
  color: color-mix(in srgb,var(--fg) 70%,transparent);
  background: color-mix(in srgb,var(--fg) 5%,transparent);
  transition: all calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-pat label svg {
  width: 2em;
  height: .5em;
}

.uvq04-pat label svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.uvq04-pat label b {
  font-size: .9em;
  font-variant-numeric: tabular-nums;
}

.uvq04-pat label:hover span {
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq04-pat label:active span {
  transform: scale(.95);
}

.uvq04-pat input:checked + span {
  color: var(--c1);
  background: color-mix(in srgb,var(--c1) 12%,transparent);
  box-shadow: inset 0 0 0 2px var(--c1);
}

.uvq04-pat input:focus-visible + span {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq04-pat:has(label:nth-of-type(1) input:checked) .g1 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(1) input:checked) .sc {
  animation: uvq04-pat1 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(2) input:checked) .g2 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(2) input:checked) .sc {
  animation: uvq04-pat2 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(3) input:checked) .g3 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(3) input:checked) .sc {
  animation: uvq04-pat3 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(4) input:checked) .g4 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(4) input:checked) .sc {
  animation: uvq04-pat4 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-pat:has(label:nth-of-type(5) input:checked) .g5 {
  stroke: var(--c1);
  stroke-width: 2.4;
  opacity: 1;
  fill: color-mix(in srgb,var(--c1) 9%,transparent);
}

.uvq04-pat:has(label:nth-of-type(5) input:checked) .sc {
  animation: uvq04-pat5 calc(0.5s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

@keyframes uvq04-pat1 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat2 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat3 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat4 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@keyframes uvq04-pat5 {
  40% {
    transform: rotate(180deg) scale(1.25);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq04-pat,.uvq04-pat *,.uvq04-pat *::before,.uvq04-pat *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

export default function RdSewingPattern() {
  return (
    <>
      <style>{css}</style>
      <div
        style={{
          "--c1": "#d0342c",
          "--c2": "#f1e6cc",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <fieldset className="uvq04-pat"><legend>Pattern size</legend><div className="pp" aria-hidden="true"><svg className="dr" viewBox="14 2 86 92"><path className="g g1" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.82) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="none" /><path className="g g2" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.88) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="5 3" /><path className="g g3" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(0.94) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="1 2.6" /><path className="g g4" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(1) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="7 2 1.5 2" /><path className="g g5" d="M30 24Q42 22 46 10L70 16Q66 38 82 44L79 88L30 90Z" transform="translate(30 90) scale(1.06) translate(-30 -90)" vectorEffect="non-scaling-stroke" strokeDasharray="10 3" /><path className="gl" d="M54 36V72M51 40L54 36L57 40M51 68L54 72L57 68" /><path className="fd" d="M25 28V86" /></svg><svg className="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 className="tx">Front · cut 1 on fold</p></div><div className="op"><label><input type="radio" name="uvq04-pat" /><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" strokeDasharray="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" strokeDasharray="5 3" /></svg><b>38</b></span></label><label><input type="radio" name="uvq04-pat" checked={true} /><span><svg viewBox="0 0 24 6" aria-hidden="true"><path d="M1.5 3H22.5" strokeDasharray="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" strokeDasharray="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" strokeDasharray="10 3" /></svg><b>44</b></span></label></div></fieldset>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````