[css-easing-2][editorial] Some markup nits, and add a graph to linear like the others have.

Author: tabatkins

css-easing-2/Overview.bs

@@ -134,7 +134,19 @@ The syntax for specifying an [=easing function=] is as follows:
   timing-functions-syntax-valid.html
 </wpt>
 
-## Linear Easing Functions: ''linear'', ''linear()'' ## {#the-linear-easing-function}
+<!-- Big Text: linear 
+
+█▌    ████ █    █▌ █████▌  ███▌  ████▌ 
+█▌     ▐▌  █▌   █▌ █▌     ▐█ ▐█  █▌  █▌
+█▌     ▐▌  ██▌  █▌ █▌     █▌  █▌ █▌  █▌
+█▌     ▐▌  █▌▐█ █▌ ████   █▌  █▌ ████▌ 
+█▌     ▐▌  █▌  ██▌ █▌     █████▌ █▌▐█  
+█▌     ▐▌  █▌   █▌ █▌     █▌  █▌ █▌ ▐█ 
+█████ ████ █▌   ▐▌ █████▌ █▌  █▌ █▌  █▌
+-->
+
+<h3 id=the-linear-easing-function>
+Linear Easing Functions: ''linear'', ''linear()''</h3>
 
 A <dfn export>linear easing function</dfn>
 is an [=easing function=]
@@ -145,8 +157,16 @@ is a pair of numbers,
 associating an [=input progress value=]
 to an [=output progress value=].
 
-
-### Syntax ### {#linear-easing-function-syntax}
+<figure>
+  <img class="easing-graph" src="images/linear-easing-curve.svg" width="535" height="510"
+      alt="A linear curve used as an easing function.">
+  <figcaption>
+    ''linear(0, .1 25%, .75 50%, 1)''<br>
+    The shape of the curve follows the [=control points=].<br>
+    Input progress values serve as <var>x</var> values of the curve,
+    whilst the <var>y</var> values are the output progress values.
+  </figcaption>
+</figure>
 
 A [=linear easing function=] has the following syntax:
 
@@ -215,7 +235,8 @@ A [=linear easing function=] has the following syntax:
 </div>
 
 
-### Serializing ### {#linear-easing-function-serializing}
+<h4 id=linear-easing-function-serializing>
+Serializing</h4>
 
 <div algorithm>
   To <dfn export>serialize a linear() function</dfn>:
@@ -259,7 +280,8 @@ A [=linear easing function=] has the following syntax:
 </div>
 
 
-### Output of a linear easing function ### {#linear-easing-function-output}
+<h4 id=linear-easing-function-output>
+Output</h4>
 
 <section algorithm="to calculate linear easing output progress">
 
@@ -304,7 +326,8 @@ It returns an [=output progress value=].
 </wpt>
 </section>
 
-### Examples ### {#linear-easing-function-examples}
+<h4 id=linear-easing-function-examples>
+Examples</h4>
 
 <div class=example>
   ''linear()'' allows the definition of easing functions that interpolate linearly between a set of points.
@@ -317,6 +340,7 @@ It returns an [=output progress value=].
       alt="linear(0, 0.25, 1) plotted on a graph">
   </figure>
 </div>
+
 <div class=example>
   By default, values are spread evenly between entries that don't have an explicit "input".
   Input values can be provided using a <<percentage>>.
@@ -334,6 +358,7 @@ It returns an [=output progress value=].
         The third is at 1,1.">
   </figure>
 </div>
+
 <div class=example>
   If two input values are provided for a single output,
   it results in two points with the same output.
@@ -352,6 +377,7 @@ It returns an [=output progress value=].
         The forth is at 1,1.">
   </figure>
 </div>
+
 <div class=example>
   If the input is outside the range provided,
   the trajectory of the nearest two points is continued.
@@ -369,6 +395,7 @@ It returns an [=output progress value=].
         The ends of the graph are extended at the angle of the nearest two lines.">
   </figure>
 </div>
+
 <div class=example>
   A typical use of ''linear()'' is to provide many points to create the illusion of a curve.
 
@@ -405,28 +432,26 @@ It returns an [=output progress value=].
   which may be needed for slower animations.
 </div>
 
-<h3 id=the-linear-easing-keyword oldids=linear-timing-function-section>The linear easing keyword: ''linear''</h3>
-
-The <dfn dfn-type=value for="<easing-function>">linear</dfn> keyword
-produces an identity [=linear easing function=]
-whose [=output progress value=] is equal to the
-[=input progress value=] for all inputs.
 
-This gives the same result as ''linear(0, 1)''.
+<!-- Big Text: bezier
 
