So, I was messing around with SVGs again today, specifically trying to make a Pisces symbol. You know, the two fish swimming in opposite directions? I figured it would be pretty simple, but it turned out to be a little more involved than I initially thought.
First, I started by looking for some references. I just Googled “Pisces SVG” and browsed through the images to get an idea of the different styles and shapes people use.
Then I fired up my trusty text editor. I usually just use a plain text editor for this kind of thing, nothing fancy.
I knew I needed the basic SVG structure, so I typed that out:
<svg width="200" height="200">
<!-- Fish will go here -->
</svg>
Okay, so that’s the blank canvas. Now for the fun part – the fish!
I decided to go with simple curves for the fish bodies. I remembered that you can create curves in SVG using the path element and the d attribute. The d attribute takes a bunch of commands that tell the “pen” where to move and draw.
I started with one fish. It’s mostly trial and error, to be honest. I kept tweaking the numbers until I got something that looked vaguely fish-like. This is roughly what I ended up with for the first fish:
M50,80: This moves the “pen” to the starting point (x=50, y=80).
C70,50 130,50 150,80: This draws a cubic Bézier curve. It’s a bit confusing, but basically, the first two pairs of numbers (70,50 and 130,50) are “control points” that determine the shape of the curve, and the last pair (150,80) is the ending point.
C130,110 70,110 50,80: another cubic Bezier curve to draw other side of fish.
Z: This closes the path, connecting the end point back to the starting point.
fill="lightblue": Makes the fish light blue. Easy peasy.
Then I basically copied that path, flipped it horizontally (by changing the x-coordinates), and moved it down a bit to create the second fish. It took some more fiddling to get them positioned just right.
After some more minor adjustments, I was pretty happy with the result! It’s not perfect, but it definitely looks like a Pisces symbol. It’s always fun to see how you can create something visual with just a few lines of code.
I played around with different colors and stroke widths, too. You can really customize SVGs to your liking. I might even try animating it later, making the fish “swim” around. That would be a cool next step!
This little project reminded me how powerful and versatile SVGs can be. It’s pretty neat that you can create complex shapes and graphics with just a text editor and some basic knowledge of SVG syntax. I’m definitely going to keep experimenting with this!
