<!DOCTYPE html>
<html><head><style>
body { font-family: Arial; padding: 20px; }
svg { border: 1px solid #ccc; margin: 10px; background: #fafafa; }
h3 { margin-bottom: 4px; }
</style></head><body>
<h3>Line</h3>
<svg viewBox="0 0 100 40" style="width:120px; height:auto;">
<path d="M 10 20 L 90 20 M 82 14 L 90 20 L 82 26 M 28 14 L 20 20 L 28 26" fill="none" stroke="#333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<h3>Ray</h3>
<svg viewBox="0 0 100 40" style="width:120px; height:auto;">
<circle cx="15" cy="20" r="3.5" fill="#333"/>
<path d="M 19 20 L 85 20 M 77 14 L 85 20 L 77 26" fill="none" stroke="#333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<h3>Segment</h3>
<svg viewBox="0 0 100 40" style="width:120px; height:auto;">
<circle cx="15" cy="20" r="3.5" fill="#333"/>
<line x1="19" y1="20" x2="81" y2="20" stroke="#333" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="85" cy="20" r="3.5" fill="#333"/>
</svg>
<h3>Right Angle</h3>
<svg viewBox="0 0 100 80" style="width:120px; height:auto;">
<path d="M 20 70 L 20 20 L 70 20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="20" y="40" width="30" height="30" fill="none" stroke="#e91e63" stroke-width="2.5"/>
</svg>
<h3>Acute Angle</h3>
<svg viewBox="0 0 100 80" style="width:120px; height:auto;">
<path d="M 20 70 L 20 20 L 75 45" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M 20 45 A 25 25 0 0 1 37 28" fill="none" stroke="#e91e63" stroke-width="2.5" stroke-linecap="round"/>
</svg>
<h3>Obtuse Angle</h3>
<svg viewBox="0 0 100 80" style="width:120px; height:auto;">
<path d="M 20 70 L 20 20 L 85 35" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M 20 45 A 30 30 0 0 1 43 25" fill="none" stroke="#e91e63" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</body></html>