Schnittmuster mit Größenwahl
Ein Papierschnitt mit ineinander gradierten Größen: Die gewählte wird rot nachgezogen, die anderen treten zurück.
Einstellungen
Code
<fieldset class="uvq04-pat"><legend>Schnittgröße</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">Vorderteil · 1× im Bruch</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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Wie ein echter Mehrgrößenschnitt liegen fünf Vorderteil-Konturen ineinander auf kariertem Seidenpapier, jede Größe mit eigener Linienart: durchgezogen, gestrichelt, gepunktet oder strichpunktiert. Wählst du eine Größe, wird ihre Kontur rot mit leichter Füllung nachgezogen, die anderen verblassen, und die Schere schnippt. Gut für Schnittmustershops, Modekurse und Größentabellen.
Die Hauptfarbe markiert die gewählte Größe, die Zweitfarbe das Papier. Alle fünf Konturen teilen einen SVG-Pfad, der vom Stoffbruch aus skaliert wird, du kannst ihn also gegen einen Ärmel oder Rock tauschen.