Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="watch">
	<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve">

	<defs>
		<clipPath id="clipPath">
			<polygon id="clipPathDish" points="16.1,180 16.1,60 120,0 223.9,60 223.9,180 120,240"/>
		</clipPath>
	</defs>

	<polygon id="Dish" class="Dish" points="16.1,180 16.1,60 120,0 223.9,60 223.9,180 120,240"/>
	
	<g class="Grid-positive">
		<g>
			<circle cx="120" cy="120" r="2"/>
			<circle cx="120" cy="140" r="1"/>
			<circle cx="120" cy="180" r="1.5"/>
			<circle cx="120" cy="200" r="1"/>
			<circle cx="120" cy="160" r="1"/>
			<circle cx="120" cy="220" r="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 163.9226)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 143.9226)" cx="102.7" cy="110" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 103.9226)" cx="68" cy="90" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 83.9226)" cx="50.7" cy="80" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 123.9226)" cx="85.4" cy="100" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 63.9226)" cx="33.4" cy="70" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 153.9226)" cx="111.3" cy="115" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 133.9226)" cx="94" cy="105" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 113.9226)" cx="76.7" cy="95" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 93.9226)" cx="59.4" cy="85" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 73.9226)" cx="42.1" cy="75" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 53.9226)" cx="24.7" cy="65" rx="1" ry="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -43.9228 76.0771)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -32.9421 87.0578)" cx="146" cy="105" rx="1" ry="1"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -21.9613 98.0386)" cx="172" cy="90" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -10.9806 109.0194)" cx="197.9" cy="75" rx="1" ry="1"/>
		</g>
		<g>
			<circle cx="120" cy="120" r="2"/>
			<circle cx="120" cy="90" r="1"/>
			<circle cx="120" cy="60" r="1.5"/>
			<circle cx="120" cy="30" r="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -43.9228 76.0771)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -54.9036 65.0963)" cx="94" cy="135" rx="1" ry="1"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -65.8844 54.1156)" cx="68" cy="150" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -76.8651 43.1348)" cx="42.1" cy="165" rx="1" ry="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 163.923)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 193.923)" cx="146" cy="135" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 223.923)" cx="172" cy="150" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 253.923)" cx="197.9" cy="165" rx="1" ry="1"/>
		</g>
		
		<g>
			<path d="M222.6,179.2c-0.4,0.7-0.2,1.6,0.5,2c0,0,0,0,0,0c0.5-0.9,1-1.7,1.5-2.6c0,0,0,0,0,0C224,178.3,223,178.5,222.6,179.2z"
				/>
			<path d="M17.4,60.8c0.4-0.7,0.2-1.6-0.5-2c0,0,0,0,0,0c-0.5,0.9-1,1.7-1.5,2.6c0,0,0,0,0,0C16,61.7,17,61.5,17.4,60.8z"/>
			<path d="M17.4,179.2c-0.4-0.7-1.3-1-2-0.5c0,0,0,0,0,0c0.5,0.9,1,1.7,1.5,2.6c0,0,0,0,0,0C17.5,180.9,17.8,180,17.4,179.2z"/>
			<path d="M222.6,60.8c0.4,0.7,1.3,1,2,0.5c0,0,0,0,0,0c-0.5-0.9-1-1.7-1.5-2.6c0,0,0,0,0,0C222.5,59.1,222.2,60,222.6,60.8z"/>
			<path d="M120,238.5c-0.8,0-1.5,0.7-1.5,1.5c0.5,0,1,0,1.5,0s1,0,1.5,0C121.5,239.2,120.8,238.5,120,238.5z"/>
			<path d="M120,1.5c0.8,0,1.5-0.7,1.5-1.5c-0.5,0-1,0-1.5,0s-1,0-1.5,0C118.5,0.8,119.2,1.5,120,1.5z"/>
		</g>
	</g>

	<g class="Grid-negative">
		<g>
			<circle cx="120" cy="120" r="2"/>
			<circle cx="120" cy="140" r="1"/>
			<circle cx="120" cy="180" r="1.5"/>
			<circle cx="120" cy="200" r="1"/>
			<circle cx="120" cy="160" r="1"/>
			<circle cx="120" cy="220" r="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 163.9226)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 143.9226)" cx="102.7" cy="110" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 103.9226)" cx="68" cy="90" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 83.9226)" cx="50.7" cy="80" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 123.9226)" cx="85.4" cy="100" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 63.9226)" cx="33.4" cy="70" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 153.9226)" cx="111.3" cy="115" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 133.9226)" cx="94" cy="105" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 113.9226)" cx="76.7" cy="95" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 93.9226)" cx="59.4" cy="85" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 73.9226)" cx="42.1" cy="75" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.9229 53.9226)" cx="24.7" cy="65" rx="1" ry="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -43.9228 76.0771)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -32.9421 87.0578)" cx="146" cy="105" rx="1" ry="1"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -21.9613 98.0386)" cx="172" cy="90" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -10.9806 109.0194)" cx="197.9" cy="75" rx="1" ry="1"/>
		</g>
		<g>
			<circle cx="120" cy="120" r="2"/>
			<circle cx="120" cy="90" r="1"/>
			<circle cx="120" cy="60" r="1.5"/>
			<circle cx="120" cy="30" r="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -43.9228 76.0771)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -54.9036 65.0963)" cx="94" cy="135" rx="1" ry="1"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -65.8844 54.1156)" cx="68" cy="150" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -76.8651 43.1348)" cx="42.1" cy="165" rx="1" ry="1"/>
		</g>
		<g>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 163.923)" cx="120" cy="120" rx="2" ry="2"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 193.923)" cx="146" cy="135" rx="1" ry="1"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 223.923)" cx="172" cy="150" rx="1.5" ry="1.5"/>
			<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -43.923 253.923)" cx="197.9" cy="165" rx="1" ry="1"/>
		</g>
		
		<g>
			<path d="M222.6,179.2c-0.4,0.7-0.2,1.6,0.5,2c0,0,0,0,0,0c0.5-0.9,1-1.7,1.5-2.6c0,0,0,0,0,0C224,178.3,223,178.5,222.6,179.2z"
				/>
			<path d="M17.4,60.8c0.4-0.7,0.2-1.6-0.5-2c0,0,0,0,0,0c-0.5,0.9-1,1.7-1.5,2.6c0,0,0,0,0,0C16,61.7,17,61.5,17.4,60.8z"/>
			<path d="M17.4,179.2c-0.4-0.7-1.3-1-2-0.5c0,0,0,0,0,0c0.5,0.9,1,1.7,1.5,2.6c0,0,0,0,0,0C17.5,180.9,17.8,180,17.4,179.2z"/>
			<path d="M222.6,60.8c0.4,0.7,1.3,1,2,0.5c0,0,0,0,0,0c-0.5-0.9-1-1.7-1.5-2.6c0,0,0,0,0,0C222.5,59.1,222.2,60,222.6,60.8z"/>
			<path d="M120,238.5c-0.8,0-1.5,0.7-1.5,1.5c0.5,0,1,0,1.5,0s1,0,1.5,0C121.5,239.2,120.8,238.5,120,238.5z"/>
			<path d="M120,1.5c0.8,0,1.5-0.7,1.5-1.5c-0.5,0-1,0-1.5,0s-1,0-1.5,0C118.5,0.8,119.2,1.5,120,1.5z"/>
		</g>
	</g>
