Skip to content

Instantly share code, notes, and snippets.

@jekkilekki
Last active December 18, 2016 11:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jekkilekki/a2d14f2f9cdbfbfec267dca9204f6b1c to your computer and use it in GitHub Desktop.
Save jekkilekki/a2d14f2f9cdbfbfec267dca9204f6b1c to your computer and use it in GitHub Desktop.
SVG to create true round-dotted borders
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Source: https://medium.com/@luclemo/creating-true-dotted-borders-with-css-233f296d8145#.mduvohtct -->
<title>dots</title>
<desc>Use to create true round-dotted border.</desc>
<g id="dotted-border-shape" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="dotted-border" class="dotted-border" sketch:type="MSArtboardGroup" transform="translate(-140.000000, -154.000000)">
<g id="dots" sketch:type="MSLayerGroup" transform="translate(140.000000, 154.000000)" fill="#ffffff">
<g id="dot" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
<g id="dot" transform="translate(0.000000, 20.000000)" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
<g id="dot" transform="translate(0.000000, 10.000000)" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
<g id="dot" transform="translate(10.000000, 0.000000)" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
<g id="dot" transform="translate(10.000000, 20.000000)" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
<g id="dot" transform="translate(20.000000, 0.000000)" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
<g id="dot" transform="translate(20.000000, 20.000000)" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
<g id="dot" transform="translate(20.000000, 10.000000)" sketch:type="MSShapeGroup">
<g>
<circle cx="2.5" cy="2.5" r="2.5"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment