SVG

Code

<!-- Basic shapes -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- Rectangle -->
    <rect x="10" y="10" width="80" height="50"
          fill="#3498db" stroke="#2c3e50" stroke-width="2" rx="8"/>

    <!-- Circle -->
    <circle cx="150" cy="50" r="30" fill="#2ecc71"/>

    <!-- Ellipse -->
    <ellipse cx="50" cy="120" rx="40" ry="20" fill="#e74c3c"/>

    <!-- Line -->
    <line x1="10" y1="160" x2="100" y2="180"
          stroke="#333" stroke-width="2"/>

    <!-- Polygon -->
    <polygon points="150,100 180,150 120,150" fill="#f39c12"/>

    <!-- Path -->
    <path d="M 10 180 Q 50 140 100 180" fill="none"
          stroke="#9b59b6" stroke-width="3"/>

    <!-- Text -->
    <text x="100" y="195" text-anchor="middle"
          font-size="14" fill="#333">SVG Text</text>
</svg>

<!-- Icon -->
<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
          stroke="currentColor" fill="none" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round"/>
</svg>

<!-- SVG animation -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="#3498db">
        <animate attributeName="r" values="40;20;40" dur="2s" repeatCount="indefinite"/>
    </circle>
</svg>

Explanation

SVG is a vector graphics format; rect/circle/path elements draw shapes, supporting animation and interaction.

More HTML Snippets