From 67898c59d983b928d304924f6d4ece451e349ffa Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 9 Mar 2021 13:58:07 -0500
Subject: [PATCH] fix flaws in Web/API/EffectTiming/easing

---
 .../web/api/effecttiming/easing/cubic-bezier-timing-curve.svg | 1 +
 files/en-us/web/api/effecttiming/easing/index.html            | 4 ++--
 .../web/api/effecttiming/easing/step-timing-func-examples.svg | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)
 create mode 100644 files/en-us/web/api/effecttiming/easing/cubic-bezier-timing-curve.svg
 create mode 100644 files/en-us/web/api/effecttiming/easing/step-timing-func-examples.svg

diff --git a/files/en-us/web/api/effecttiming/easing/cubic-bezier-timing-curve.svg b/files/en-us/web/api/effecttiming/easing/cubic-bezier-timing-curve.svg
new file mode 100644
index 000000000000000..ec4b544391b9ae1
--- /dev/null
+++ b/files/en-us/web/api/effecttiming/easing/cubic-bezier-timing-curve.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 535 510" style="font-size:23px;font-family:sans-serif"><defs><style>.axis,.tickMark{stroke:#000;stroke-width:1.5;fill:none;stroke-linecap:square}.controlPoint{fill:#fff;stroke:#000;stroke-width:3}.handleLine{fill:none;stroke:#000;stroke-width:2}.axisLabel{text-anchor:middle}.axisValue{fill:gray}.axisValue.vert{text-anchor:end}.axisValue.horz{text-anchor:middle}.pointLabel{fill:#000;font-size:25px}</style></defs><g transform="translate(110 420)"><path style="stroke:none;fill:#fff" d="M0-400h400V0H0z"/><path d="M400 0v-400M0-400h400" style="stroke:gray;stroke-width:1.5;stroke-dasharray:3 4;fill:none"/><path class="axis" d="M0 0v-400"/><path class="tickMark" d="M0-200h-20M0-400h-20"/><text x="-30" y="-200" dy=".3em" class="axisValue vert">0.5</text><text x="-30" y="-400" dy=".3em" class="axisValue vert">1</text><text x="200" y="-80" class="axisLabel" transform="rotate(-90)">Output progress</text><path class="axis" d="M0 0h400"/><path class="tickMark" d="M200 0v20M400 0v20"/><text x="200" y="20" dy="1.1em" class="axisValue horz">0.5</text><text x="400" y="20" dy="1.1em" class="axisValue horz">1</text><text x="200" y="80" class="axisLabel">Input progress</text><text x="-25" y="25" class="axisValue">0</text><path class="handleLine" d="m0 0 240-40"/><circle cx="240" cy="-40" r="10" class="controlPoint"/><text x="260" y="-40" dy=".4em" class="pointLabel">P1</text><path class="handleLine" d="M400-400 80-280"/><circle cx="80" cy="-280" r="10" class="controlPoint"/><text x="60" y="-280" dy=".4em" class="pointLabel" text-anchor="end">P2</text><path d="M0 0c240-40 80-280 400-400" style="fill:none;stroke:#00f;stroke-width:7;stroke-linecap:round"/><circle r="10" class="controlPoint"/><text x="-10" y="-20" dy=".4em" class="pointLabel" text-anchor="end">P0</text><circle cx="400" cy="-400" r="10" class="controlPoint"/><text x="395" y="-375" dy=".4em" class="pointLabel" text-anchor="end">P3</text></g></svg>
\ No newline at end of file
diff --git a/files/en-us/web/api/effecttiming/easing/index.html b/files/en-us/web/api/effecttiming/easing/index.html
index a10bbf7cdcabeff..b1a0f76a63285fd 100644
--- a/files/en-us/web/api/effecttiming/easing/index.html
+++ b/files/en-us/web/api/effecttiming/easing/index.html
@@ -60,7 +60,7 @@ <h3 id="Value">Value</h3>
     <code>cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
   </dt>
   <dd><img alt="A diagram showing the points of a cubic bezier timing function."
