Yes, the latest release of OBS has the OBS Virtual Camera feature without having to install other software. This means that you can use, in real-time, in any other software that supports “OBS Virtual Camera” (such as Sharex) the output that OBS is generating.
A good demonstration of that (using Discord - an American VoIP, instant messaging and digital distribution platform that supports OBS Vitual Camera) is given here:
@ejmillan, @jonray, @Hudson555x, @Bertrand_G , @Deon_Evangeline
I have redone my tutorial on Animating SVGs and out it up on vimeo (vimeo.com/500176281) and have updated my post (number 28 above) with the new video.
If you have already seen the tutorial there is no new substance, however, I have sprinkled several clips throughout the video that were made by animating SVG slides and though I say it myself they have come out quite well. I particularly like the “Made with Shotcut” clip at the end.
To see just these look at the clips at the following times (m:ss) in the video: 0:00 (a 40 second clip), 8:00, 9:20, 15:00, 18:45.
Looks brilliant! I will be looking into this! All this can be done in Shotcut but this looks like it will take much less time in SynfigStudio. Thank you.
For animated texts, perhaps Impress (LibreOffice or Apache Open Office) could be a relatively simple alternative, although I don’t remember if it can export with transparent background since I haven’t used it for a long time.
Hi @elusien, Just tried this. First attempt, some success, but the problem is that the text is coming out small and not centred. This is a screenshot of my original SVG (created in Inkscape):
which is 1920 x 1080 px. I want it to appear large!
However, this is how it appears after importing it into your code after inverting the colours (the animation works great, it’s just the size issue - the image is tiny and clipped):
I tried adding
height:100vh;
width:100vw;
to the svg_container, and also tried
width:1920;
height:1080;
position:absolute;
left:0;top:0;right:0;bottom:0;
margin:auto;
… but it didn’t make any difference to the size of the text.
Any ideas? No worries if you are busy, I can wait, I have lots of things to do!
My SVG and HTML code:
Catch the Late Train.zip (7.9 KB)
@jonray, nice to see you are trying it. You have a couple of mistakes in your HTML.
<svg>, it should be <svg i.e. delete the “>”, as the tag is terminated later, on the line which says sodipodi:docname="Catch the Late Train.svg">
<div id="svg_container"> </div>, you should not have the </div> as you are immediately terminating the div (zero height) with nothing in it, delete it (centred).</svg> you have <\div, which is supposed to close the “svg_container”, you have missed off the “>”Having corrected these you have the SVG inside the container. Then you can set the height and width of the container and the SVG will resize to fit in it.
P.S. you are using an old version of Inkscape (0.92.3), I’d upgrade to the latest version (1.0.1)
Fantastic, I will try it!
Woo-hoo! Thank you! But one question, the small white lines (start of the animation) appear at the beginning. Can I make them invisible right from the beginning? (I set the animation to start after 2 seconds (2000 ms)).
Also, the effect seems to begin slowly and increase speed. Is this changeable?
First the easy one: speed/acceleration - just change the “easing” function to use (easing = ‘linear’ will give constant speed.
const easing = 'easeInOutQuad' ; // The type of motion acceleration (see https://easings.net/)
/*
easing value = one of the following:
'linear', 'easeInQuad' , 'easeOutQuad' , 'easeInOutQuad' , 'easeInCubic', 'easeOutCubic', 'easeInOutCubic',
'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint'
*/
Secondly, white points at the beginning. This is a bit more difficult. I have an idea how to fix this. One way is to modify the javascript to offset the stroke path so it is totally invisible until it starts to animate. I’ll have a go later this evening.
I’m wondering if the EASING is what you mean. Try experimenting with the 2 parameters:
const animate_separately = true ; // true = animate paths consecutively, false = animate paths concurrently
const drawn_out = true ; // true = first path and last path complete simultaneously.
I think this is maybe what you were alluding to.
OK, I have fixed the problem of the “white lines”, which are the first “dash” in the paths. The “strokeOpacity” needs to be set to 0 initially, then to 1 when the stroke is drawn. I’ll update the file on my website. [EDIT - File on website has been updated] For your code just make the following changes .
Add the 3rd line near line 280 in your HTML file:
if (opacities[i] == '') { opacities[i] = 1; }
paths[i].style.fillOpacity = 0; // start invisible
paths[i].style.strokeOpacity = 0; // start invisible
Add the fifth line near line 363 of your HTML file:
for(var i = 0; i < paths.length; i++){
ldash = (particles) ? particle_size : Math.floor(lengths[i] * progress );
lspace = (particles) ? Math.floor(lengths[i] * (1.0 - progress)) : lengths[i];
paths[i].style.strokeDasharray = stroke_completed ? '' : `${ldash} ${lspace}`;
paths[i].style.strokeOpacity = 1; // Make the stroke visible
}
Add the fifth line near line 385 of your HTML file:
let ldash, lspace;
ldash = (particles) ? particle_size : Math.floor(lengths[n] * progress );
lspace = (particles) ? Math.floor(lengths[n] * (1.0 - progress)) : lengths[n];
paths[n].style.strokeDasharray = strokes_completed[n] ? '' : `${ldash} ${lspace}`;
paths[n].style.strokeOpacity = 1; // Make the stroke visibleJ’ai copié votre source html pour faire un essai, mais mon fichier SVG n’est pas issu de Inkscape, donc ça ne fonctionne pas.
Je vais essayer de télécharger Inkscape pour mac pour voir.
Par contre dans votre fichier, à la fin de la balise ‘svg’ il semblerait que la balise ‘div’ suivante soit incomplète (ligne 299) il manque le ‘>’ ?
I copied your html source for a test, but my SVG file is not from Inkscape, so it doesn’t work.
I’ll try to download Inkscape for mac to see.
On the other hand, in your file, at the end of the ‘svg’ tag it seems that the following ‘div’ tag is incomplete (line 299) the ‘>’ is missing?
Sorry, you are correct, line 299 should be </div>. I found the problem in @jonray’s file, but mistakenly thought he’d made the mistake, not me. I have corrected the file on the website accordingly. Google Chrome seems to ignore the fact that the “>” is missing.
The SVG does not have to be from Inkscape, most SVGs that have “path” s within them will work. However, in order to scale an SVG in a browser it must contain a “viewBox” attribute. Most (but not all) SVGs contain this (e.g. in my file the attribute says viewBox="0 0 210 297").
If you upload the SVG here (just replace the suffix “.svg” to “.txt” before you do so, I could have a look at it for you. Once you get the hang of how to do it it becomes much easier.
@Elusien !!! Way hey, works fantastic!!
Screen capture done with ShareX:
Will do more work with it and re-post soon…
It’s a BRILLIANT effect!!
You’re a GENIUS!
Glad you got it working. But I think “Genius” is exaggerating a bit, let’s just say “Outstanding”.
I’m playing around with SVGs at the moment and if it works out I may have something to report separately shortly.
LOL!! I agree with that. An outstanding genius then … 
Edit : Sorry, it works