Glad to hear you got it working. To explain, in case anyone has the same problem:
Your SVG has the attribute: viewBox="0,0,559,783", which means that the width (559) is narrower than the height (783). The <div id="svg_container"> which contains the SVG does not have any dimensions set, so it will take up the whole width of the browser window, which means that it will extend lower than the bottom of the browser window, which is why you only saw the top part of the star.
I resized the “svg_container” DIV by making its width 50% of the browser window and now the whole star fits on the screen. I changed it in the STYLE section to:
Here’s a preview of my new video which utilises @elusien’s SVG animation tool.
The target audience of the video will be flute players and flute teachers. I created the backing track in Cubase and recorded live flute along to it.
It’s unlisted right now and I need to tweak it quite a lot before I make it public but I thought I’d post it here as a work in progress to show you the text effect at the beginning.
I just imported the MP4 black and white video (see my demo video 5 posts higher in this thread), re-sized it and applied a Blend mode (ADD) filter to it to remove the black background.
I’m delighted with the way the text effect came out! Thanks @elusien!
PS the text effect appears straight away at the top of the screen so it’s best viewed on YouTube itself.
I can see how this would give the musicians practice running up and down the stairs scales.
I can look at a piece of HTML/CSS/Javascript and figure out more or less what it is doing, but sheet music might just as well be Chinese for all I can make out of it. I wish I’d listened more to my teacher 60 years ago when I was learning the recorder at school.
Dans votre fichier d’animation, après la balise div qui contient le svg il y a d’autres lignes commençant par const = [ ] Je suppose que c’est pour traiter séparément chaque chemin, définir le délai de départ, la durée, etc. J’ai essayé en vain de rentrer des valeurs entre les crochets, mais je ne dois pas faire comme il faut. En d’autres termes, est-il possible de définir le début et la durée de chaque chemin?
In your animation file, after the div tag that contains the svg there are other lines starting with const = [ ].
I guess it’s to treat each path separately, define the start time, duration, etc.
I tried in vain to enter values between the square brackets, but I don’t have to do it properly.
In other words, is it possible to define the start and duration of each path?
