Monstera del salón
Humedad de la tierra22 %
Necesita agua
HTML + CSSKarten
Terrakottatopf zum Gießen
Eine Topfpflanze in Terrakotta: Beim Gießen fallen Tropfen, die Bodenfeuchte steigt und die hängenden Blätter richten sich auf.
Einstellungen
16px
1x
Code
<article class="uvq07-plt"><div class="stg"><svg viewBox="0 0 120 130" aria-hidden="true"><defs><linearGradient id="uvq07-plt-g" x1="0" x2="1"><stop class="g1" offset="0"/><stop class="g2" offset=".45"/><stop class="g1" offset="1"/></linearGradient></defs><g class="lv"><g transform="translate(60 84) scale(0.8)"><g class="lf" style="--r:-52deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(1)"><g class="lf" style="--r:-24deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(1.14)"><g class="lf" style="--r:2deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(0.96)"><g class="lf" style="--r:27deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(0.78)"><g class="lf" style="--r:50deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g></g><path class="pb" d="M34 92h52l-6 32H40z"/><rect class="rm" x="29" y="83" width="62" height="11" rx="2.5"/><ellipse class="so" cx="60" cy="84" rx="27" ry="2.4"/></svg><span class="dp" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span><span class="can" aria-hidden="true"><svg viewBox="0 0 32 24"><path d="M14 8h12v13H14z" fill="currentColor"/><path d="M14 11L4 5M2 3.5l4.5-.8.6 4.4zM26 10c4.5 0 4.5 8 0 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></div><h3>Monstera im Wohnzimmer</h3><p class="mt"><span>Bodenfeuchte</span><b>22 %</b><i></i></p><p class="st" aria-live="polite" data-a="Braucht Wasser" data-b="Gut gegossen">Braucht Wasser</p><div class="bs"><button type="button" class="wa">Gießen</button><button type="button" class="wk">Eine Woche vorspulen</button></div></article>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 Karten
Alle ansehen: KartenWofür du ihn nutzen kannst
Eine kleine Geschichte aus SVG und CSS: Die Blätter hängen zuerst gelblich herab, die Gießkanne kippt, Tropfen fallen in die Erde, der Feuchtebalken steigt und die Blätter federn zurück. Ein zweiter Button spult eine Woche vor und lässt sie wieder welken. Passt zu Pflanzenpflege-Apps, Gärtnereien, Habit-Trackern und Sensor-Dashboards.
Die Hauptfarbe ist der Tontopf und der Warnhinweis, die zweite das Grün gesunder Blätter. Benenne die Pflanze um, passe die Feuchtewerte im Skript an oder nutze das Welken für jeden Zustand, der Pflege braucht.