171002.md

Hnefatafl intro animation

1. Result
2. Process
3. Next candidate to improve

Result

https://twitter.com/drzhbe/status/914607574103855105 old animation

I wasn't satisfied with the old animation. Besides ugly pieces its motion was clumsy. But the worst was the text "Play". I wanted it to be something runic-like. So I draw some lines in Figma and they turned out to be okay.

Now I have svg of the letters. I could animate it with dash-offset from left to right, letter by letter, I saw this kind of animation.

<svg>
<g id="play-svg-blur" style='display: none'><use xlink:href="#path0_stroke"/></g>
<g id="play-svg-stroke"><use xlink:href="#path0_stroke"/></g>

<path id="path0_stroke" stroke-width='4' stroke-linecap="round" stroke='#000' fill='#fff' stroke-miterlimit='0' d="..."/>

<filter id="play-blur-filter" x="-2" y="-2" width="200" height="200">
  <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</svg>

Path is our letters. Filter is a Gaussian blur for the hover effect. The path used both for animated outline and for background. Background also uses blur filter and is hidden by default.

.actions__play:hover #play-svg-blur {
    filter: url(#play-blur-filter);
}
#path0_stroke {
    stroke-dasharray: 750;
    stroke-dashoffset: 750;
    animation: dash 2s linear forwards;
}
@keyframes dash {
    to {
        stroke-dashoffset: 500;
    }
}

And a little js part that fills letters and shows blur layer:

// Intro animation finish
var stroke = $('#path0_stroke');
stroke.one('animationend', function () {
    $('#play-svg-blur').show();
    stroke.attr('fill', '#000')
});

Process

Better than I expected

This is a first version I got. I was surprised with the animation I saw. My svg turned out to be a bunch of hole parts. Even with stroke-width 1 in Figma. I expected it to be just strokes, simple lines without any fill. But that's not all. My second surprise was that each letter started to animate itself simultaneosly and it was very cool that something going on everywhere and I don't know where to look. The action is bigger than I can accept at one time so I want to see it again and again.

A fly in the ointment

Besides this 2 very neat surprises I saw here 2 issues: last part of "A" was too slow, but I didn't know yet is it a problem or is it cool. And the second one really annoyed me: letters filled after about a second after strokes are done. I started to investigate first "problem" and realized that some lines are not as long as they should be. For example P's main vertical line. It consists of 2 parts. I decided to connect all this separated lines that was supposed to be a whole single ones.

M x yL x yZ

What was it like? I parse the svg with my eyes and manually cut everything after first piece from M to M "M x yL x y...ZM". I reload browser so I can see what this part draws. Then I cut this part, paste it on another document and name it. Repeat with the next piece. After that, when I had all parts with labels, I combined separated lines into single ones, again manually replacing coordinates and waving with my hands in the air trying to understand which line is which.

How to turn "magic" into "ordinary"

When I connected them and played animation I realized that part of magic disappeared. The action became much simpler, I was able to accept and understand each line prolonging at the same time with the same direction. It wasn't so bad, actually it was very strong effect too, when 4 almost vertical lines appear simultaneosly in the same direction. But it was understandable. And after I added the short parts I realized that the effect of 4 vertical lines ruined by a little chaos of small parts which ends much faster. I was a little bit sad that I spend energy and time and the result is even worse.

[There should be an illustration, but I removed that svg and it's so painful to do it again :(]

Light of hope

But with disappointment came a little insight: lines became longer and animation now has different timing. I started to play with dash-array, dash-offset and animation time. I realized that for longer lines I need more dash-array and dash-offset value to complete the strokes in long animation time.

Puzzle solved

After that came back to roots: I took my first svg and didn't connect separated lines anymore. What I did is just cut the longest line of A into 2 parts and the main vertical axis of L into the same length as the longest separated of A.

Now I have the same length for 3 lines so it looks okay when they finish. And I tuned dash-array and dash-offset to fill the letters just in time.

Finally, I have this animation.

Next candidate to improve

I wasn't satisfied with my starting screen, now it's okay. But now I'm not satisfied with my board and pieces. At first I thought they turned out okay. But time passed and now I see ugliness. Fellhuhn liked my first tweet about character and I looked at his profile and he turned out to be an Android developer and he created the most popular Android Hnefatafl. So I scanned through his feed and found this https://twitter.com/FellhuhnDotCom/status/850601941625393152. His board and pieces are georgeous. And images on pieces is almost the same as mine. My reference was the best one from the internet. So I need to find something. I don't like my "poker chips" shields anymore.