Drawing Snowflakes with SVG

The idea of ​​creating snowflakes used in this post, I borrowed from kindergarten. There they fold a sheet of paper several times, cut holes with scissors and after unfolding they get a snowflake. In this case, we need to draw one sixth and then turn its copies 60 degrees 5 times.



Such snowflakes can be used in New Year's greetings. For the seed I made just such a postcard .

')





To draw, you can use a group of elements ( g ) or a single path element

<path class="templateSnowflake" id="tplSnowflake1" d=" M0,0 L40,40 M 40,30 L 30,30 L 30,40 M 35,25 L25,25 L 25,35 M 35,20 L20,20 L 20,35 M 40,11 L15,15 L 11,40 M 20,8 L8,8 L 8,20 " /> 

in this case, we have one main line (M0,0 L40,40) and additional.



To build the snowflakes we will make a group:

 <g id="snowFlake1"> <use xlink:href="#tplSnowflake1" /> <use xlink:href="#tplSnowflake1" transform="rotate(60)" /> <use xlink:href="#tplSnowflake1" transform="rotate(120)" /> <use xlink:href="#tplSnowflake1" transform="rotate(180)" /> <use xlink:href="#tplSnowflake1" transform="rotate(240)" /> <use xlink:href="#tplSnowflake1" transform="rotate(300)" /> </g> 

You can use a snowflake as follows:

 <use xlink:href="#snowFlake1" /> 

I already made a few snowflakes , and what snowflakes will you get?