<!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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
