css-easing-2/step-easing-keyword-examples.svg

<!-- 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 easing functions</title>
  <defs>
    <style type="text/css">
    svg {
      font-size: 15px;
      font-family: sans-serif;
    }

    svg {
      --foreground: black;
      --background: white;
      --grey: grey;
      --blue: blue;
      --red: red;
    }

    @media (prefers-color-scheme: dark) {
      svg {
        --foreground: #ddd;
        --background: black;
        --grey: grey;
        --blue: #6969ff;
        --red: #ff6767;
      }
    }

    /*
     * Line work
     */
    .axis, .tickMark {
      stroke: var(--foreground);
      stroke-width: 1.2;
      fill: none;
      stroke-linecap: square;
    }
    .curve {
      fill: none;
      stroke: var(--blue);
      stroke-width: 3;
      stroke-linecap: round;
    }
    .dotted {
      fill: none;
      stroke: var(--blue);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-dasharray: 2 6;
    }
    .filledEndPoint {
      fill: var(--blue);
      stroke: none;
    }
    .openEndPoint {
      fill: none;
      stroke: var(--blue);
      stroke-width: 1.5;
    }

    /*
     * Masking
     */
    .lineKnockout {
      fill: none;
      stroke: #555;
      stroke-width: 2;
    }
    .circleKnockout {
      fill: #555;
      stroke: none;
    }

    /*
     * Text labels
     */
    .axisValue {
      fill: var(--grey);
    }
    .axisValue.vert {
      text-anchor: end;
    }
    .axisValue.horz {
      text-anchor: middle;
    }
    .paramLabel {
      font-size: 13px;
      text-anchor: middle;
      fill: var(--foreground);
    }
    </style>
    <g id="graph" style="font-size: 10px">
      <!-- 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>