I have read about the SVG even odd fill rule. However I can't seem to create a single object that have the fill property illustrated below. The inner shape has a fill, the outer shape is just strokes.

Thanks guys, cheers



ps; I know you can group two objects together, but there is not the effect that I am looking for.

Hi.

Draw a bigger square and a smaller one,
duplicate the larger and flip it horizontally, then combine the three together.
Result should look as in the attached example.

Lazur wrote:Hi.

Draw a bigger square and a smaller one,
duplicate the larger and flip it horizontally, then combine the three together.
Result should look as in the attached example.

sq1.svg

Awesome! This work.

If you don't mind, can you explain the underlying mechanism that makes this work?

You are welcome!

It's related to the fill rule.
By mirroring the duplicant, its direction is reversed and by combining with the underlying path it creates a "hole", where the filled area is eventually zero -all between the duplicated edges.

Try moving one of the nodes around of that shape for a better understanding.