Animations using SVGs, Inkscape, OBS and Shotcut

Thanks to being prompted by reading a few posts here recently I’ve started to get back into using Inkscape to create SVG files. I thought I’d combine them with some HTML and Javascript to produce some simple, but effective, animated effects. Below is my first attempt. For those interested, here’s how I did it.

Basically, using Inkscape:

  • I created some text within an oval shape;
  • I separated each of the letters as individual objects;
  • I converted all the objects to paths
  • I saved the result as an SVG.

This took just a few minutes to do. I then developed some very simple javascript to colour and animate the paths (the strokes of ;etters) and the opacity of the letter fill, this took an hour or two. I ran this as a browser source in OBS and saved to an mp4 file (about 2 minutes to do), which I then tidied up in Shotcut (another 2 minutes). Et voila:

As you can see, it is not too difficult to do this and I will be looking at other ways of combining these technologies to produce other effects.

7 Likes

Marvellous! A tutorial of this would be amazing ! :heart_eyes:

1 Like

I’ll see about putting one together in the next day or so, As said, it really wasn’t difficult to do.

1 Like

Excellent!

Just to whet your appetite, here is a second type of animation:

2 Likes

Too bad I can’t animate the Inkscape strokes because I don’t know Javascript or even another way to do that within the software itself. :tired_face:
It would be great if some of my designs in Inkscape could be animated. :slightly_smiling_face:

Good job. :+1:

help is at hand.

I’ll upload my HTML file, with the necessary Javascript, shortly. All you’ll have to do is copy in your SVG file and set 1 or 2 simple parameters (length of animation etc).

I am simplifying and documenting the code so people without any knowledge whatsoever of Javascript can use it.

3 Likes

Wow, cool!

Excited! :star_struck:

Wow, thank you very much. :grinning:
I drew in Inkscape, the lines of my Ibanez bass with all the details, from the screws in the bridge to the strings.
My son draws the vectors on photographs of modern and old trains, also in Inkscape.
I look forward to what can be done with this new resource you have developed. :star_struck:

Your mention of your son’s creative work with photos of trains got me thinking and I tried to use my new technique on a mechanical diagram. It didn’t work very well, so I added a few extra bells and whistles to it (still not complicated at all for a non-javascript user). It now works much better, as I think you’ll agree from looking at the end result:

I’m out at golf tomorrow morning, but will post the HTML file later in the afternoon.

3 Likes

Yes, the result is great. :star_struck:
Although I am looking forward to trying this system, there is no rush. :grinning:

@elusien, it looks terrific! :+1: (How can that not be complicated!! :grinning: :grinning:) Looking forward to take a look, but no rush!

I have put the source code (HTML+javascript) in the “resources” section of my website at:
https://www.elusien.co.uk/shotcut/resources/SVG_animation.html

There are quite a few parameters you can use to tailor the animation. To use it just do the following:

  • Load the webpage in a browser, and watch the short animation.
  • Right-click on the webpage and select “View page source”.
  • Copy-Paste this into a text editor.
  • Replace the “<svg>....</svg>” with your own SVG and tailor the parameters.
  • Save as an HTML file and run it in a browser, or as a browser-source in OBS.

Play around with the parameters and please remember, PATHs are being animated; if you have objects like RECTANGLEs or ELLIPSEs, you must convert these to PATHs (e.g. using Inkscape - https://inkscape.org/) in order to animate them.

For those new to SVGs, Inkscape and/or OBS, have a look at the following useful Introductory videos:

OBS: https://www.youtube.com/watch?v=ySENWFIkL7c
Inkscape: https://www.youtube.com/watch?v=pa6a7oz7vEE, https://www.youtube.com/watch?v=qq7HsMvEVmU
SVG: https://www.w3schools.com/graphics/svg_intro.asp

In the next few days I shall be making a tutorial video on how to use this feature, starting with creating the SVG in Inkscape, Recording it with OBS and editing it in Shotcut.

5 Likes

Thank you, it’s a nice gift for the Three Kings Day. :grinning:

1 Like

Hi @elusien, at first I thought the link was incorrect, but I understand now - right-click the screen. I should have read it more carefully! I’ve pasted the code and saved as an HTML file. Golly, the code looks complicated! I’ll have a go asap with another design, but also very much looking forward to your tutorial!! Many Thanks!! :+1: :+1:

@ejmillan - I had to look that one up! Never heard of that! Fascinating. Happy Three Kings Day!
(From Google) …
" Los Reyes Magos" …
"In Spain, jolly old St. Nick takes a backseat to the Three Kings of biblical lore, sometimes referred to as the Three Wise Men in English. According to the Bible, these three men traveled from around the world to Bethlehem to bring gifts to the newborn Jesus. Whether or not they were actually kings is up for debate, but their legend of gift-giving has lived on.

On January 5, the eve of Three Kings’ Day, Spanish children leave their empty shoes near the front door or window, hoping to find them filled with treats and presents the following morning. Many kids also leave out three glasses of warm milk and sweets for each of the kings, plus some hay or grass for their hungry camels. The next morning, the previously empty shoe is hopefully filled with and surrounded by gifts, although naughty kids in Spain may be left a lump of coal, just as with Christmas in other countries. "
Just a thought though, aren’t the 3 Kings supposed to be in lockdown this year? :rofl: :rofl: :rofl:

Of course, most of the complicated part of the code will be the svg itself. Just realised that!

Usually there is a parade with the 3 Wise Men waving from the camels (or in many cases decorated vehicles) to the children looking on in excitement.
This year in my town, there was a parade of 3 convertible cars (each with a King and the royal page at the wheel), they passed through all the streets so that all the children could see them from the balconies or windows of each house.
One year I got candy by simulating coal to teach my son a lesson. Finally I used the charcoal to simulate moon rocks. It worked reasonably well with my scale model of the Star Trek TOS shuttle Galileo II.

2 Likes

Yes you just replace the “<svg>...</svg>” of the example with that of your own SVG. The javascript was a lot simpler yesterday, before I added the last “bells and whistle”. However, the user doesn’t need to do anything with that, they simply change one or more of the parameters at the top to get the effect they are after.

1 Like

I will wait for that tutorial because I am useless and I can’t make this work. :pensive:
There is always something to learn. :slightly_smiling_face:

1 Like

@ejmillan How can you be useless if you can make a terrific model of the Star Trek TOS shuttle Galileo II ? :rofl:

1 Like