Is this possible to stack an animated svg file on top of a jpeg image?

[Kakarotto-bot]

Select Topic Area

Question

Body

Sometimes someone need to put a svg to do this, and then put it into a README profile, is there away to do it when no graphic designer's skill (Photoshop, AI,...)?

[Nirmal-Kharal]

i think this might help you :-
Yes, it's definitely possible to stack an animated SVG on top of a JPEG image without needing graphic design tools like Photoshop or Illustrator. You can achieve this using HTML and CSS, and then display it in your GitHub README.

However, GitHub README files use Markdown, which doesn’t support advanced HTML and CSS directly. So while you can create this effect on a website or project page, you can only display static images in a README.

Here’s a workaround:

Create the stack with HTML and CSS: Use HTML to layer the SVG on top of the JPEG, as mentioned earlier.
Take a screenshot or screen recording of the result.
Embed the screenshot/gif into the README.

[t1noo7]

you can create an html file, use css to customize the interface and use javascript to handle events to customize the functionality as you want.
Another option is to combine it with github-page