Lately, I posted the SVG tutorial, how to move the text on the path (to see the tutorial click here), today I’ll show you another SVG text effect, how to move SVG text on the circle path by mouse scrolling.
What do you need to do?
Add an SVG shape (circle), and the text:
<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
<path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>
<text font-family="arial" font-size="14" fill="black">
<textPath xlink:href="#shape" startOffset="500px" id="textPath">Scroll to move a text on the circle.</textPath>
Yesterday I posted a tutorial – how to create the text on a path in Adobe Illustrator (you can watch also the video tutorial), so if you want to create a simply SVG text on a path you can take a look at these tutorials, however, if you want to add some animation and move the text on the path follow the steps below 🙂
Example1 – Moving text on a circle:
Example2 – Moving text on a heart path:
Add a SVG path/ shape
In this tutorial we’ll create text on the circle (add a SVG path to the body section, to see more about the SVG path click here.):
To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practise only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:
Practising SVG Path drawing I created the SVG Handwriting Animation.
I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.
Draw your text
This time I used the Pencil tool, and renamed each path (like on the image below, I drew letter L and I named this path as an L). This will make the animation easier to set up later.
I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.
Draw your text and export it like an SVG.(To see how to create an SVG file click here).
We will use the stroke-dasharray property for creating dashes in the stroke of SVG shapes, and also a stroke-dashoffset property to define the location along an SVG path where the dash of a stroke will begin.
If you follow my blog, for sure you noticed that in many tutorials I am using images in .png format, however, there is also a different image format that works well with the web page – SVG .
Why am I choosing PNGs and SVGs?
These formats support transparency, which does not support .jpg.
SVG and PNG both are a type of image format to store images. so…what’s the difference between a PNG and SVG?
A PNG (Portable Network Graphics) file is a raster or bitmap image file format. A raster image is made up of a fixed number of pixels [or building blocks] that form a complete image.
The image cannot be enlarged without distortion occurring. (When you zoom in on a raster image, the pixels become visibly grainy.) Common raster image files include png, jpg and gif formats.
A SVG (Scalable Vector Graphics) file is a vector image file format. A vector image uses geometric forms such as points, lines, curves and shapes (polygons) to represent different parts of the image as discrete objects. These forms can be individually edited. A vector image remains crisp and clear at any resolution or size.
Of course, as usual, it depends on you, which format you prefer, however, always you can try using another one, and have a look at how it works with your web page.
If the sample above convinced you to try to use SVG let’s go further!
For sure you have lots of questions now! Here are some answers on the most frequent one:
From where I can get SVG files?
You can find some free stocks of SVG images on Internet, or you can create them by yourself.
In which program I can create an SVG file?
Personally I am using Adobe Illustrator, but if you don’t want to pay for the software you can use a free program like Inkscape to create SVG files.
How to create an SVG file in Adobe Illustrator?
Create your image in Adobe Illustrator.
Go to File->Export->Export As… and choose format SVG.
by pressing the option Show Code you can see the code of your SVG (or you can open it in any HTML editor later):
How to add SVG to HTML?
You can do as I did in the example above, by using <img> element:
or copy the SVG code directly into HTML. You can read more about HTML SVG also here.
How to paste SVG code into HTML?
Let’s take a look on code first:
You do not need to be afraid of these numbers, you don’t need them for now.
How to animate SVG?
To our green dot I added the animation –Jelly, and @keyframes: