In this article, I'm going to introduce 3 kinds of transformations for the SVG path commands.
v/V commands draw lines horizontally and
The lowercase letter specifies relative coordinates, while the uppercase letter specifies absolute coordinates.
In order to demonstrate how these transformations work, I'll use the initial SVG path below as an example.
flip transformation consists of two separate operations, flip vertically and horizontally.
If both operations are applied, each number that is following the
h command will be multiplied by
Flip vertically with
Flip horizontally with
invert transformation swaps the
h command names with each other.
reverse transformation changes the given command list
in a reverse order.
Furthermore, these basic transformations can be combined together.
SVG and css-doodle
Flip, invert and reverse have been implemented in CSS Doodle already but once you get the idea it'll be easy to implement and add them to your own toolset.
CSS Doodle has a simplified syntax for function composition, which will save a couple of parentheses when two or more functions are joined together.
There's also a new syntax for writing SVG, but that's another topic. It looks more natural in CSS without quotes around attribute values.
Traditional Chinese border pattern
I'm always fascinated by the traditional border patterns. The three transformation methods are what I got when I wanted to draw the patterns in the first place. I'll show the steps of how to draw the pattern as shown below.
First, prepare the basic code structure and add the outside frame so that I can see where the boundary is.
Next, draw the base path, which starts from the middle top position
(100, 5) and ends at the position
Get new path commands by transforming the base path and append them to the end.
Here the base path is wrapped by function
@p so that it can be referenced later with
Treat the drawn paths as a whole and do invert and flipv transformations to it.
Since now the point is at the bottom center, It'll need to flip both horizontally and vertically to form the final graph.
Although there are different other ways to generate the pattern, this is by far the shortest version I'm able to get. See also on CodePen.
With the same method and process, we can draw a simple version of the Hilbert curve.
Starting from the bottom left, the base path could be:
And then do some transformations to form a more complex graph.
Repeat the last step.
The process can go on and on to generate larger dimension versions of the curve. See also on CodePen.
Cycle carré de méandre
The reverse transformation is a key part of the base path.
Now fill the other half with
These transformations can be replaced with
rotate in one way or another, however,
transform-origin will be involved then and the result must be put into different path elements.
Sometimes a single path is more convenient for animation.
Writing SVG path by hand can be hard, but it's still fun to find new ways of doing old things. Next time I'll see if the same concept can be applied to curves.