You may have noticed that I have a bit of a shark theme goin’ on across the site. It’s not overwhelmingly shark-ey, but there’s certainly a shark or two sprinkled abpout - and I think that’s just fun. To this end, I had another fun li’l idea. What if I could change the usual boring ‘ol <hr> tag (horizontal rule) and have a shark dorsal fin coming out of it? Sounds cool right? Right.

I had this idea months or even years ago, I filed it away for another day, thinking it too hard for me to accomplish myself. It would have to be something that I’d need to learn a lot of arcane HTML/CSS to do or maybe I’d just need to hire someone to make it for me. Yesterday, for whatever reason, I decided to try and take it on. I’m going to walk through a bit of my trial and error, and then get into how I finally pulled it off.

Trial and Error

Let me tell you, getting this to work probably took me 4-5 hours of just sittin’ in my chair, hammering away. Though I can safely say I mostly figured out everything to get it to work, I also can say I figured out lots of ways it doesn’t work.

The way I thought this would work originally, and thus the way I approached it at first, was to use HTML’s Canvas Graphics to draw a shark fin and a line, and just use that instead of the normal <hr> tags. Of course I know nothing about drawing with <canvas>, and I absolutely wasn’t going to try and learn it well enough to do it myself, so naturally I googled for an answer. It wasn’t long into this search that I realized maybe drawing with straight CSS would be a better option. So, I searched for that instead. Google came up pretty dry once again, but there was one potential splash of luck.¹ Alvaro had managed to draw a (adorably cute) shark entirely with HTML and CSS. Cool! But could I use it somehow? I cmd+C & cmd+V’ed the code and tried ripping out stuff to get to just the fin. I figured if I could isolate the fin, I could tweak it a bit to be what I wanted. I was wrong. I gave up on that after like 10 min.

So now what? I got a bit desperate, from there I tried…

Searching for web tools that would convert drawings to CSS code
Searching for vector libraries
I even used ChatGPT to try and make it (here’s what it came up with - sorry I can’t get the viewBox to behave)

Fresh off of humiliating myself by thinking AI could be useful, I came across some actually useful info. Basically, I learned that I could customize <hr> tags with a character, or image using the ::after pseudo-element.² Neat!. This seemed like a more elegant solution. I could still use <hr> tags, just with a class specifier rather than importing some janky inline-svg + html + css abomination each time I wanted the effect. So, like any seasoned developer, I borrowed the code from the stack overflow page and started tweaking from there. But then I ran into my next issue, I needed an image to import! And not just any image, I needed something I could move along the <hr> continuum, something I could size up and down, and something I could change the color of. First place I went to was .svg.

I spent some time googling around for shark fin .svgs and came across a number of things that would work for me.

The xml syntax within an SVG file is kinda strange, and it took me a while to grok, but eventually I figured out how to change the fill color, resize it to my liking and generate a mirror image so that the shark fin can point both left and right.

So, let me give you the final result…

Shark Fin <hr>

Here’s how I finally put together my current v1.0 Shark Fin <hr>

Within the SVG, you can resize by changing the ‘width’ property in the <svg> tag. You can change the fill color with the ‘fill’ property in the <path> tag. Finally, for mirroring the image across the Y-axis, you can add transform="scale (-1, 1)" transform-origin="center" to the <path> tag as well (as shown below). I also had to toy around with the viewBox to take out unneccessary white-space/padding.

<svg ... width="35px" viewBox="0 0 1000 1000" ...>
  <path fill="#CA3342" transform="scale (-1, 1)" transform-origin="center" ... />
</svg>

My CSS for the ‘fin’ class…

:root {
  --hrfin-position: 40%;
  --hrfin-content: url( '/assets/img/shark-fin-notch.svg' );
}
hr.fin {
  margin-top: 40px; /* compensating for height of the fin */
  margin-bottom: 40px; /* making the bottom margin the same as the top */
  border-top: 1px solid var(--accent-color); /% the color that I want the hr tag to be */
  border-bottom: 1px solid var(--accent-color);
}
hr.fin:after {
  content: var(--hrfin-content); /* Loading the SVG url from :root */
  left: var(--hrfin-position); /* Setting the position of the fin along the rule */
  position: relative;
  bottom:29px; /* Moves the fin closer to the line - it's 6px less than the svg width */
}

So why am I setting the ‘left’ position and loading the svg from :root instead of directly? Well that’s because I wanted to randomize the fin’s position along the rule on page load. So I have some JavaScript that does this.

const root = document.querySelector(":root"); //grabbing the root element
var rand = Math.floor(Math.random() * 90) + 1;
const fins = ["url( '/assets/img/shark-fin-notch.svg' )","url( '/assets/img/shark-fin-notch-reverse.svg' )"]
var fins_rand = Math.round(Math.random());
console.log(fins[fins_rand]);
root.style.setProperty("--hrfin-position", rand + "%");
root.style.setProperty("--hrfin-content", fins[fins_rand]);

So what do I get in the end? This!

Try reloading the page a few times and see it change positions and directionality. Niiiiice!

What’s cool too is that even if I shorten the width of the rule, the shark will stay along it.

Future Improvements

But things aren’t exactly how I’d like to see them. There are some improvements to be made in future iterations. A wish list of things I’d like to see it do in the future…

Given the way I am loading the SVG, I can’t dynamically change the color of the fin, it is statically set in the SVG itself. I’m fine with the compromise for now but would like to address this later.
The fin position (X-axis), set by the CSS ‘left’ directive is the same for all fin-class hrs on the page. Notice how all of them on this page are at the same point on the line. It’d be cool to randomize the position for each instance of the rule on a single page.
I’m pretty happy with the shark fin SVG I’ve landed on (Thanks Creative Fabrica!), but could see myself getting something a bit more customized in the future.
If I wanted to get crazy, maybe I’d have the fins animate in some way, like an actual shark swimmin’ around the rules.
Another compromise was having to use JavaScript to randomize the svg file and position. Modern/supported versions of CSS don’t have any way to produce a random value. There are some hacky ways to achieve this, but I couldn’t figure them out. It’d be cool to have this not be .js-dependent in the future.

shellsharks