SVG Color Wheel

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div>'
<h1>
hi
</h1>
</div>
<div class="pointer" style="left: 21.692%; top: 80.303%;">
  <div class="shape shape1"></div>
  <div class="shape shape2"></div>
</div>

CSS

.pointer {
  width: 100px;
  height: 100px;
}

.pointer .shape {
    position: absolute;
}

.pointer .shape1 {
    margin-left: -12px;
    margin-top: -12px;
    width: 18px;
    height: 18px;
    border: 3px solid #3f3844;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.pointer .shape2 {
    margin-left: -9px;
    margin-top: -9px;
    width: 12px;
    height: 12px;
    border: 3px solid white;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

JavaScript

$('.pointer').draggable();