- var smin = .10, smax = .57, sval = .50;
- var hmin = .05, hmax = .27, hval = .25;

form
	section.wrap(style=`--min:${smin};--max:${smax};--val:${sval}`)
		input#sf(type='range' min=smin max=smax value=sval step=.01)
		label(for='sf') star
	section.wrap(style=`--min:${hmin};--max:${hmax};--val:${hval}`)
		input#hf(type='range' min=hmin max=hmax value=hval step=.01)
		label(for='hf') heart

svg
	path#sg
	path#hg
View Compiled
$demo-lh: 1.25;
$demo-dark: #262626;
$demo-light: invert($demo-dark);
$demo-ll: #555;
$demo-hl: #f90;
$ctrl-pad: .5em;
$ctrl-wmax: 20em;
$ctrl-hmax: 8em;

$lbl-w: 4em;

$thumb-d: 1.25em;
$thumb-r: .5*$thumb-d;

$track-h: 6px;
$track-r: .5*$track-h;
$track-m: calc((100% - #{$thumb-d}));
$track-s: calc(#{$track-m}/var(--range));
$track-x: calc(#{-$track-r} - .5*#{$track-m}/var(--range));

$t: .3s;

@mixin track {
	border: none;
	width: 100%; height: $track-h;
	border-radius: $track-r;
	background: $demo-ll;
}

@mixin thumb {
	box-sizing: border-box;
  border: solid .25*$thumb-d $demo-dark;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: $demo-ll content-box;
	transition: $t;
	transition-property: border-width, background-color
}

@mixin thumb-focus {
	border-width: 0;
	background: $demo-hl
}

* {
	margin: 0;
	font: inherit
}

body {
	display: flex;
	overflow: hidden;
	height: 100vh;
	font: 1.25em/ #{$demo-lh} trebuchet ms, tahoma sans-serif;
	
	@media (max-aspect-ratio: 5/4) {
		flex-direction: column;
		
		form {
			border: solid 0 $demo-dark;
			border-width: 0 calc(50vw - #{$ctrl-wmax});
			width: auto; max-width: 2*$ctrl-wmax;
			
			@media (max-width: 570px) {
				flex-direction: column;
				
				section { width: calc(100% - #{$ctrl-pad}) }
			}
		}
		
		section {
			width: calc(50% - #{$ctrl-pad});
			
			@media (max-width: 380px) {
				flex-direction: column;
				align-items: flex-start;
				
				input { width: 100% }
				
				label { text-align: left; }
			}
		}
	}
}

form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border: solid 0 $demo-dark;
	border-width: calc(50vh - #{.5*$ctrl-hmax}) 0;
	padding: $ctrl-pad;
	width: 25%;
	max-width: $ctrl-wmax; max-height: $ctrl-hmax;
	background: $demo-dark;
	color: $demo-light;
}

section {
	--range: calc(var(--max) - var(--min));
	--pos: calc((var(--val) - var(--min))*(100% - #{$thumb-d})/var(--range));
	display: flex;
	align-items: center;
	width: calc(100% - #{2*$ctrl-pad});
}

label {
	width: $lbl-w;
	padding-right: .5em;
	text-align: right;
	
	&:after { content: ':' }
}

[type='range'] {
	&::-webkit-slider-runnable-track, 
	&::-webkit-slider-thumb, & {
		-webkit-appearance: none
	}
	
	flex: 1;
	order: 1;
	min-width: .25*$ctrl-wmax;
	height: 1.5*$thumb-d;
	background: transparent;
	cursor: pointer;
	
	&::-webkit-slider-runnable-track {
		@include track
	}
	
	&::-moz-range-track {
		@include track
	}
	
	&::-ms-track {
		@include track;
		background: $demo-ll;
		color: transparent
	}
	
	&::-ms-fill-lower {
		display: none
	}
	
	&::-webkit-slider-thumb {
		margin-top: calc(#{$track-r} - #{$thumb-r});
		@include thumb
	}
	
	&::-moz-range-thumb {
		@include thumb
	}
	
	&::-ms-thumb {
		margin-top: 0;
		@include thumb;
		border-color: $demo-dark
	}

	&:focus {
		outline: none;
		
		&::-webkit-slider-thumb {
			@include thumb-focus
		}

		&::-moz-range-thumb {
			@include thumb-focus
		}

		&::-ms-thumb {
			@include thumb-focus
		}
	}
}

svg { flex: 1 }

path {
	fill: none;
	stroke-width: 5
}

#sg { stroke: #f90 }

#hg { stroke: #b53 }
View Compiled
const _SVG = document.querySelector('svg'), 
			_SHAPES = {
				s: { el: document.getElementById('sg') }, 
				h: { el: document.getElementById('hg') }
			}, 
			D = 1000 /* viewBox size */,
			O = {} /* data object */,
			/* number of cubic curves/ polygon vertices */
			P = 5;

function getStarPoints(f = .5) {
	const RCO = f*D /* outer (pentagram) circumradius*/, 
				BAS = 2*(2*Math.PI/P) /* base angle for star poly */, 
				BAC = 2*Math.PI/P /* base angle for convex poly */, 
				RI = RCO*Math.cos(.5*BAS) /*pentagram/ inner pentagon inradius */, 
				RCI = RI/Math.cos(.5*BAC) /* inner pentagon circumradius */, 
				ND = 2*P /* total number of distinct points we need to get */, 
				BAD = 2*Math.PI/ND /* base angle for point distribution */, 
				PTS = [] /* array we fill with point coordinates */;

	for(let i = 0; i < ND; i++) {
		let /* radius at end point (inner)/ control point (outer) */
				cr = i%2 ? RCI : RCO, 
				/* angle of radial segment from origin to current point */
				ca = i*BAD + .5*Math.PI, 
				x = Math.round(cr*Math.cos(ca)), 
				y = Math.round(cr*Math.sin(ca));

		PTS.push([x, y]);
		/* for even indices double it, control points coincide here */
		if(!(i%2)) PTS.push([x, y]);
	}

	return PTS
};

function getHeartPoints(f = .25) {
	const R = f*D /* helper circle radius  */, 
				RC = Math.round(R/Math.SQRT2) /* circumradius of square of edge R */, 
				XT = 0, YT = -RC /* coords of point T */, 
				XA = 2*RC, YA = -RC /* coords of A points (x in abs value) */, 
				XB = 2*RC, YB = RC /* coords of B points (x in abs value) */, 
				XC = 0, YC = 3*RC /* coords of point C */, 
				XD = RC, YD = -2*RC /* coords of D points (x in abs value) */, 
				XE = 3*RC, YE = 0 /* coords of E points (x in abs value) */, 
				/* const for cubic curve approx of quarter circle */
				C = .551915, 
        CC = 1 - C, 
        /* coords of ctrl points on TD segs */
				XTD = Math.round(CC*XT + C*XD), YTD = Math.round(CC*YT + C*YD), 
        /* coords of ctrl points on AD segs */
				XAD = Math.round(CC*XA + C*XD), YAD = Math.round(CC*YA + C*YD), 
        /* coords of ctrl points on AE segs */
				XAE = Math.round(CC*XA + C*XE), YAE = Math.round(CC*YA + C*YE), 
        /* coords of ctrl points on BE segs */
				XBE = Math.round(CC*XB + C*XE), YBE = Math.round(CC*YB + C*YE);
	
	return [
		[XC, YC], [XC, YC], [-XB, YB], 
		[-XBE, YBE], [-XAE, YAE], [-XA, YA], 
		[-XAD, YAD], [-XTD, YTD], [XT, YT], 
		[XTD, YTD], [XAD, YAD], [XA, YA], 
		[XAE, YAE], [XBE, YBE], [XB, YB]
	].map(([x, y]) => [x, y - .09*R]);
};

function fnStr(fname, farg) { return `${fname}(${farg})` }

function update(e) {
	const _T = e.target, IDN = _T.id.charAt(0), VAL = +_T.value;
	
	_SHAPES[IDN].wrap.style.setProperty(`--val`, VAL);
	_SHAPES[IDN].el.setAttribute('transform', `scale(${VAL/_SHAPES[IDN].def})`);
};

(function init() {	
	_SVG.setAttribute('viewBox', [-.5*D, -.5*D, D, D].join(' '));
	
	for(let p in _SHAPES) {
		_SHAPES[p].wrap = _SHAPES[p].el.parentNode;
		_SHAPES[p].f = document.getElementById(`${p}f`);
		_SHAPES[p].def = +_SHAPES[p].f.value;
		
		_SHAPES[p].f.addEventListener('input', update, false);
		_SHAPES[p].f.addEventListener('change', update, false);
	}
	
	O.d = {
		s: getStarPoints(), 
		h: getHeartPoints(), 
		afn: function(pts) {
			return pts.reduce((a, c, i) => {
				return a + (i%3 ? ' ' : 'C') + c
			}, `M${pts[pts.length - 1]}`)
		}
	};
	
	for(let p in O) {
		_SHAPES.s.el.setAttribute(p, O[p].afn(O[p].s));
		_SHAPES.h.el.setAttribute(p, O[p].afn(O[p].h));
	}
})();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.