Geo-Visualization Tools

Periodic dot and symbol pattern generator

Jsdotpattern may be freely used by anyone, its code is available under the AGPL for custom modifications and the symbols may be used under the CC0 license. Programming and designing symbols takes a lot of time though. If you find this tool useful please consider supporting my work using the following link:

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:
offset: scale: random rotate
point generation distance:
relaxation radius: radius y: metric:
rendering casing:
get pattern SVG data pattern size: 64 | 128 | 256 | 512 | 1024
command sequence:
command sequence replay does not work with manually entered symbols!

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.
  • 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 dieterdreist from Italy posted on Mon Sep 15 2014 09:03:20
Cooles kleines Script, macht Spass, damit zu experimentieren...
by dieterdreist from Italy posted on Fri Aug 7 2015 11:47:30
Das "klein" würde ich mittlerweile gerne rausnehmen, nachdem die Funktionalität zwischenzeitlich extrem erweitert wurde ;-)
Leave a comment
You have to enable Javascript to be able to write comments.
human verification Please enter the code you can see in the image on the left to verify you are a human and not a spamming script.
* * Required field
Information about you
will not be made public
will be displayed with your posting
Your comment (no HTML)


If you want to send a private message to the author of this website you can do so via Email.

The comments will be reviewed before they are added to the site. So you might need to wait some time until your entry turns up.

Please note this comment function is intended for commenting on the text and images, not for discussing political or religious views. Comments with no relation to the content of this site will not be approved.