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.
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.
It would be great if some of my designs in Inkscape could be animated.
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.
Wow, thank you very much.
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.
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.
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:
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.
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!!
@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?
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.
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.
