Using Svelte Transitions Animate an SVG Logo

I had a little fun animating the logo for the front page of the website. Svelte has all kinds of transitions, one of the lesser used ones is draw.

In order to do this, I created an svg with my name printed with a simple outline font. This kind of thing should be simple enough to do in a vector graphic package like Affinity Designer.

After saving as an svg, in order to create a component, I copy the text contents to a file JamesTorr.svelte. I then remove the code at the top that looks like this:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

In the script tags, I declare the colour, width and import the transition.

<script>
	import { draw } from 'svelte/transition';
	export let width = '200px';
	export let stroke = 'black';
</script>

The SVG

The svg code is reasonably easy to understand, and you can manipulate the contents with Svelte variables.

<svg
	{width}
	viewBox="0 0 1500 250"
	version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xml:space="preserve"
	xmlns:serif="http://www.serif.com/"
	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
>
	<g transform="matrix(4.97299,0,0,4.97299,-1493.5,-2655.94)">
		<g transform="matrix(50,0,0,50,300.574,576.833)">
			<path
				in:draw={{ delay: 250, duration: 1000 }}
				d="M0.053,-0.03L0.053,-0.145C0.083,-0.119 0.113,-0.099 0.145,-0.086C0.177,-0.073 0.209,-0.066 0.243,-0.066C0.29,-0.066 0.322,-0.078 0.341,-0.102C0.359,-0.127 0.368,-0.172 0.368,-0.238L0.368,-0.646L0.182,-0.646L0.182,-0.729L0.467,-0.729L0.467,-0.238C0.467,-0.146 0.45,-0.081 0.415,-0.043C0.381,-0.005 0.324,0.014 0.243,0.014C0.212,0.014 0.181,0.011 0.15,0.003C0.119,-0.004 0.087,-0.015 0.053,-0.03Z"
				style="fill:none;fill-rule:nonzero;stroke:{stroke};stroke-width:0.03px;"
			/>
		</g>
	</g>
</svg>

This is the first letter J, the rest of the letters appear in <g></g> blocks below the one in the code above. The first block declares some information about styling, as well as the width of the svg. I’ve added {width} which is the equivalent of width="{width}".

The Component

Adding the logo to a page with the transition is as simple as importing the component.

<JamesTorr width="400px" stroke="var(--orange)" />

Controlling the Transition

In the path section, I’ve added the svelte transition properties: delay and duration.

The draw and delay (I want the page to load before the transition starts) are manipulated here. Delay simply starts the transition a specified number of milliseconds after the page loads. Duration specifies the amount of time the transition takes.

You should be able to add these to the component properties as well if you wished to tweak them.

in:draw={{ delay: 250, duration: 1000 }}

in:draw also takes easing as an option as well. Easing just varies the speed of the transition, e.g. start slow, end quickly. Svelte docs have a nice ease visualiser to help you understand what the transition looks like. You import from the easing library. Here’s an example:

import {cubicIn} from "svelte/easing";

You’d add it thus:

in:draw={{ delay: 250, duration: 1000, easing: cubicOut }}

Stroke

The stroke colour is manipulated on this line:

style="fill:none;fill-rule:nonzero;stroke:{stroke};stroke-width:0.03px;"

As this is declared in the script tags as an exported variable, I can specify this when I use the component, I can even use CSS variables.

End

Svelte transitions are a simple and effective way to engage your users, let them know what’s happening and what they’re interacting with. You can also use them for a little bit of fun, as we have done here!