Andrew Wang-Hoyer’s work of just SVG and CSS

This amazing collection of SVG animations really piqued my interest the other day. Andrew has over 200 of these on his site with the code on his Github page. This work is so cool, I decided to take a crack at it:

(Sorry, but the only way I could figure out how to get this HTML to appear in the blog page without messing up the rest of the page is through the dreaded iframe tag.)

In any event, I certainly pose no threat to Andrew, but SVG is hard! Here’s the code I came up with for this gem:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href='https://fonts.googleapis.com/css?family=Dekko' rel='stylesheet'>
    </head>
    <svg
    preserveAspectRatio="xMidYMid meet"
    version="1.1"
    viewBox="0 0 50 10"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="water-color" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:white;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#add8e6;stop-opacity:1" />
            </linearGradient>
        </defs>
        <style>
            /* <![CDATA[ */
                .logo-frame {
                    border-bottom: solid black .2;
                    fill: url(#water-color);
                }
                .logo {
                    font: italic 6px 'Dekko';
                    fill: white;
                    stroke: black;
                    stroke-width: 0.2;
                    font-stretch: semi-condensed;
                }
                @keyframes water-line {
                    0%  {transform: translateX(0px)}
                    25% {transform: translateX(0.5px)}
                    50% {transform: translateX(-0.5px)}
                    100%{transform: translateX(0px)}
                }
                .water-line {
                    stroke: #add8e6;
                    fill: transparent;
                    stroke-width: 0.1;
                    animation: water-line 10s linear infinite;
                }
            /* ]]> */
        </style>
        <rect
            class="logo-frame"
            x="1.0"
            y="3.0"
            height="6"
            width="46"
        />
        <text x="1.5" y="8" class="logo">DadOverflow.com</text>
        <path d="M 1 2 C 1 3, 5 3, 5 2 C 5 3, 9 3, 9 2 C 9 3, 13 3, 13 2 C 13 3, 17 3, 17 2 C 17 3, 21 3, 21 2 C 21 3, 25 3, 25 2 C 25 3, 29 3, 29 2 C 29 3 33 3, 33 2 C 33 3, 37 3, 37 2 C 37 3, 41 3, 41 2 C 41 3, 45 3, 45 2" class="water-line"/>
    </svg>
</html>

Figuring out that water line “path” was especially hard, but once I figured out the first wave or two, the rest weren’t too difficult. I get the impression that a lot of SVG developers use tools like Adobe Illustrator to solve those problems in easier ways. Here’s another cool post I found animating SVG with CSS. Take a look at both posts and get animating on SVG today!