Skip to content

Instantly share code, notes, and snippets.

@andyfitz

andyfitz/svg-dots.html

Created July 8, 2014 19:06
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 andyfitz/8ee3d5254fb6ae8597f3 to your computer and use it in GitHub Desktop.
Save andyfitz/8ee3d5254fb6ae8597f3 to your computer and use it in GitHub Desktop.
Download ZIP
Dots using SVG path
Raw
svg-dots.html
<html>
<head>
<style>
path{
stroke:#d3d6d9;
transition:stroke-width .6s cubic-bezier(0,.72,.25,1.25) ;
stroke-width:3px;
stroke-linecap:round;}
svg:hover path{
stroke-width:16px;
stroke:#567;
</style>
</head>
<body>
<svg height="460" width="460" viewbox="0 0 60 60">
<path
d="
M10 10 T 10 10,
M20 10 T 20 10,
M30 10 T 30 10,
M40 10 T 40 10,
M50 10 T 50 10,
M10 20 T 10 20,
M20 20 T 20 20,
M30 20 T 30 20,
M40 20 T 40 20,
M50 20 T 50 20,
M10 30 T 10 30,
M20 30 T 20 30,
M30 30 T 30 30,
M40 30 T 40 30,
M50 30 T 50 30,
M10 40 T 10 40,
M20 40 T 20 40,
M30 40 T 30 40,
M40 40 T 40 40,
M50 40 T 50 40,
M10 50 T 10 50,
M20 50 T 20 50,
M30 50 T 30 50,
M40 50 T 40 50,
M50 50 T 50 50 Z
"
/>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment