Name SVG

I follow a bunch of different things in my RSS reader FreshRSS. An area that has a lot of subscriptions is web development. One Page Love is a site that I consistently enjoy their posts as it is a fun way to see what people are doing on single page sites. Having a single page is an interesting restriction and there is a lot you can do in that space.

Recently they posted the site for Jeff Wall and I really liked the unique look of the site. With a special fascination for the way the text of his name is drawn.

It kinda reminds me of the sort of thing you would see on a workout video from the 80s. Or maybe The Substance is still with me a little bit.

I thought this would be a fun project to try and recreate without digging into exactly how Jeff did it.

For my last name I used the current header on the site which is ‘playfair_displayregular’. Each of the letters have a slightly different starting animation using :nth-child().

#last-name.animate tspan:nth-child(1){ animation-delay: calc(10s + 0s); }
#last-name.animate tspan:nth-child(2){ animation-delay: calc(10s + 0.4s); }
#last-name.animate tspan:nth-child(3){ animation-delay: calc(10s + 0.8s); }
#last-name.animate tspan:nth-child(4){ animation-delay: calc(10s + 0.16s); }
#last-name.animate tspan:nth-child(5){ animation-delay: calc(10s + 0.32s); }

The stroke and fill animations are accomplished by starting with a rgba value with the alpha set to 0.

--last-color-hidden: rgba(76, 252, 184, 0);
--last-color: rgba(76, 252, 184, 1);

And then changing the fill to the same color with the alpha set to 1. Thus –last-color-hidden to –last-color. This is done with keyframes.

  @keyframes draw{
    to{ stroke-dashoffset:0; }
  }

  @keyframes fillLast{
    to{ fill:var(--last-color); }
  }

The stroke animation is achieved by moving the offset from 1000 to 0 also via keyframes.

  #last-name{
    stroke: var(--last-color);
    stroke-width:1;
    fill: var(--last-color-hidden);
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
  }

  @keyframes draw{
    to{ stroke-dashoffset:0; }
  }

The first name is an SVG I created by scanning my signature and converting it to SVG in Inkscape. This was done originally to add a personal element to cover letters but I had it lying around so I figured why not use it here.

The current state of this experiment is available so you don’t have to just watch the brief video I recorded.

I like where it is at currently but I do think they timing should be tweaked to have a greater impact. I think the fill on the last name happens too early and really should wait until the stroke is almost complete. I think the first name effect could be a little later as well. In general I think it should be a bit slower but I don’t know if I’m going to use it for anything so I haven’t dialed it in yet.

Listening to: Motion City Soundtrack - She Is Afraid

This is day 72 of #100DaysToOffload.