%fieldset
	.container
		.svg
			%input#radio-svg{:type => "radio", :name => "option"}
			%div
			%svg{:viewBox => "0 0 24 24"}
				- 2.times do
					%circle{:cx => "12", :cy => "12", :r => "8"}
		%label{:for => "radio-svg"} SVG
View Compiled
// colors
$blue: #07f;
$grey: #eee;
$slate: #343434;

// gutter, padding, margin
$p: 12px;

fieldset {
	.container {
		display: flex;
		align-items: center;
		align-content: center;
	}
	label {
		cursor: pointer;
		margin-left: $p/2;
	}
}

.svg {
	// setup for positioning
	position: relative;
	overflow: hidden;
	border-radius: 100%;
	input {
		// hides and positions the input on top of the visuals
		cursor: pointer;
		appearance: none;
		opacity: 0;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	div {
		// radio background, darker grey
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: mix($slate, $grey, 20%);
	}
	svg {
		position: relative;
		z-index: 2;
		display: block;
		width: 24px;
		height: 24px;
		circle {
			&:nth-child(1) {
				// radio circle, lighter grey
				fill: mix(white, $slate, 80%);
			}
			&:nth-child(2) {
				// selected circle, hidden for now
				transform-origin: center center;
				transform: scale(0);
				fill: $blue;
			}
		}
	}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Libre+Franklin:100,200,300,400,500,600
  2. https://codepen.io/tutsplus/pen/598c614630b8b6882828b40d33bdbf3a

External JavaScript

This Pen doesn't use any external JavaScript resources.