Estampado
HTML + CSSRadiobuttons

Druckmuster für das T-Shirt

Ein T-Shirt, das sofort sein Muster wechselt: Bretonische Streifen, Punkte, Vichy-Karo oder Schottenkaro.

Einstellungen

16px
1x

Code

<fieldset class="uvq04-tee"><legend>Muster</legend><div class="pv" aria-hidden="true"><svg viewBox="0 0 100 92"><defs><pattern id="uvq04-tee-st" width="8" height="8" patternUnits="userSpaceOnUse"><rect class="w" width="8" height="8"/><rect class="a" width="8" height="3.4"/></pattern><pattern id="uvq04-tee-dt" width="10" height="10" patternUnits="userSpaceOnUse"><rect class="r" width="10" height="10"/><circle class="w" cx="2.5" cy="2.5" r="1.7"/><circle class="w" cx="7.5" cy="7.5" r="1.7"/></pattern><pattern id="uvq04-tee-gn" width="10" height="10" patternUnits="userSpaceOnUse"><rect class="w" width="10" height="10"/><rect class="r h" width="10" height="5"/><rect class="r h" width="5" height="10"/></pattern><pattern id="uvq04-tee-tt" width="16" height="16" patternUnits="userSpaceOnUse"><rect class="r" width="16" height="16"/><rect class="a h" y="4" width="16" height="7"/><rect class="a h" x="4" width="7" height="16"/><rect class="y" y="13" width="16" height="1"/><rect class="y" x="13" width="1" height="16"/></pattern></defs><path class="sh" d="M34 6C39 12 61 12 66 6L88 15L97 36L81 42L79 87H21L19 42L3 36L12 15Z"/><path class="ln" d="M34 6C39 14 61 14 66 6M19 42L21 17M81 42L79 17"/></svg></div><div class="op"><label><input type="radio" name="uvq04-tee" checked><span class="sw st" aria-hidden="true"></span><span class="nm">Streifen</span></label><label><input type="radio" name="uvq04-tee"><span class="sw dt" aria-hidden="true"></span><span class="nm">Punkte</span></label><label><input type="radio" name="uvq04-tee"><span class="sw gn" aria-hidden="true"></span><span class="nm">Vichy</span></label><label><input type="radio" name="uvq04-tee"><span class="sw tt" aria-hidden="true"></span><span class="nm">Schotten</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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Radiobuttons

Alle ansehen: Radiobuttons

Wofür du ihn nutzen kannst

Diese Radiogruppe zieht einem SVG-T-Shirt das gewählte Muster an. Vier runde Stoffmuster, Bretonische Streifen, Punkte, Vichy-Karo und Schottenkaro, liegen unter dem Shirt, und jedes tauscht dessen Füllung gegen ein passendes SVG-Pattern, begleitet von einer kleinen federnden Drehung. Passend für Modeshops, Print-on-Demand, Teamkleidung und Lookbooks.

Die Hauptfarbe bestimmt Streifen und Schottenbänder, die Zweitfarbe Punkte und Karos. Für ein weiteres Muster legst du ein SVG-Pattern mit präfixierter ID an und baust das passende Stoffmuster aus CSS-Verläufen.