Skip to content

Instantly share code, notes, and snippets.

@Crissov
Last active April 24, 2017 11:41
Show Gist options
  • Save Crissov/9ca5a7e7013ac8cfbc9d1bc091f61b13 to your computer and use it in GitHub Desktop.
Save Crissov/9ca5a7e7013ac8cfbc9d1bc091f61b13 to your computer and use it in GitHub Desktop.
SVG transformations

Standardized

matrix(a, b, c, d, e, f) = [a b c d e f]
translate(tx, ty=0)      = [1 0 0 1 tx ty] 
scale(sx, sy=sx)         = [sx 0 0 sy 0 0]
rotate(α)                = [cos(α) sin(α) -sin(α) cos(α) 0 0]
rotate(α, cx=0, cy=0)    = [1 0 0 1 cx cy] [cos(α) sin(α) -sin(α) cos(α) 0 0] [1 0 0 1 -cx -cy]
skewX(α)                 = [1 0 tan(α) 1 0 0]
skewY(α)                 = [1 tan(α) 0 1 0 0]

Proposed additions

mirror(a, b=-a)          = [a 0 0 b width*(1-a)/2 height*(1-b)/2]
flipX() = mirror(-1,1)   = [-1 0 0 1 width 0]
flipY() = mirror(1,-1)   = [1 0 0 -1 0 height]

mirror(a, b=1-a)         = [1-2*a 0 0 1-2*b width*a height*b]
flipX() = mirror(1,0)    = [-1 0 0 1 width 0]
flipY() = mirror(0,1)    = [1 0 0 -1 0 height]

Transformation matrix

T 1 2 3
1 a c e
2 b d f
3 0 0 1

Translation matrix

T 1 2 3
1 1 0 tx
2 0 1 ty
3 0 0 1

Scaling matrix

T 1 2 3
1 sx 0 0
2 0 sy 0
3 0 0 1

Rotation matrix

T 1 2 3
1 cos(α) -sin(α) 0
2 sin(α) cos(α) 0
3 0 0 1

Arbitrary anchor

T 1 2 3
1 cos(α) -sin(α) cx*(1-cos(α)) + cy*sin(α)
2 sin(α) cos(α) cy*(1-cos(α)) - cx*sin(α)
3 0 0 1

Horizontal skew matrix

T 1 2 3
1 1 tan(α) 0
2 0 1 0
3 0 0 1

Vertical skew matrix

T 1 2 3
1 1 0 0
2 tan(α) 1 0
3 0 0 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment