Bemaßung im Bauplan
Eine blaue technische Zeichnung einer Lampe: Jeder Punkt zieht eine Bezugslinie zu einer Karte mit Material und Maßen.
Einstellungen
Code
<div class="uvq08-bpr"><svg class="dw" viewBox="0 0 180 130" aria-hidden="true"><rect x="30" y="110" width="52" height="8" rx="2"/><path d="M56 110L80 62"/><path class="sp" d="M62 106l5-3-1-5 5-3-1-5 5-3-1-5 5-3-1-5 5-3"/><circle cx="80" cy="62" r="4.5"/><path d="M80 62L124 36"/><circle cx="124" cy="36" r="3"/><path d="M121 31l14-9 22 25-12 10z"/><path class="lt" d="M147 58l6 9M139 61l2 10M153 53l9 4"/><path class="dm" d="M30 124h52M30 121v6M82 121v6"/><text x="56" y="129.5" text-anchor="middle">160</text><path class="ld l0" pathLength="1" d="M140 38L118 14H52"/><path class="ld l1" pathLength="1" d="M80 62L60 30H10"/><path class="ld l2" pathLength="1" d="M56 114L96 97H170"/></svg><button type="button" class="hs h0 pk" style="left:77.8%;top:29.2%" aria-label="Leuchtenkopf" aria-describedby="uvq08-bpr-0"></button><span class="co c0" style="left:28.9%;top:12%" role="tooltip" id="uvq08-bpr-0"><b>Leuchtenkopf</b><span>Aluminium 0,8 mm</span><span class="mm">Ø 140 mm</span></span><button type="button" class="hs h1" style="left:44.4%;top:47.7%" aria-label="Gelenk" aria-describedby="uvq08-bpr-1"></button><span class="co c1" style="left:5.6%;top:24.5%" role="tooltip" id="uvq08-bpr-1"><b>Gelenk</b><span>Feder 12 N</span><span class="mm">Dreht von 0 bis 90°</span></span><button type="button" class="hs h2" style="left:31.1%;top:87.7%" aria-label="Basis" aria-describedby="uvq08-bpr-2"></button><span class="co c2" style="left:54.4%;bottom:26%" role="tooltip" id="uvq08-bpr-2"><b>Basis</b><span>Gusseisen</span><span class="mm">Ø 160 mm · 1,2 kg</span></span><span class="tb" aria-hidden="true"><b>Leuchte L-2</b><span>M 1:5</span></span></div>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 Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Eine Schreibtischlampe aus weißen SVG-Linien auf einem Blaupausenraster, mit Maßlinie und Schriftfeld. Beim Hovern oder Fokussieren eines gestrichelten Punktes zeichnet sich eine gelbe Bezugslinie vom Bauteil zu einer Notiz mit Name, Material und Maß in Monospace-Schrift. Der Effekt nutzt :has() und stroke-dashoffset und braucht außer der Startdemo kein JavaScript.
Die Hauptfarbe ist das Blau des Papiers, die Zweitfarbe das Bleistiftgelb der Linien. Zeichne das Objekt im SVG neu und passe Bezugslinien und Kartenpositionen in Prozent an, etwa für Möbel, Maschinen oder Produktanatomie.