🎨 Canvas & SVG

<!-- Canvas element -->
<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // Draw rectangle
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 150, 100);
    
    // Draw circle
    ctx.beginPath();
    ctx.arc(200, 150, 50, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    
    // Draw line
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(400, 300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 3;
    ctx.stroke();
    
    // Draw text
    ctx.font = '30px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('Hello Canvas!', 100, 200);
</script>

<canvas id="shapes" width="500" height="400"></canvas>

<script>
    const canvas = document.getElementById('shapes');
    const ctx = canvas.getContext('2d');
    
    // Rectangle
    ctx.fillRect(10, 10, 100, 50);
    ctx.strokeRect(120, 10, 100, 50);
    
    // Triangle
    ctx.beginPath();
    ctx.moveTo(250, 10);
    ctx.lineTo(300, 60);
    ctx.lineTo(200, 60);
    ctx.closePath();
    ctx.fill();
    
    // Circle
    ctx.beginPath();
    ctx.arc(100, 150, 40, 0, 2 * Math.PI);
    ctx.stroke();
    
    // Gradient
    const gradient = ctx.createLinearGradient(0, 200, 200, 300);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'blue');
    ctx.fillStyle = gradient;
    ctx.fillRect(10, 200, 200, 100);
</script>

<!-- Inline SVG -->
<svg width="400" height="300">
    <!-- Rectangle -->
    <rect x="10" y="10" width="100" height="50" fill="blue" />
    
    <!-- Circle -->
    <circle cx="200" cy="100" r="50" fill="red" />
    
    <!-- Line -->
    <line x1="0" y1="0" x2="400" y2="300" 
          stroke="green" stroke-width="3" />
    
    <!-- Polygon (Triangle) -->
    <polygon points="250,10 300,60 200,60" fill="yellow" />
    
    <!-- Text -->
    <text x="100" y="200" font-size="30" fill="black">
        Hello SVG!
    </text>
</svg>

<svg width="400" height="400">
    <!-- Gradient -->
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0)" />
            <stop offset="100%" style="stop-color:rgb(255,0,0)" />
        </linearGradient>
    </defs>
    
    <rect x="10" y="10" width="200" height="100" fill="url(#grad1)" />
    
    <!-- Path (complex shape) -->
    <path d="M 50 250 L 100 200 L 150 250 Z" 
          fill="none" stroke="blue" stroke-width="2" />
    
    <!-- Group with transform -->
    <g transform="translate(250, 250)">
        <circle r="30" fill="purple" />
        <text y="5" text-anchor="middle" fill="white">SVG</text>
    </g>
    
    <!-- Animation -->
    <circle cx="350" cy="100" r="20" fill="green">
        <animate attributeName="cy" from="100" to="300" 
                 dur="2s" repeatCount="indefinite" />
    </circle>
</svg>