How to Draw a Snowflake in SVG

This tutorial shows how to draw a snowflake in SVG by creating one branch, reusing it with <use>, rotating copies around the center, and adding an optional SVG animation. The same pattern is useful for snowflake icons, winter backgrounds, decorative loaders, greeting cards, and reusable vector assets.

Quick Answer: Draw one snowflake branch as a <path>, put it in <defs>, reuse it six times with <use>, and rotate each copy around the center with transform="rotate(angle cx cy)".

In this article, you will learn how to:

• set an SVG viewBox for a scalable snowflake drawing;
• draw one branch with path commands;
• reuse the branch with <defs> and <use>;
• rotate branches around the snowflake center;
• add a center decoration and optional <animateTransform> rotation;
• optimize an SVG snowflake for accessibility, SEO, and reuse.

Why SVG Is Perfect for Snowflakes

SVG is a good format for snowflake drawings because the artwork is geometric, scalable, editable, and usually small. A snowflake can be built from repeated lines and transforms instead of many separate copied paths.

Snowflakes, with their six-fold symmetry and clean lines, are a practical example of what SVG does well:

• Scalable – Snowflakes maintain crispness at any size, from tiny icons to large backgrounds. They are ideal for icons, logos, and animations.
• Small file size – SVG code is typically smaller than raster images.
• SEO benefits – Search engines can read and index SVG content.
• CSS styles – Easily change the color, size, and stroke width. Snowflakes are easy to animate and dynamically change styles.

Basic Snowflake Structure

A simple SVG snowflake can be built from six branches rotated around one center point. Since a full turn is 360 degrees, six equal branches are spaced 60 degrees apart. The basic approach is:

• Creating one branch.
• Rotating the original branch around the center 60 degrees 5 times to create six branches.
• Adding decorative elements.

This snowflake example uses SVG paths, transformations, reusable elements, fills, strokes, and viewBox. These related tutorial articles explain the underlying concepts:

• SVG Coordinate Systems and Units explains the SVG canvas, viewport, units, and coordinate system.
• SVG Shapes shows how to create basic shapes and apply simple styling.
• SVG Path Data explains how paths draw outlines from line, arc, and curve commands.
• Basic SVG Transformations covers rotation, scaling, translation, and skewing with the transform attribute.
• Fills and Strokes in SVG explains stroke color, width, opacity, dash patterns, and fill behavior.

How to Draw an SVG Snowflake

1. Create an <svg> element with a square viewBox, such as viewBox="0 0 300 300".
2. Choose the center point of the snowflake. In a 300x300 viewBox, the center is (150, 150).
3. Draw one branch as a <path> and keep fill="none" when you want line artwork.
4. Put the branch path in <defs> so it can be reused without rendering the original definition.
5. Use <use> to stamp the branch six times and rotate each copy by 60 degrees around the center.
6. Add decorations, metadata, and optional <animateTransform> when the snowflake should spin.

Step 1. Create an SVG Document

Every SVG image begins with the <svg> element. It defines the drawing area and the coordinate system used by the snowflake.

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Your snowflake code will go here -->
</svg>

Let’s break down the purpose of each attribute:

• width and height define the display size of your SVG image on the page – in this case, 300x300 pixels. These values determine how large your snowflake appears in the browser;
• viewBox="0 0 300 300" defines the coordinate system used within the SVG image. The first two numbers (0 0) represent the upper-left corner of the canvas, and the next two (300 300) represent its width and height in coordinate units. With viewBox, your image can be scaled beautifully without losing clarity;
• xmlns="http://www.w3.org/2000/svg" tells the browser that this is an SVG document and ensures correct rendering.

Tip: Always define a viewBox. It lets the snowflake scale cleanly at different display sizes. For more detail, see SVG viewBox.

Step 2. Start with the Basic Branch

Choose the snowflake center first. In a 300x300 viewBox, the center is (150, 150). Instead of drawing all six branches manually, draw one branch and reuse it. The example uses a <path> element to draw lines:

<path id="b1" stroke="#03b6fd" stroke-linecap="round" stroke-width="10" fill="none" d="
  M 50,50 L 150,150
  M 50,80 L 80,80 L 80,50
  M 50,100 L 100,100 L 100,50
  M 80,120 L 120,120 L 120,80
  M 110,140 L 140,140 L 140,110" />