-      src="https://www.w3.org/TR/css-timing-1/cubic-bezier-timing-curve.svg"><br>
+      src="cubic-bezier-timing-curve.svg"><br>
     Specifies <a
       href="https://w3c.github.io/web-animations/#cubic-bzier-timing-function">a cubic
       Bézier timing function</a>. The four numbers specify points P1 and P2 of the curve
@@ -90,7 +90,7 @@ <h3 id="Value">Value</h3>
     <code>frames()</code>.</dd>
   <dt><code>steps(&lt;integer&gt;[, [ start | end ] ]?)</code></dt>
   <dd><img alt="A diagram of the various steps timing functions."
-      src="https://www.w3.org/TR/css-timing-1/step-timing-func-examples.svg"><br>
+      src="step-timing-func-examples.svg"><br>
     Specifies <a href="https://w3c.github.io/web-animations/#step-timing-function">a step
       timing function</a>, which breaks the animation down into a number of equal time
     intervals. The browser flips to a different static frame when each interval is
diff --git a/files/en-us/web/api/effecttiming/easing/step-timing-func-examples.svg b/files/en-us/web/api/effecttiming/easing/step-timing-func-examples.svg
new file mode 100644
index 000000000000000..e1c06dc55074c0f
--- /dev/null
+++ b/files/en-us/web/api/effecttiming/easing/step-timing-func-examples.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 380" style="font-size:15px;font-family:sans-serif"><defs><style>.axis,.tickMark{stroke:#000;stroke-width:1.2;fill:none;stroke-linecap:square}.curve,.dotted{fill:none;stroke:#00f;stroke-width:3;stroke-linecap:round}.dotted{stroke-width:1.5;stroke-dasharray:2 6}.filledEndPoint{fill:#00f;stroke:none}.openEndPoint{fill:none;stroke:#00f;stroke-width:1.5}.lineKnockout{fill:none;stroke:#555;stroke-width:2}.circleKnockout{fill:#555;stroke:none}.axisValue{fill:gray}.axisValue.vert{text-anchor:end}.axisValue.horz,.paramLabel{text-anchor:middle}.paramLabel{font-size:15px}</style><g id="graph" style="font-size:10px"><path style="stroke:none;fill:#fff" d="M0-100h100V0H0z"/><path class="axis" d="M0 0v-100"/><path class="tickMark" d="M0-50h-5m5-50h-5"/><text x="-9" y="-50" dy=".3em" class="axisValue vert">0.5</text><text x="-9" y="-100" dy=".3em" class="axisValue vert">1</text><path class="axis" d="M0 0h100"/><path class="tickMark" d="M50 0v5m50-5v5"/><text x="50" y="7.5" dy="1.1em" class="axisValue horz">0.5</text><text x="100" y="7.5" dy="1.1em" class="axisValue horz">1</text><text x="-.5em" y="1em" class="axisValue" text-anchor="end">0</text></g></defs><g transform="translate(30 110)"><defs><mask id="step1StartGridMask" maskUnits="userSpaceOnUse" x="-30" y="-110" width="135" height="135"><rect x="-30" y="-110" width="100%" height="100%" fill="#fff"/><path d="M0 0v-100" class="lineKnockout"/><circle r="3" class="circleKnockout"/></mask><mask id="step1StartLineMask"><path fill="#fff" d="M-5-105h110V5H-5z"/><circle r="3"/></mask></defs><use xlink:href="#graph" mask="url(#step1StartGridMask)"/><g mask="url(#step1StartLineMask)"><path d="M0-100h100" class="curve"/><path d="M0 0v-100" class="dotted"/></g><circle r="3" class="openEndPoint"/><circle cy="-100" r="3.5" class="filledEndPoint"/><circle cx="100" cy="-100" r="3.5" class="filledEndPoint"/><text x="50" y="40" class="paramLabel">steps: 1<tspan x="50" dy="1em">position: start</tspan></text></g><g transform="translate(200 110)"><defs><mask id="step1EndGridMask" maskUnits="userSpaceOnUse" x="-30" y="-110" width="135" height="135"><rect x="-30" y="-110" width="100%" height="100%" fill="#fff"/><circle cx="100" r="3" class="circleKnockout"/></mask><mask id="step1EndLineMask"><path fill="#fff" d="M-5-105h110V5H-5z"/><circle cx="100" r="3"/></mask></defs><use xlink:href="#graph" mask="url(#step1EndGridMask)"/><g mask="url(#step1EndLineMask)"><path d="M0 0h100" class="curve"/><path d="M100 0v-100" class="dotted"/></g><circle r="3.5" class="filledEndPoint"/><circle cx="100" r="3" class="openEndPoint"/><circle cx="100" cy="-100" r="3.5" class="filledEndPoint"/><text x="50" y="40" class="paramLabel">steps: 1<tspan x="50" dy="1em">position: end</tspan></text></g><g transform="translate(30 320)"><defs><mask id="step3StartGridMask" maskUnits="userSpaceOnUse" x="-30" y="-110" width="135" height="135"><rect x="-30" y="-110" width="100%" height="100%" fill="#fff"/><path d="M0 0v-33.3" class="lineKnockout"/><circle r="3" class="circleKnockout"/></mask><mask id="step3StartLineMask"><path fill="#fff" d="M-5-105h110V5H-5z"/><circle r="3"/><circle cx="33.3" cy="-33.3" r="3"/><circle cx="66.6" cy="-66.6" r="3"/></mask></defs><use xlink:href="#graph" mask="url(#step3StartGridMask)"/><g mask="url(#step3StartLineMask)"><path d="M0-33.3h33.3m0-33.3h33.3m0-33.4H100" class="curve"/><path d="M0 0v-33.3m33.3 0v-33.3m33.3 0V-100" class="dotted"/></g><circle r="3" class="openEndPoint"/><circle cy="-33.3" r="3.5" class="filledEndPoint"/><circle cx="33.3" cy="-33.3" r="3" class="openEndPoint"/><circle cx="33.3" cy="-66.6" r="3.5" class="filledEndPoint"/><circle cx="66.6" cy="-66.6" r="3" class="openEndPoint"/><circle cx="66.6" cy="-100" r="3.5" class="filledEndPoint"/><circle cx="100" cy="-100" r="3.5" class="filledEndPoint"/><text x="50" y="40" class="paramLabel">steps: 3<tspan x="50" dy="1em">position: start</tspan></text></g><g transform="translate(200 320)"><defs><mask id="step3EndGridMask" maskUnits="userSpaceOnUse" x="-30" y="-110" width="135" height="135"><rect x="-30" y="-110" width="100%" height="100%" fill="#fff"/><circle cx="33.3" r="3" class="circleKnockout"/></mask><mask id="step3EndLineMask"><path fill="#fff" d="M-5-105h110V5H-5z"/><circle cx="33.3" r="3"/><circle cx="66.6" cy="-33.3" r="3"/><circle cx="100" cy="-66.6" r="3"/></mask></defs><use xlink:href="#graph" mask="url(#step3EndGridMask)"/><g mask="url(#step3EndLineMask)"><path d="M0 0h33.3m0-33.3h33.3m0-33.3H100" class="curve"/><path d="M33.3 0v-33.3h33.3v-33.3m33.4 0V-100" class="dotted"/></g><circle r="3.5" class="filledEndPoint"/><circle cx="33.3" r="3" class="openEndPoint"/><circle cx="33.3" cy="-33.3" r="3.5" class="filledEndPoint"/><circle cx="66.6" cy="-33.3" r="3" class="openEndPoint"/><circle cx="66.6" cy="-66.6" r="3.5" class="filledEndPoint"/><circle cx="100" cy="-66.6" r="3" class="openEndPoint"/><circle cx="100" cy="-100" r="3.5" class="filledEndPoint"/><text x="50" y="40" class="paramLabel">steps: 3<tspan x="50" dy="1em">position: end</tspan></text></g></svg>
\ No newline at end of file