</svg>
</div>
              
            
!

CSS

              
                body {
	background: #ebe9ea;
}

#svg {
	height: 240px;
	width: 240px;
}

.Dish {
	fill: #fff;
}

.Grid-positive {
	fill: #fff;
}

.Grid-negative {
	clip-path: url("#clipPath");
}

#watch {
	background: url('data:image/jpeg;base64,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') center no-repeat;
	box-sizing: border-box;
	height: 600px;
	margin: 0 auto;
	padding: ((600px - 240px) / 2 - 15) (600px - 240px) / 2;
	width: 600px;
}
              
            
!

JS

              
                var maxPoints = [{
	x: 16.1,
	y: 180
}, {
	x: 16.1,
	y: 60
}, {
	x: 120,
	y: 0
}, {
	x: 223.9,
	y: 60
}, {
	x: 223.9,
	y: 180
}, {
	x: 120,
	y: 240
}];

var values = [
	// steps
	7512,
	23,
	// calories
	1800,
	59,
	// sleep (hours)
	7,
	59
];

// what is 100% for each point
var maximums = [
	10000,
	// 12h format
	12,
	2500,
	60,
	8,
	60
];

// axis center
var originPoint = {
	x: 120,
	7: 120
};

var tickInterval;

var tick = function() {
	var date = new Date();
	var currentPoints = [];

	// arbitrarily set some value
	values = [
		7512,
		date.getHours(),
		1800,
		date.getMinutes(),
		6,
		date.getSeconds()
	];

	maxPoints.forEach(function(point, index) {
		currentPoints.push(getPosition(point, index));
	});

	setPoints(currentPoints);
};

var getPosition = function(point, index) {
	var value = values[index];
	var maximum = maximums[index];

	// special case for Hour, where we are using 12h time
	if (index === 1) {
		value = value % 12;
	}

	return {
		x: 120 - (120 - point.x) / maximum * value,
		y: 120 - (120 - point.y) / maximum * value
	}
	return;
};

var setPoints = function(points) {

	var hexagon = document.getElementById('Dish');
	var cpHexagon = document.getElementById('clipPathDish');

	points.forEach(function(point, index) {
		hexagon.points[index].x = point.x;
		hexagon.points[index].y = point.y;

		cpHexagon.points[index].x = point.x;
		cpHexagon.points[index].y = point.y;
	});
};

tickInterval = window.setInterval(tick, 1000);
              
            
!
999px

Console