The path works as follows:

• Each M command of the d attribute moves the “pen” to a starting point.
• Each L command draws a straight line to the next coordinate.
• The stroke attribute defines the color as icy blue for the <path> element.
• The stroke-linecap creates smooth, rounded corners.

At this point, the SVG contains one branch, or one sixth of the final snowflake. You can change the branch style by editing path attributes such as stroke, stroke-width, stroke-linecap, stroke-dasharray, and fill.

The following figure shows snowflake branches with different styles applied to the <path> element.

a) The stroke-linecap="round" attribute, which is responsible for the rounded ends of the lines, is not used.
b) The stroke-linecap="round" attribute is used.
c) The fill color – fill="#03b6fd" is used instead of the transparent fill – fill="none".
d) The stroke-dasharray="2 8" attribute is used to change the branch appearance.

Step 3. Rotate the Branch to Build the Whole Snowflake

Reuse the branch with the <use> element instead of copying the same path data six times. A rotation transform places each copy around the center (150, 150):

<g id="snowflake1">
  <use href="#b1" />
  <use href="#b1" transform="rotate(60 150 150)" />
  <use href="#b1" transform="rotate(120 150 150)" />
  <use href="#b1" transform="rotate(180 150 150)" />
  <use href="#b1" transform="rotate(240 150 150)" />
  <use href="#b1" transform="rotate(300 150 150)" />
</g>

The result is six identical branches rotated around the same center point:

Step 4. Add More Decorations

To finish the icon, add a circle to the center for visual weight:

<circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3"/>

• cx and cy define the center of the circle – in this case, it’s right in the middle of our 300x300 viewBox.
• r is the radius.
• fill and stroke define its colors.

Now the snowflake is a complete vector drawing built from one reusable branch and one center decoration.

Step 5. Animate the Snowflake

To bring the snowflake to life, you can add a rotation animation directly to the SVG file using the <animateTransform> element. This method defines the animation behavior within the SVG file itself, making it completely self-contained and independent of external CSS. Place the <animateTransform> element directly inside the <g> group containing all the parts of your snowflake. This way, the entire group – all branches and decorations – will rotate around the center point (150, 150).

<g id="snowflake1">
  <!-- Rotation animation -->
  <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="30s" repeatCount="indefinite"/>

  <!-- Snowflake branches -->
  <use href="#b1" />
  <use href="#b1" transform="rotate(60 150 150)" />
  ...
</g>

• type="rotate" – defines the transformation type as rotation.
• from / to – specify the rotation angles and the center point of rotation (x y coordinates).
• dur="30s" – sets the duration of one full rotation.
• repeatCount="indefinite" – ensures the animation runs continuously.

The advantage of this animation approach is that it’s fully embedded within the SVG, making it independent of external styles and scripts, and ensuring consistent behavior across modern browsers, even when the SVG is used as an <img> tag or background image. The effect remains portable and self-contained so the snowflake will rotate anywhere on the display. However, it is less flexible than CSS animation, as each <animateTransform> element can only handle a single transform. More complex effects, such as scaling or fading, require additional elements.

Snowflake vector images are ideal for winter-themed websites, festive designs, and interactive elements – from animated loaders and repeating backgrounds to scalable graphics for digital cards and print materials. You can see the SVG image of the snowflake and the full SVG file by following the link – animated-snowflake.svg.

Optimize SVG Snowflakes for SEO and Accessibility

To maximize the SEO impact of using SVG snowflakes on your website:

1. Add title and description tags:

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <title>Decorative winter snowflake</title>
  <desc>Six-Pointed snowflake for winter holiday decor</desc>
  <!-- snowflake code -->
</svg>

1. Use semantic file names: save as winter-snowflake-icon.svg, not image1.svg.
2. Add alt text when embedding: <img src="winter-snowflake-icon.svg" alt="Blue crystalline winter snowflake">.
3. Optimize file size: remove unnecessary decimal places and spaces.

So, let’s write the full code for the SVG snowflake (animated-snowflake.svg). It looks like this:

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <title>Decorative winter snowflake</title>
  <desc>Six-Pointed snowflake for winter holiday decor</desc>

  <!-- Define snowflake branch (hidden, only for reference) -->
  <defs>
	<path id="b1" stroke="#03b6fd" stroke-linecap="round" stroke-width="10" fill="none" d="
	  M 50,50 L 150,150
	  M 50,80 L 80,80 L 80,50
	  M 50,100 L 100,100 L 100,50
	  M 80,120 L 120,120 L 120,80
	  M 110,140 L 140,140 L 140,110" />
  </defs>

  <!-- Rotating snowflake group -->
  <g id="snowflake1">
	<animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="30s" repeatCount="indefinite"/>
	<use href="#b1" />
	<use href="#b1" transform="rotate(60 150 150)" />
	<use href="#b1" transform="rotate(120 150 150)" />
	<use href="#b1" transform="rotate(180 150 150)" />
	<use href="#b1" transform="rotate(240 150 150)" />
	<use href="#b1" transform="rotate(300 150 150)" />
	<!-- Center decoration -->
	<circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3" />
  </g>
</svg>

Common Mistakes and Fixes

Problem	Cause	Solution
Snowflake branches rotate around the wrong point	rotate(angle) used without specifying the center – defaults to (0, 0) instead of the snowflake’s center	Always pass all three arguments: transform="rotate(60 150 150)", where 150 150 is the center of your viewBox.
Branch defined outside <defs> renders twice	<path id="b1"> placed directly in the SVG body is both rendered and reused via <use>	Wrap the branch definition in <defs>...</defs> – elements inside <defs> are not rendered until referenced by <use href="#b1">.
<use href="#b1"> does not display anything	href attribute not supported in older SVG 1.1 contexts (e.g., IE, some Android browsers)	Add the xlink:href="#b1" attribute alongside href for broader compatibility: <use href="#b1" xlink:href="#b1" />.
Center circle appears behind the branches	<circle> element placed before <use> elements in document order	Move <circle> after all <use> elements inside the <g> group – SVG renders in document order, last element is on top.
fill defaults to black, making the branch solid	fill="none" omitted from the <path> element	Explicitly set fill="none" on the branch <path> to render only the stroke lines: <path ... fill="none" stroke="#03b6fd" .../>.
Animation doesn’t work when SVG is used via <img>	CSS animation rules defined in an external stylesheet cannot affect SVG loaded as <img>	Use the built-in <animateTransform> element inside the SVG file itself – it works regardless of how the SVG is embedded.
Animation rotates around (0, 0) instead of the snowflake center	<animateTransform> uses from="0" / to="360" without a center point	Specify the center: from="0 150 150" and to="360 150 150" so the snowflake spins in place.
SVG is not indexed or read by search engines	No <title> or <desc> elements present; file saved with a generic name like image1.svg	Add <title> and <desc> inside <svg>, use a descriptive filename (e.g., winter-snowflake-icon.svg), and set alt text when embedding via <img>.

Quick Recipes

1. Eight-branch snowflake instead of six

Rotate by 45° increments instead of 60° for an eight-pointed snowflake:

<g>
  <use href="#b1" />
  <use href="#b1" transform="rotate(45 150 150)" />
  <use href="#b1" transform="rotate(90 150 150)" />
  <use href="#b1" transform="rotate(135 150 150)" />
  <use href="#b1" transform="rotate(180 150 150)" />
  <use href="#b1" transform="rotate(225 150 150)" />
  <use href="#b1" transform="rotate(270 150 150)" />
  <use href="#b1" transform="rotate(315 150 150)" />
</g>

2. Counter-rotating inner layer

Add a second, smaller branch group that spins in the opposite direction for a layered effect:

<g>
  <animateTransform attributeName="transform" type="rotate"
    from="0 150 150" to="360 150 150"
    dur="30s" repeatCount="indefinite" />
  <use href="#b1" />
  <use href="#b1" transform="rotate(60 150 150)" />
  <use href="#b1" transform="rotate(120 150 150)" />
  <use href="#b1" transform="rotate(180 150 150)" />
  <use href="#b1" transform="rotate(240 150 150)" />
  <use href="#b1" transform="rotate(300 150 150)" />
