Creating patterns

Patterns can be use to fill any object ( rectangles, ellipses, circles, polygons, closed paths ..... )

The tools

Move an object
Draw a rectangle
Draw an ellipse
Draw a polygon
Draw a polyline
Draw a Bezier's curve
Modify an object
Delete an object
Fill a form with choosed color
Stroke with choosed color
Rotate an object ( direct )
Rotate an object ( inverse )
Give code for pattern in HTML form
Help

Create a pattern

You can draw.
Rectangles
Click top left vertice and enlarge by moving mouse, left button pressed.
Ellipses
Click center and enlarge by moving mouse, left button pressed.
Polygons and polylines
Click vertices, to finish click twice on last vertice.
Bezier's curves
Click first point, move to see curve, click for other points, to finish click twice on last point.

By default, polylines and Bezier's curves are not filled. 
You can give a color for filling.

You can move this objects by clicking on object and moving mouse, left button pressed.

You can modify this objects,
For polygons, ellipses and rectangles:
Click an object and left button pressed, move mouse to modify height and width.
For polylines and Bezier's curves
By clicking on object, control points ( red circles ) are drawed and can be moved.

To delete an object, choose icon and click on object.

To rotate an object, choose icon and click on object ( direct or inverse )

To change color of filling or stroking, choose icon and click on object.

You can change active color or for filling create lineargradient or radialgradient

In real time, you can see your tile on right square of canvas.

You can know code of pattern for your tile in HTML form. You can paste and copy the code in other SVG file.

Code in SVG
Pattern is in a tag <defs>  </defs> with an id:
<defs>
<pattern id="motif1" x="0" y="0" width="10" height="10" overflow="visible">
<path d="M0 10 l10 -10" style="stroke:black;stroke-width:1" />
</pattern>
</defs>

To fill object with this pattern:
<rect x="0" y="0" width="100" height="100" style="fill:url(#motif1); stroke:black;"/>