-Note: Although this produces a [=linear easing function=],
-uses of the keyword ''linear'' always serialize as-is, to ''linear''.
-Whereas the function equivalent ''linear(0, 1)'' will serialize to ''linear(0 0%, 1 100%)''.
-These rules are in [Serialization](#serialization).
+████▌  █████▌ █████▌ ████ █████▌ ████▌ 
+█▌  █▌ █▌         ▐▌  ▐▌  █▌     █▌  █▌
+█▌  █▌ █▌        ▐▌   ▐▌  █▌     █▌  █▌
+█████  ████     █▌    ▐▌  ████   ████▌ 
+█▌  █▌ █▌      █      ▐▌  █▌     █▌▐█  
+█▌  █▌ █▌     █       ▐▌  █▌     █▌ ▐█ 
+████▌  █████▌ █████▌ ████ █████▌ █▌  █▌
+-->
 
 <h3 id=cubic-bezier-easing-functions oldids=cubic-bezier-timing-functions>Cubic
-B&eacute;zier easing functions:
+Bézier easing functions:
 ''ease'', ''ease-in'', ''ease-out'', ''ease-in-out'', ''cubic-bezier()''</h3>
 
-A <dfn export>cubic B&eacute;zier easing function</dfn> is
+A <dfn export>cubic Bézier easing function</dfn> is
 a type of [=easing function=] defined by four real numbers
 that specify the two control points,
-<var>P1</var> and <var>P2</var>, of a cubic B&eacute;zier curve whose
+<var>P1</var> and <var>P2</var>, of a cubic Bézier curve whose
 end points <var ignore>P0</var> and <var ignore>P3</var>
 are fixed at (0, 0) and (1, 1) respectively.
 The <var>x</var> coordinates of <var>P1</var> and <var>P2</var>
@@ -436,15 +461,15 @@ are restricted to the range [0, 1].
   <img class="easing-graph" src="images/cubic-bezier-easing-curve.svg" width="535" height="510"
       alt="A cubic Bezier curve used as an easing function.">
   <figcaption>
-    A cubic B&eacute;zier curve used as an easing function.<br>
+    A cubic Bézier curve used as an easing function.<br>
     The shape of the curve is determined by the location of the control
     points <var>P1</var> and <var>P2</var>.<br>
     Input progress values serve as <var>x</var> values of the curve,
     whilst the <var>y</var> values are the output progress values.
   </figcaption>
 </figure>
 
-A <a>cubic B&eacute;zier easing function</a> has the following syntax
+A <a>cubic Bézier easing function</a> has the following syntax
 (using notation from [[!CSS-VALUES-3]]):
 
 <div class="prod"><dfn type>&lt;cubic-bezier-easing-function&gt;</dfn> =
@@ -466,7 +491,7 @@ The meaning of each value is as follows:
 :   <dfn>ease-in-out</dfn>
 ::  Equivalent to ''cubic-bezier(0.42, 0, 0.58, 1)''.
 :   <dt><dfn function lt="cubic-bezier()">cubic-bezier(<<number [0,1]>>, <<number>>, <<number [0,1]>>, <<number>>)</dfn></dt>
-::  Specifies a <a>cubic B&eacute;zier easing function</a>.
+::  Specifies a <a>cubic Bézier easing function</a>.
     The four numbers specify points <var>P1</var> and <var>P2</var> of
     the curve as (<var ignore>x1</var>, <var ignore>y1</var>, <var
     ignore>x2</var>, <var ignore>y2</var>).
@@ -481,12 +506,14 @@ The keyword values listed above are illustrated below.
   <img class="easing-graph" src="images/curve-keywords.svg" width="500"
       alt="The easing functions produced by keyword values.">
   <figcaption>
-    The easing functions produced by each of the cubic B&eacute;zier easing
+    The easing functions produced by each of the cubic Bézier easing
     function keyword values.
   </figcaption>
 </figure>
 
-### Output of a cubic b&eacute;zier easing function ### {#cubic-bezier-algo}
+
+<h4 id=cubic-bezier-algo>
+Output</h4>
 
 The mapping from input progress to output progress is performed by
 determining the corresponding <var>y</var> value ([=output progress value=]) for
@@ -523,6 +550,18 @@ infinitely using tangent of the curve at the closest endpoint as follows:
   cubic-bezier-timing-functions-output.html
 </wpt>
 
+
+<!-- Big Text: steps
+
+ ███▌  █████▌ █████▌ ████▌   ███▌ 
+█▌  █▌   █▌   █▌     █▌  █▌ █▌  █▌
+█▌       █▌   █▌     █▌  █▌ █▌    
+ ███▌    █▌   ████   ████▌   ███▌ 
+    █▌   █▌   █▌     █▌         █▌
+█▌  █▌   █▌   █▌     █▌     █▌  █▌
+ ███▌    █▌   █████▌ █▌      ███▌ 
+-->
+
 <h3 id=step-easing-functions oldids=step-timing-functions>Step easing functions:
 ''step-start'', ''step-end'', ''steps()''</h3>
 
@@ -605,8 +644,8 @@ The meaning of each value is as follows:
 
 </dl>
 
-<h4 id=step-easing-algo oldids=step-timing-function-algo>Output of
-a step easing function</h4>
+<h4 id=step-easing-algo oldids=step-timing-function-algo>
+Output</h4>
 
 At the exact point where a step occurs, the result of the function is
 conceptually the top of the step. However, an additional <dfn>before flag</dfn>