Periodic dot and symbol pattern generator
Patterns are a common tool in classical printed maps to indicate different types of areas with a limited set of colors. They have gone a bit out of fashion in digital maps and if patterns are used there they are often regular grid patterns. Somewhat more elaborate information on the subject can be found in this blog post. Here you can find a tool to generate visually irregular periodic patterns as SVG files.
This tool generates a irregular but uniformly distributed dot pattern with periodic boundary conditions and symbol patterns based on it for use in map rendering. It does so by first producing a randomly displaced grid pattern (generate) and then relaxing the points to maximize their distance (relax, can be applied multiple times). It also produces SVGs placing symbols at the point locations including the periodic duplicates necessary for a seamless pattern (render) and can print out the raw point location list (point list).
If you want to modify or extend the functionality you can find the source code on github. Licensed under AGPL. Symbols are CC0 but it would be much appreciated if you credit me and support work on jsdotpattern with a donation using the link on the right in case you use some of the more elaborate stuff in your map designs.
| dot pattern: | symbol pattern: | symbol definition: |
|
|
basic use instructions:
The following buttons are available:
- generate generates a new random point set. This (or the next) should be done before any of the other buttons is used.
- ‣/∇/☐ generates a new regular grid point set. The triangular grids are distorted as needed to fit the square pattern.
Be aware that the triangular patterns are only truly periodic for certain distance values. - relax relaxes the point positions by maximizing their distance.
- relax ×10 relaxes ten times.
- shake displaces the points of the current set each by a small random distance.
- jitter displaces the points of the current set each by a sub pixel distance to randomize pixel alignment
- render renders the current point pattern in a svg using the symbol specified on the right.
- render (px aligned) renders the current point pattern aligned to integer pixel coordinates.
- render (inlined) renders the current point pattern aligned to integer pixel coordinates and inlines the symbols instead of referencing them.
- show displays the entered svg symbol and calculates offsets to center it.
The following input fields are available:
- distance specifies the dot distance for the initial generation of the points.
- radius is the influence radius of the points during relaxation. Should be larger than distance, needs to be a power of two and less than half the pattern size.
- radius y a different radius can be specified for the vertical direction, can be used for anisotropic patterns. No larger than nradius but does not need to be a power of two.
- metric specifies the metric for distance calculation. The default of 2 means normal euclidian metric.
- casing when >0 a white casing is drawn in that width during rendering below every symbol to separate it from other symbols in case of overlap.
- offset specifies an offset for the symbol used when rendering it in the pattern.
- scale specifies a scale factor for the symbol when used in the pattern.
Visitor comments:
By submitting your comment you agree to the privacy policy and agree to the information you provide (except for the email address) to be published on this website.