So basically you tell me that I can convert any pieces of HTML+CSS like the Codepen frog
More or less. You'll need to understand how the HTML is coded to convert to svg. There is no tool to convert perfectly an HTML to SVG. All you need is experience.
I use the software Inkscape to create shapes (or you can use adobe illustrator), then I do my best to reduce the number of elements and group things.
For example, if I want to reproduce the iguana, the eye of the iguana is a large circle and a rectangle. I group them (<g>) and make an css keyframe animation (pseudo code, not the real code):
0% = translation-X: 0px
50% = translation-X: 20px
100% = translation-X: 0px
Fun fact: the codepen snippet uses JS for animation but here, It's totally possible to animate using CSS only like the previous example
I create a clone of the animated group to make the second eye, and reverse it horizontally.
I create the face, then the mouth and I animate it again using css (15px up and down).
And voilà !
I edited the pen to be SVG only : https://codepen.io/shinprog/pen/VwvPorE
I just had to adapt the JS code to animations.
Copy paste the html code and save it as svg file. Import it to monogatari and see if it works.
get a SVF or a SVG file t
Just svg. SVF was a typing error.