[css-values-5] Add an image showing the random caching, and rephrase the intro. #13132

Author: tabatkins

css-values-5/Overview.bs

@@ -2781,25 +2781,28 @@ Evaluating Random Values</h3>
 <h3 id=random-caching>
 Caching Random Values: the <<random-value-sharing>> value</h3>
 
-	In a programming language like JavaScript,
-	there's a clear temporal ordering to code,
-	so you can tell exactly <em>when</em> something like a call to {{Math/random()|Math.random()}} is evaluated.
-	You can also store the results in a variable,
-	making it clear when you're reusing a single random value in multiple places,
-	versus using a distinct random value in each location.
-
-	CSS, on the other hand, is a declarative language
-	(code is not "executed" in any particular order,
-	nor is there any control over how many times something is "executed");
-	it makes it very easy to apply identical styles to multiple elements
-	but difficult to specify distinct values for each of them
-	(making it unclear whether a property using ''random()''
-	is meant to resolve to the same value on each element it's applied to
-	or to distinct values on each);
-	and it has very limited "variable" functionality
-	(making it difficult to intentionally reuse a particular randomly-generated value in several places).
-
-	To resolve these issues,
+	CSS is a declarative language,
+	so functions don't have a specific "time" when they're "evaluated",
+	which makes it tricky to establish exactly when values are "shared" vs "unique".
+	The [=random functions=] default to making their values <em>as unique as possible</em>;
+	even if you write the exact same ''random()'' function in multiple places,
+	or apply the same ''random()'' function to multiple elements,
+	each instance will resolve to different values.
+
+	If some degree of sharing <em>is</em> wanted,
+	the <<random-value-sharing>> value can be specified,
+	forcing values to be shared between properties and/or between elements.
+
+	<figure class=example>
+		<img src="images/random-sharing.png">
+		<figcaption>
+			Providing a custom ident (''--foo'') allows multiple properties to share a value;<br>
+			providing ''element-shared'' allows multiple elements to share a value;<br>
+			providing both allow multiple properties across multiple elemnents to share.
+		</figcaption>
+	</figure>
+
+	More specifically,
 	the ''random()'' and ''random-item()'' functions are defined to generate random values
 	under the following caching semantics: