More bumbling around with svg fixed perspective vector costumes, this time in grid form. Using svg perspective path pattern from the previous project on your texture, and build out the pattern with <path fill="url(catN)" d="PerspectiveQuadPath" transform="skewX(x) translate(x, 0)" /> to skew and translate on horizontal in svg for two costumes of alternating rows. Scale + translate on the vertical which scratch supports. This method works in all browsers :-)
Unsure of the maths exactly but seems to work ok. The image quality is much better than the previous css3 matrix3d method on chromebooks. eg: <g id="Row"> <path transform="skewX(10)" fill="url(#catM)"> <path transform="skewX(-10)" fill="url(#catN)"> <path transform="skewX(28)" fill="url(#catN)"> <path transform="skewX(-28)" fill="url(#catM)"> <path transform="skewX(41)" fill="url(#catM)"> <path transform="skewX(-41)" fill="url(#catN)"> <path transform="skewX(51)" fill="url(#catN)"> <path transform="skewX(-51)" fill="url(#catM)"/> <path transform="skewX(58)" fill="url(#catM)"> <path transform="skewX(-58)" fill="url(#catN)"/> <path transform="skewX(63)" fill="url(#catN)"> <path transform="skewX(-63) fill="url(#catM)"/> </g> Ill try scrolling rows next...
