Malleys

/* Rects */

Malleys

<svg width="520" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="gray" stroke-width="1" />
    </pattern>
  </defs>
	
	<g transform="scale(40)">
		<path d="M 0 2 L 5 0 5 2" transform="translate(8,0)" fill="deepskyblue">
			<animateTransform

Malleys

img {
	position: relative;
	font-size: 0;
}

img::before {
	content: attr(alt);
	display: grid;
	place-content: center;
	width: 100%;

Malleys

/**
 * Print `calc` result
 */

.block::before {
	--a: 44;
	--b: 5;
	counter-reset:
		a var(--a)
		b var(--b)

Malleys

/**
 * The problem with brightness()
 */

body {
	display: flex;
}

div {
	width: 150px;

Malleys

/* Cursors */
/* (https://www.w3.org/TR/css-ui-3/#cursor) */

.cursor {
	display: inline-block;
	width: 8em;
	height: 8em;
	background: #eee;
	margin: 0.2em;
	user-select: none;