Shear is a transform that rotates one axis so that the axes are no longer perpendicular. It means offsetting the coordinates along one or two axes based on the distance along the remaining axis.
Under shear, a rectangle becomes a parallelogram, and a circle becomes an ellipse.
You set up a matrix transformation and multiply it by each vertex (node) of your object
The functional form <MATH> x' = c.y \\ y' = b.x </MATH> becomes the following matrix. <MATH> \begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} 0 & c \\ b & 0 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ \end{bmatrix} </MATH>
Using the standard transformation matrix notation, it would become: <MATH> \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} 0 & c & 0 \\ b & d & 0 \\ 0 & 0 & 0 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} </MATH>
Example in 3D: displace vertices (nodes) in the XZ plane depending on the Y coordinate.
vector = new Vector(1.0, 0, 1.0);
for (i = 0; i < verts.Length; i++) {
verts[i] = verts[i] + shear * verts[i].y;
}
In Svg, the transform matrix is implemented with the matrix function. A translation would be matrix(0 X Y 0 0 0).
Below:
Example:
circle {
fill:#ECDCC6;
}
<svg>
<circle cx="40" cy="50" r="30" />
<circle cx="40" cy="100" r="30" transform="matrix(0 1 2 0 0 0)" />
</svg>