GitHub - Mirabellensaft/SVGtoCSS: 📖 XML parser, extracting coordinates from SVG path data, writing CSS for clip-path animation

Mirabellensaft / SVGtoCSS Public

Notifications You must be signed in to change notification settings
Fork 0
Star 2

📖 XML parser, extracting coordinates from SVG path data, writing CSS for clip-path animation

transfeld.net/cssmagic/

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
animation_maker.py		animation_maker.py
coordinates_converter.py		coordinates_converter.py
elefant.svg		elefant.svg
mücke.svg		mücke.svg
parser_helper.py		parser_helper.py
readme.txt		readme.txt
svgTOcss.py		svgTOcss.py
triangle_magic.py		triangle_magic.py
triangle_math.py		triangle_math.py

Repository files navigation

Readme

In order for this program to work, the polygons in the .svg have to have certain
properties.

Coordinates in the .svg need to be absolute.
    Edit > Preferences > SVG output > Path data
        Path string format needs to be set to 'Absolute'.
        'Force repeat commands' has to be activated.

You need two files: one for the beginning, and one for the end of the animation.
In order for the triangles of one file to be able to morph into triangles of the other file, both files need to have the same number of triangles. A triangle is matched to another triangle based how similar their position on the canvas is. 

Coordinates of the triangles will be converted in percent values

So far, the program has only been tested with triangles.