Skip to content

Instantly share code, notes, and snippets.

@Septdir
Last active December 1, 2022 04:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Septdir/f5c146ddbdc8e861beed6f08f6ea7d6a to your computer and use it in GitHub Desktop.
Save Septdir/f5c146ddbdc8e861beed6f08f6ea7d6a to your computer and use it in GitHub Desktop.
Map cluster icon generator
<?php
header('Content-type: image/svg+xml');
$fill = (!empty($_GET['fill'])) ? '#' . str_replace('#', '', $_GET['fill']) : '#000000';
$size = (isset($_GET['size']) && (int) $_GET['size']) ? (int) $_GET['size'] : 120;
?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 200 200"
width="<?php echo $size; ?>" height="<?php echo $size; ?>">
<defs>
<g id="marker" transform="rotate(45)">
<path d="M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z" fill-opacity="0.7"/>
<path d="M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z" fill-opacity="0.5"/>
<path d="M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z" fill-opacity="0.3"/>
</g>
</defs>
<g fill="<?php echo $fill; ?>">
<circle r="42"/>
<g>
<use xlink:href="#marker"/>
</g>
<g transform="rotate(120)">
<use xlink:href="#marker"/>
</g>
<g transform="rotate(240)">
<use xlink:href="#marker"/>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment