Playing with css3 matrix3d effect on a svg sprite. These are static images, with no scratch blocks, just svg markup. Safari doesn't support matrix3d on WebGL textures CSS3 can do 3d transform using either perspective or matrix3d that allows you to tilt your svg costume. eg: transform: perspective(500px) rotateX(65deg) ; or transform:matrix3d(1,0,0.00,0,0.00,1,0.00,-0.003,0,0,1,0,5,0,0,1) Matrix format tester: https://ds-overdesign.com/transform/matrix3d.html https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
This is alot simpler than feDisplacementMap method in my previous project. The chess image is a svg pattern filled to rect with 4 "use" cat and a couple of css variables to add alternating colours. Then apply a perspective transform on the root element. Base64 encode your svg contents and embed in <image href="data:image/svg+xml;base64,..."/> to allow you to the import the svg as costume in scratch 3.0. Unfortunately 3d transform fails to render correctly in webkit (safari) when loaded to image, canvas or webgl texture https://bugs.webkit.org/show_bug.cgi?id=273939 For better compatibility, convert svg to png eg: https://svgtrace.com/svg-to-png and then base64 the resulting image. You may improve compression by converting the png to avif and base64 that file.
