Dynamic maps

HTML & CSS
28

I made a simple SVG path creator for personal use.

Here is an example that I made with it…

https://codepen.io/coothead/full/JjGoMbx

…from this basic image…

star
star600×620 28 KB

…and the creator code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<style media="screen">
html,body{
    margin:0;
    height:100%;
}
#path {
    display:flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    background-color: #000;
    color:#fff;
    cursor: pointer;
}
#container{
    background-color:#fee;
 }
</style>

</head>
<body> 

<div id="path"></div>

<div id="container">
 <img src="star.jpg" width="600" height="620">
</div>

<script>
( function(  d ) {
   var coords = [];
   d.getElementById( 'container' ).addEventListener( 'click',
      function(e){
         coords.push( e.pageX );
         coords.push( e.pageY - d.getElementById( 'path' ).offsetHeight );
         d.getElementById( 'path' ).textContent = 
		 '\<path d="M' + coords + 'z" fill="transparent" stroke="#000"/\>';
      }, false );
} ( document ) );
</script>

</body>
</html>

coothead