SVG Playground

In this example below you will see how to do a SVG Playground with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dictor, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dictor ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG Playground</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- <div class="svg-wrapper" >
  <svg width="300" height="300" viewBox="0 0 300 300">
    <defs>
      <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
        <image x="0" y="0" xlink:href="https://cms.capitoltechsolutions.com/ClientData/EffieYeaw/uploads/morning.jpg"></image>
      </pattern>
    </defs> 
    <g fill="transparent" stroke="violet" >      
      <circle r="50%" cx="50%" cy="50%"/>
      <circle r="45%" cx="50%" cy="50%"/>
      <circle r="40%" cx="50%" cy="50%"/>
      <circle r="35%" cx="50%" cy="50%"/>
      <circle r="30%" cx="50%" cy="50%"/>
      <circle r="25%" cx="50%" cy="50%"/>
      <circle r="20%" cx="50%" cy="50%" fill="url(#image)"/>
    </g>
    <g class="windrose" fill="transparent" stroke="green" stroke-width="3">
      <circle r="25%" cx="50%" cy="50%"/>
    </g>
  </svg>
</div>

<div class="svg-wrapper" >
  <svg width="300" height="300" viewBox="0 0 300 300">
    <defs>
      <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
        <image x="0" y="0" xlink:href="https://cms.capitoltechsolutions.com/ClientData/EffieYeaw/uploads/morning.jpg"></image>
      </pattern>
    </defs> 
    <g fill="none" stroke="violet" >      
      <circle r="50%" cx="50%" cy="50%"/>
      <circle r="45%" cx="50%" cy="50%"/>
      <circle r="40%" cx="50%" cy="50%"/>
      <circle r="35%" cx="50%" cy="50%"/>
      <circle r="30%" cx="50%" cy="50%"/>
      <circle r="25%" cx="50%" cy="50%"/>
      <circle r="20%" cx="50%" cy="50%" fill="url(#image)"/>
    </g>
    <g class="cross" stroke="violet" stroke-width="1">
      <path  d="M150,0  150,300" />
      <path  d="M0,150  300,150" />
    </g>
    <g class="windrose" fill="none" stroke="green" stroke-width="3">
      <circle r="25%" cx="50%" cy="50%"/>
      <path  d="M100,45  200,45" />
    </g>
  </svg>
</div> -->

<!-- <div class="svg-wrapper">
  <svg width="300" height="300" viewBox="0 0 300 300">
    <defs>
      <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
        <image x="0" y="0" xlink:href="https://cms.capitoltechsolutions.com/ClientData/EffieYeaw/uploads/morning.jpg"></image>
      </pattern>
    </defs> 
    <g fill="none" stroke="violet" >      
      <circle r="50%" cx="50%" cy="50%"/>
      <circle r="45%" cx="50%" cy="50%"/>
      <circle r="40%" cx="50%" cy="50%"/>
      <circle r="35%" cx="50%" cy="50%"/>
      <circle r="30%" cx="50%" cy="50%"/>
      <circle r="25%" cx="50%" cy="50%"/>
      <circle r="20%" cx="50%" cy="50%" fill="url(#image)"/>
    </g>
    <g class="cross" stroke="violet" stroke-width="1">
      <path  d="M150,0 150,300" />
      <path  d="M0,150 300,150" />
    </g>
    <g class="windrose" fill="none" stroke="green" stroke-width="3">
      <path  d="M150,0 300,150 150,300 0,150 150,0" />
    </g>
  </svg>
</div> -->



<div class="svg-wrapper">
  <svg width="300" height="300" viewBox="0 0 300 300">
    <defs>
      <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
        <image x="0" y="0" xlink:href="https://cms.capitoltechsolutions.com/ClientData/EffieYeaw/uploads/morning.jpg"></image>
      </pattern>
    </defs> 
    <g fill="none" stroke="violet" >      
      <circle r="50%" cx="50%" cy="50%"/>
      <circle r="45%" cx="50%" cy="50%"/>
      <circle r="40%" cx="50%" cy="50%"/>
      <circle r="35%" cx="50%" cy="50%"/>
      <circle r="30%" cx="50%" cy="50%"/>
      <circle r="25%" cx="50%" cy="50%"/>
      <circle r="20%" cx="50%" cy="50%" fill="url(#image)"/>
    </g>
    <g class="cross" stroke="violet" stroke-width="1">
      <path  d="M150,0 150,300" />
      <path  d="M0,150 300,150" />
    </g>
    <g class="windrose" fill="none" stroke="green" stroke-width="3">
      <path  d="M20,50 C40,20 75,20 100,50 110,60 120,50 20,50" />
    </g>
  </svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dictor/svg-playground-ZxPKGg */
.svg-wrapper {
  margin: 40px auto;
  width: 300px;
  height: 300px;
  background: #eee;
}

Comments