</g>
<g>
  <animateTransform attributeName="transform" type="rotate"
    from="360 150 150" to="0 150 150"
    dur="20s" repeatCount="indefinite" />
  <use href="#b2" />
  <use href="#b2" transform="rotate(60 150 150)" />
  <use href="#b2" transform="rotate(120 150 150)" />
  <use href="#b2" transform="rotate(180 150 150)" />
  <use href="#b2" transform="rotate(240 150 150)" />
  <use href="#b2" transform="rotate(300 150 150)" />
</g>

Define #b2 as a shorter, thinner branch in <defs> to visually distinguish the two layers.

3. Randomize branch offset with <g transform="rotate(30 150 150)">

Rotate the entire snowflake group by 30° so branches fall between the axes – useful when tiling multiple snowflakes to avoid visual alignment:

<g transform="rotate(30 150 150)">
  <use href="#b1" />
  <use href="#b1" transform="rotate(60 150 150)" />
  <!-- remaining branches -->
</g>

4. Reuse the snowflake across the page with <symbol>

Define the snowflake once as a <symbol> and stamp it anywhere at any size without repeating code:

<defs>
  <symbol id="snowflake" viewBox="0 0 300 300">
    <use href="#b1" />
    <use href="#b1" transform="rotate(60 150 150)" />
    <use href="#b1" transform="rotate(120 150 150)" />
    <use href="#b1" transform="rotate(180 150 150)" />
    <use href="#b1" transform="rotate(240 150 150)" />
    <use href="#b1" transform="rotate(300 150 150)" />
    <circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3" />
  </symbol>
</defs>

<!-- Stamp at different sizes and positions -->
<use href="#snowflake" x="0"   y="0"   width="80"  height="80" />
<use href="#snowflake" x="100" y="50"  width="120" height="120" />
<use href="#snowflake" x="220" y="10"  width="60"  height="60" />

Copy the snippet you need and adjust coordinates, colors, or timing as required.

FAQ – SVG Snowflakes

What SVG elements are used to draw a snowflake?

A compact snowflake usually uses <path> for one branch, <defs> for the reusable branch definition, <use> for repeated branches, transform="rotate(...)" for symmetry, and optional <circle> or <animateTransform> elements for decoration and motion.

Why use defs and use for a snowflake?

<defs> and <use> keep the SVG smaller and easier to edit. You define one branch once, then reuse it at different rotation angles instead of copying the same path data many times.

Can I use this SVG snowflake as an icon or background?

Yes. Keep the viewBox, use a descriptive file name, and embed the SVG with meaningful alt text when using <img>. For backgrounds or decorative graphics, keep the path simple and avoid heavy filters.

Can I animate an SVG snowflake without CSS?

Yes. Add <animateTransform> inside the snowflake group to rotate the SVG in a self-contained way. This is useful when the SVG should animate even when embedded as an image file.

Key Takeaways

1. When creating snowflakes in an SVG file, keep the code clean and reusable. Define repeating elements (such as branches) with the <defs> and <use> tags to reduce file size and make updating easier.
2. Assign id values ​​(e.g. <path id="b1"> or <g id="snowflake1">) when you need to reference or animate specific parts of the SVG file.
3. Always define a viewBox to ensure your snowflake scales correctly on different screens and resolutions without losing its proportions.
4. Remember: real snowflakes are never identical, so don’t be afraid to experiment with asymmetrical details while maintaining the overall six-sided structure!
5. Optimize performance. Create simple paths and avoid unnecessary points and complex filters. Lightweight SVG images render faster, and animations are smoother.

Related Resources

Use these related resources when you want to understand or extend the snowflake workflow:

• SVG 2 Document Structure specification defines reusable elements such as <defs>, <use>, and <symbol> in SVG.
• SVG Coordinate Systems and Units explains the coordinate system used to position and rotate branches.
• SVG viewBox explains how the viewBox makes SVG artwork scale cleanly.
• SVG Path Data explains the M and L commands used in the branch path.
• Basic SVG Transformations covers the rotate(angle cx cy) transform used to build the snowflake.
• Fills and Strokes in SVG explains stroke width, line caps, dash patterns, and fill behavior.
• How to Work with Aspose.SVG for .NET API explains programmatic SVG creation and editing workflows in C#.