Cotes de plan technique
Un plan bleu d’une lampe : chaque point trace une ligne de rappel jusqu’à une fiche avec matériau et dimensions.
Réglages
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="Tête" aria-describedby="uvq08-bpr-0"></button><span class="co c0" style="left:28.9%;top:12%" role="tooltip" id="uvq08-bpr-0"><b>Tête</b><span>Aluminium de 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="Articulation" aria-describedby="uvq08-bpr-1"></button><span class="co c1" style="left:5.6%;top:24.5%" role="tooltip" id="uvq08-bpr-1"><b>Articulation</b><span>Ressort de 12 N</span><span class="mm">Rotation de 0 à 90°</span></span><button type="button" class="hs h2" style="left:31.1%;top:87.7%" aria-label="Base" aria-describedby="uvq08-bpr-2"></button><span class="co c2" style="left:54.4%;bottom:26%" role="tooltip" id="uvq08-bpr-2"><b>Base</b><span>Fonte</span><span class="mm">Ø 160 mm · 1,2 kg</span></span><span class="tb" aria-hidden="true"><b>Lampe L-2</b><span>ÉCH. 1:5</span></span></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Une lampe de bureau dessinée en traits SVG blancs sur la grille d’un plan, avec une cote et un cartouche. Au survol ou au focus d’un point en pointillés, une ligne de rappel jaune se trace depuis la pièce jusqu’à une fiche qui donne son nom, son matériau et sa mesure en police à chasse fixe. L’effet repose sur :has() et stroke-dashoffset, sans JavaScript hormis la démo d’ouverture.
La couleur principale est le bleu du papier, la secondaire le jaune crayon des lignes. Redessine l’objet dans le SVG, puis ajuste les tracés et la position des fiches en pourcentages pour du mobilier, des machines ou l’anatomie d’un produit.