I tried something a bit different today and outside of my comfort zone and experimented with animating SVGs. The idea I had was to animate a faux underline border on a link when a user hovers over it. I have seen this a few times on my travels on the web and here I try to create my own version.
Here is a demo of what I have come up with.
Designing our SVG border
The first step is to create an SVG border. I will be using Adobe Illustrator but you can use any vector software you would like.
The idea is to create a seamless pattern that is animated along an x-axis with CSS in the SVG file. You can use your imagination here but try to keep things simple as this border will be scaled down quite a bit for text links.
Cleaning up and exporting the SVG file
Once you’re happy with the design, clean up the paths by removing unneeded points and join them all together. In Illustrator you would select all of the paths and go into File > Object > Path > Join. Now we’re ready to export our SVG file – I will be saving the design as an SVG file but you can save yours as code if you prefer (You will obviously need to alter your code to accommodate this option though).
Below is the generated SVG code that Illustrator gives me.
- SVG
<svg version="1.1" id="Squiggle-svg" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 38 11"
enable-background="new 0 0 38 11" xml:space="preserve">
<polyline fill="none" stroke="#DE466C" stroke-width="2" stroke-miterlimit="10" points="0,1 5,1 5,10 14,10 14,1 19,1 24,1 24,10
33,10 33,1 38,1 "/>
</svg>I have removed the XML declaration and the comment from the top of the SVG file as these are not needed.
- SVG
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->Adding CSS to the mix
Now, with our awesome SVG file saved, we need to add some CSS to the :hover selector when the user hovers over a link.
- style.css
a:hover {
text-decoration: none;
background-image: url("wave-square.svg");
background-position-y: 19px;
background-size: auto 5px;
background-repeat: repeat-x;
padding-bottom: 6px;
}Explanation of CSS properties
- text-decoration: none; We are removing the underline.
- background-image: url(“wave-square.svg”); Adding our SVG file as a background image to all links
- background-position-y: 19px; Position the SVG file to the bottom of all links.
- background-size: auto 5px; Making the background image scaled properly.
- background-repeat: repeat-x; Repeat the image, horizontally.
- padding-bottom: 6px; Allow the border design to be seen by adding some padding to the bottom of links.
Adding the animation into the SVG file
With the border looking good, albeit static, we are now at a point to begin animating it. Open up the SVG file and embed a style block in, and add a wave-square class to the polygon path.
In our style block we want to create a class called wave-square, give it an animation name called feh_wave, a duration of 400 milliseconds, a linear easing function and we are going to run this animation forever with the infinite iteration count option.
Next up to is create our feh_wave keyframes sequence. I am simply creating a short two keyframe animation that will move our border right to left here.
- SVG
<svg version="1.1" id="Squiggle-svg" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 19.6 11" xml:space="preserve">
<style type="text/css">
.wave-square { feh_wave .4s linear infinite; }
@keyframes feh_wave {
from {
transform:translateX(0);
}
to {
transform:translateX(-20px);
}
}
</style>
<polyline class="wave-square" fill="none" stroke="#de466c" stroke-width="2" stroke-miterlimit="10" points="0,1 5,1 5,10 14,10 14,1 19,1 24,1 24,10
33,10 33,1 38,1 "/>
</svg>If we preview our result, you should see it animating but it looking a bit… odd.
Tweaking the viewbox width
Last step to make this animation looking the way it is intended is to edit the viewBox=”0 0 37 11″ 37px width. To be honest, this bit required some tinkering about and general “eye balling it” to make it correct. My only guess is that the design of the SVG design in Illustrator is 37px x 11px and roughly halving 37px to 19.6px seems to make everything look ok.
