[css-timing-1] Add missing step timing function keyword figure

birtles · birtles · commit ca59fd184153 · 2018-09-25T17:24:50.000+09:00
diff --git a/css-timing-1/step-timing-keyword-examples.svg b/css-timing-1/step-timing-keyword-examples.svg
@@ -0,0 +1,158 @@
+<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
+<svg xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="100%" height="100%" viewBox="0 0 320 160">
+  <title>Examples of step-start and step-end timing functions</title>
+  <defs>
+    <style type="text/css">
+    svg {
+      font-size: 15px;
+      font-family: sans-serif;
+    }
+
+    /*
+     * Line work
+     */
+    .axis, .tickMark {
+      stroke: black;
+      stroke-width: 1.2;
+      fill: none;
+      stroke-linecap: square;
+    }
+    .curve {
+      fill: none;
+      stroke: blue;
+      stroke-width: 3;
+      stroke-linecap: round;
+    }
+    .dotted {
+      fill: none;
+      stroke: blue;
+      stroke-width: 1.5;
+      stroke-linecap: round;
+      stroke-dasharray: 2 6;
+    }
+    .filledEndPoint {
+      fill: blue;
+      stroke: none;
+    }
+    .openEndPoint {
+      fill: none;
+      stroke: blue;
+      stroke-width: 1.5;
+    }
+
+    /*
+     * Background
+     */
+    .graphBackground {
+      stroke: none;
+      fill: white;
+    }
+
+    /*
+     * Masking
+     */
+    .lineKnockout {
+      fill: none;
+      stroke: #555;
+      stroke-width: 2;
+    }
+    .circleKnockout {
+      fill: #555;
+      stroke: none;
+    }
+
+    /*
+     * Text labels
+     */
+    .axisValue {
+      fill: grey;
+    }
+    .axisValue.vert {
+      text-anchor: end;
+    }
+    .axisValue.horz {
+      text-anchor: middle;
+    }
+    .pointLabel {
+      fill: black;
+      font-size: 11px;
+    }
+    .paramLabel {
+      font-size: 13px;
+      text-anchor: middle;
+    }
+    </style>
+    <!-- Graph background -->
+    <g id="graph" style="font-size: 10px">
+      <!-- Backing -->
+      <rect y="-100" width="100" height="100" class="graphBackground"/>
+      <!-- Y axis -->
+      <line y2="-100" class="axis"/>
+      <line y1="-50" x2="-5" y2="-50" class="tickMark"/>
+      <line y1="-100" x2="-5" y2="-100" class="tickMark"/>
+      <text x="-9" y="-50" dy="0.3em" class="axisValue vert">0.5</text>
+      <text x="-9" y="-100" dy="0.3em" class="axisValue vert">1</text>
+      <!-- X axis -->
+      <line x2="100" class="axis"/>
+      <line x1="50" x2="50" y2="5" class="tickMark"/>
+      <line x1="100" x2="100" y2="5" class="tickMark"/>
+      <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>
+      <!-- Origin -->
+      <text x="-0.5em" y="1em" class="axisValue" text-anchor="end">0</text>
+    </g>
+  </defs>
+  <g transform="translate(30 10)">
+    <g transform="translate(0 100)">
+      <!-- Steps 1, position start -->
+      <g>
+        <defs>
+          <mask id="step1StartGridMask" maskUnits="userSpaceOnUse"
+            x="-30" y="-110" width="135" height="135">
+            <rect x="-30" y="-110" width="100%" height="100%" fill="white"/>
+            <path d="M0 0v-100" class="lineKnockout"/>
+            <circle r="3" class="circleKnockout"/>
+          </mask>
+          <mask id="step1StartLineMask">
+            <rect x="-5" y="-105" width="110" height="110" fill="white"/>
+            <circle r="3" fill="black"/>
+          </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">step-start</text>
+      </g>
+      <!-- Steps 1, position end -->
+      <g transform="translate(170 0)">
+        <defs>
+          <mask id="step1EndGridMask" maskUnits="userSpaceOnUse"
+            x="-30" y="-110" width="135" height="135">
+            <rect x="-30" y="-110" width="100%" height="100%" fill="white"/>
+            <circle cx="100" r="3" class="circleKnockout"/>
+          </mask>
+          <mask id="step1EndLineMask">
+            <rect x="-5" y="-105" width="110" height="110" fill="white"/>
+            <circle cx="100" r="3" fill="black"/>
+          </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">step-end</text>
+      </g>
+    </g>
+  </g>
+</svg>
