Playing with applying perspective to svg paths. These may be useful for fixed perspective textures eg:floors For multiple cats you define a pattern and use <path fill="url(#cat)" /> as the svg "use" element is not well supported in scratch's svg renderer. No code again, just svg markup and me bumbling around with inkscape. Similar method in Adobe illustrator but I only have access to the free Inkscape
Update: Inkscape does support perspective on groups like illustrator. After testing css3 3d transforms in my last project, i noted it had limited use, as it failed on safari. This is due to webkit compatibility issues, so might just aswell use a bitmap and do the perspective transform with imagemagick, but then we loss the important vector scaling capabilities. Time to test sometime else: Transform the vector paths first as a pattern base and then skew and translate for each grid cell. Then scale each row. SVG are made of a bunch of vector elements but most can be converted to svg paths. Inkscape can do perspective transforms on groups (g) or individual paths. Inkscape Method: 1. To simplify the steps later, convert all objects to paths and combine the paths first. Eg:The cat sprite is 15 paths. These can be combined by color and z order. Select the paths you wish and press ctrl+k to combine. Once complete, you get "cat 4 paths" file. 2. Add your paths to new group called perspective 3. In inkscape select your new group called "perspective" press ctrl+& to open "path effects..." and search for "Perspective/Envelope" and select "mirror movements in vertical". 4. Press F2 to enable Node Tool 5. Adjust the corners of your costume in inkscape editor for a perspective view. Once your happy export your sprite. Bonas Feature: The raw resulting costume can be edited in the scratch design tool as it is just plain svg paths. Below are some helpful online tools that I used for optimizing svg paths https://yqnn.github.io/svg-path-editor and optimizing svg markup https://svgomg.net Png to svg rle https://codepen.io/shshaw/pen/XbxvNj
