persona wheel
by ordette
HTML
<div>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 620 620" style="enable-background:new 0 0 620 620;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{fill:#383838;}
.st2{display:inline;}
.st3{opacity:0.7;fill:#4178BE;enable-background:new ;}
.st4{opacity:0.7;fill:#6EEDD8;enable-background:new ;}
.st5{opacity:0.7;fill:#F6921E;enable-background:new ;}
.st6{opacity:0.7;fill:#DB2780;enable-background:new ;}
.st7{clip-path:url(#SVGID_2_);fill:#EFEFF0;}
.st8{clip-path:url(#SVGID_4_);fill:#EFEFF0;}
.st9{clip-path:url(#SVGID_6_);fill:#F0F0F1;}
.st10{clip-path:url(#SVGID_8_);fill:#F2F2F3;}
.st11{clip-path:url(#SVGID_10_);fill:#F3F3F4;}
.st12{clip-path:url(#SVGID_12_);fill:#F4F4F5;}
.st13{clip-path:url(#SVGID_14_);fill:#F6F6F6;}
.st14{clip-path:url(#SVGID_16_);fill:#F7F7F7;}
.st15{clip-path:url(#SVGID_18_);fill:#F8F8F8;}
.st16{clip-path:url(#SVGID_20_);fill:#F9F9F9;}
.st17{clip-path:url(#SVGID_22_);fill:#FAFAFA;}
.st18{clip-path:url(#SVGID_24_);fill:#FBFBFB;}
.st19{clip-path:url(#SVGID_26_);fill:#FCFCFC;}
.st20{clip-path:url(#SVGID_28_);fill:#FDFDFD;}
.st21{clip-path:url(#SVGID_30_);fill:#FEFEFE;}
.st22{clip-path:url(#SVGID_32_);fill:#FFFFFF;}
.st23{clip-path:url(#SVGID_34_);fill:#FFFFFF;}
.st24{clip-path:url(#SVGID_36_);fill:#FFFFFF;}
.st25{clip-path:url(#SVGID_38_);fill:#FFFFFF;}
.st26{fill:#152935;}
</style>
<g id="Layer_1_1_" class="st0">
</g>
<g id="Layer_2">
<g>
<g>
<path class="st1" d="M405.1,295.5l-0.2-1c16.5-2.9,161.1-28.7,162.1-28.7v1C565,267,406.7,295.2,405.1,295.5z"/>
</g>
</g>
<g>
<g>
<rect x="343.9" y="168.5" transform="matrix(0.6381 -0.77 0.77 0.6381 23.178 387.2672)" class="st1" width="159.3" height="1"/>
</g>
</g>
<g>
<g>
<rect x="302.5" y="45"...
SCSS
svg {
position: absolute;
}
div {
position: relative;
}