Trying to understand how SVG's use up Power Usage.

[Egg Bramhill]

I agree with that Paul. The only problem is you can't morph between images and as you stated earlier bitmaps aren't scaleable without image loss.
I'll see if I can create an animated gif. My software hasn't got this option but I can do it in Xara.
I'll also do it without the morphing.

[handrawn]

with the right software you can do all the morphing etc in vector and then composite out in non-vector format; subject to resolution you would be hard pressed to tell the difference

but if the final animation has a wide range of playback sizes then that can be an issue obviously

more important things to worry about in a browser, yes; firefox is a resource heavy beast, for a start the way it sandboxes tabs as I recall

[Egg Bramhill]

Here's a screen gab MP4. it's 10 seconds long & 2Mb in size.

[pauland]

The trick is to loop very short sequences and you can get by with low frame rates too.

The flags animation is very effective.

[handrawn]

speed it up a bit and set to ragtime.. I love a foxtrot...

[siran]

That was very interesting, and just the case you are interested in this information:
My CPU is much more up to date than my GPU.
For your first link (containig 4 rows of flags) my CPU, GPU and power usage (according to the task manager) in Firfox was:
- in an akitve TAB about 1.9% CPU (1.8 to 2.0) and 13.6% GPU (13.4 to 13.8) and power consumption medium to high
- in an inactive TAB 0.1% CPU (0.0 to 0.2) and 0.2% GPU (0.0 to 0.4) and power consumption very low
when hardware acceleration was enabled.

And:
- in an akitve TAB about 1% CPU (0.9 to 1.1) and 0% GPU and power consumption low to medium
- in aninactive TAB 0% CPU (rarely at 0.1%) and 0% GPU and power consumption very low
when hardware acceleration was disabled.
In both cases (hardware acceleration on or off) the animation was absolutely smooth.

[Acorn]

I had a go at converting some SVG traingle shapes to CSS clip-path.

Currently clip-path: path() is not implemented on all browsers and I had to revert to using changing the SVGs themselves to holding the clip-path.
This works but you lose the morphing aspect that clip-path: path() would allow.

The way to fix this is to use more frames in the keyframes definition.

Please do not compare Egg's fine flags to mine.
I was only doing this to test for CPU /GPU consumption.

What is interesting on my PC, Egg's flags GPU use is 3.3MB @30fps.
My test is almost double both values: (6.6MB @59.4fps).
I had 25 flags (Egg 16) but only three frames (Egg 5) and two speeds (Egg 3), which were twice as fast as Egg's.

Average CPU usage for the browser is a lowly 0.27%.

CSS - Flags.xar - each Placeholder (flag) has a Name of htmlclass="svg-triangle" or "svg-trianglealt".
The CSS animation for each classname does the rest.

Acorn

---

HTML code (head):

<svg width="0" height="0">
<defs>
<clipPath id="tri01">
<path d="M 0 0.393 L 160.173 0 L 72.806 225.108 L 0 0.393 Z"></path>
</clipPath>
</defs>
</svg>


<svg width="0" height="0">
<defs>
<clipPath id="tri02">
<path d="M 0 0.393 L 160.13 0 C 150.974 -1.056 113.946 234.842 140.948 237.958 C 134.651 272.306 -9.671 53.145 0 0.393 Z"></path>
</clipPath>
</defs>
</svg>


<svg width="0" height="0">
<defs>
<clipPath id="tri03">
<path d="M 0 0.393 L 160.13 0 C 150.974 -1.056 123.053 70.33 47.51 197.285 C 31.208 28.818 -11.188 50.112 0 0.393 Z"></path>
</clipPath>
</defs>
</svg>




<style>
.svg-triangle {
animation: wave 2.3s ease-in-out infinite;
clip-path: url(#tri01);
}


@keyframes wave {
0% { clip-path: url(#tri01); }
50% { clip-path: url(#tri02); }
75% { clip-path: url(#tri01); }
100% { clip-path: url(#tri03); }
}


.svg-trianglealt {
animation: wavealt 1.9s ease-out infinite;
animation-delay: 0.3s;
clip-path: url(#tri02);
}


@keyframes wavealt {
0% { clip-path: url(#tri03); }
25% { clip-path: url(#tri01); }
50% { clip-path: url(#tri02); }
100% { clip-path: url(#tri01); }
}
</style>

[Egg Bramhill]

Okay, this is turning into an informative thread

Just for HD I've set it to as fast a ragtime as I can. Link below.

Strangely this doesn't seem to greatly increase the CPU GPU usage. EDIT: The speed-up doesn't change the cpu/gpu usage a great deal. Changing the view to' Scale to Fit' does increase cpu/gpu usage but this would be expected.

@ Paul: Yes I can see your point. I'm not into videos in any big way so I wouldn't know how to set up a looping MP4. I'd also need to work out the total length of the 3 svg files to determine the length to have a smooth looping video. This is Gary's expertise.

@ Siran: Cheers. I don't know about hardware acceleration so I'll look that up.

@ Acorn: You're the master of CSS! As you know I'm a visual person and you're the coder. An interesting alternative.

LINK

[handrawn]

Just for HD I've set it to as fast a ragtime as I can

that... is a black bottom

[https://www.youtube.com/watch?v=i_iA57YoEoI

[Initiostar]

Egg,

Here's your animation as an MP4 that loops - it's about 30 secs for each loop to accommodate the added sound track. https://initiostar.co.uk/demo/flags/. I just did the same screen capture as you with output format as MP4, added the sound track thereafter. Autoplay with audio without muted does not work for most browsers, but you could build a starting sequence that has the visitor initiate autoplay.

You could covert animated SVGs to MP4s and you can combine the MP4s into a single MP4; synching it all would take some effort though.

Don't think practically you would have loop with audio, but it could be used as an intro that stops and remains in the background, or flies away to reveal something else.

Gary