GreLI

.scale,
.meter {
	height: 15px
}
.scale {
	width: 501px;
	background: repeating-linear-gradient(90deg, transparent, transparent 3px, white 3px, white 6px) #CCC;
}
.meter {
	width: 75%;

GreLI

/**
 * Трапеция
 */
.stage {
	perspective: 600px;
}

.trapezoid {
	width: 600px;
	height: 300px;

GreLI

table {
	position: relative;
	}
th,
td {
	counter-increment: col;
}
th:first-child {
	text-align: right;
    counter-reset: col;

GreLI

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 93">

<pattern id="grid" x="6" y="6" width="6" height="6" patternUnits="userSpaceOnUse">
	<rect width="6" height="6" fill="white"/>
	<rect x="1" y="1" width="5" height="5" fill="red"/>
</pattern>

<!-- Heart -->
<path fill="red" d="
	M33.5,70.65

GreLI

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 250">

<pattern id="grid" x="8" y="5" width="16" height="16" patternUnits="userSpaceOnUse">
	<rect width="16" height="16" fill="red" stroke="white" stroke-width="2"/>
</pattern>

<!-- Heart -->
<path fill="red" d="
	M96.34,193.4
	l48.5,48.5

GreLI

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;