Drawing with Code (SVG & The Art of Geometry)

stepped away from standard text and buttons and entered the world of SVG (Scalable Vector Graphics). If you’ve ever wondered how websites have those crisp icons or logos that don’t get pixelated when you zoom in — this is the secret sauce.

Instead of downloading an image, I coded the images myself using XML. It’s basically digital geometry.

1. What is SVG anyway?

SVG isn’t a bunch of pixels; it’s a set of instructions. It tells the browser: “Put a circle here, fill it with green, and make the radius 50.” Because it’s math-based, it stays sharp on a 4K monitor or a tiny smartphone.

2. The Shape Toolkit: Building the “W” Logo

I spent the day manipulating shapes to see how they interact. Here’s the breakdown of the tags I used to build my custom “W” logo and other random art:

• **<rect>**: Used for the background and blocky sections. You define the x and y coordinates and then the width and height.
• **<circle> & <ellipse>**: The cx and cy define the center point. It’s like using a digital compass.
• **<line>**: Simple but powerful. I used these for the main strokes of my "W" logo, defining the start point (x1, y1) and the end point (x2, y2).
• **<polygon>**: This is where it gets interesting. By giving a list of points, you can create triangles, stars, or any jagged shape you want. This was the key to making the logo look sharp.
• **<text>**: Yes, you can even put text inside an SVG to keep it perfectly aligned with your shapes.

3. The Code in Action

Check out how I combined a rectangle and a circle to start building complex icons:

<svg width="200" height="200">
    <!-- A lightblue background -->
    <rect x="10" y="10" width="180" height="180" fill="lightblue" />
    <!-- An orange sun in the middle -->
    <circle cx="100" cy="100" r="50" fill="orange" />
    <!-- A red diagonal strike through -->
    <line x1="10" y1="10" x2="190" y2="190" stroke="red" stroke-width="5" />
</svg>

4. Why this matters for Full-Stack

As I move towards Java Spring Boot, I’ll eventually be building dashboards. Knowing SVG means I won’t just be showing boring tables; I can eventually use libraries like D3.js to turn backend data into living, breathing charts and graphs that I coded from scratch.

Progress

• TSVG manipulation & Coordinate systems.
• New Skill: Thinking in X and Y coordinates.
• GitHub Status: Pushed a bunch of custom logos.

I’m officially done with the “Basic HTML” phase. I’ve got the structure, the media, the SEO, and now the custom graphics. It’s time to stop looking at this black-and-white text and start making it look “clean.”

GitHub: github.com/oemsayandh

LinkedIn: linkedin.com/in/sayandh-sunil-b099bb275