# Geometry - Skewing (Shearing)

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.

## Transformation

### Matrix multiplication

You set up a matrix transformation and multiply it by each vertex (node) of your object

The functional form $$x' = c.y \\ y' = b.x$$ becomes the following matrix. $$\begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} 0 & c \\ b & 0 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ \end{bmatrix}$$

Using the standard transformation matrix notation, it would become: $$\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}$$

### Procedure

Example in 3D: displace vertices (nodes) in the XZ plane depending on the Y coordinate.

• Define a vector with only X and Z:
vector = new Vector(1.0, 0, 1.0);

• Loop through all the vertices, getting the Y coordinate, multiplying that by the shear value and then adding that offset back to the original vertex:-
for (i = 0; i < verts.Length; i++) {
verts[i] = verts[i] + shear * verts[i].y;
}


## Example

In Svg, the transform matrix is implemented with the matrix function. A translation would be matrix(0 X Y 0 0 0).

Below:

• we draw a rectangle without skew
• we draw a rectangle with skew

Example:

• The CSS
circle {
fill:#ECDCC6;
}

• The Svg
<svg>
<circle cx="40" cy="50" r="30" />
<circle cx="40" cy="100" r="30" transform="matrix(0 1 2 0 0 0)" />
</svg>

• The output:

## Documentation / Reference

Discover More
Geometry - Ellipse

An ellipse is a predefined shape. Under shear, a circle becomes an ellipse.
Geometry - Transformation

Transformation of geometric objects. A geometric transformation is represented by a transformation matrix. Transformations that keep the origin fixed are linear including: , ...
Geometry - Transformation Matrix

A geometric transformation can be represented by a matrix. THE advantage of using transformation matrices is that cumulative transformations can be described by simply multiplying the matrices that describe...
Inkscape - Skew

in Inkscape