css-easing-2/step-easing-func-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 350">
  <title>Examples of steps() 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)">
    <!-- Row #1 -->
    <g transform="translate(0 100)">
      <!-- steps(3, jump-start) -->
      <g>
        <defs>
          <mask id="step3StartGridMask" 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-33.3" class="lineKnockout"/>
            <circle r="3" class="circleKnockout"/>
          </mask>
          <mask id="step3StartLineMask">
            <rect x="-5" y="-105" width="110" height="110" fill="white"/>
            <circle r="3" fill="black"/>
            <circle cx="33.3" cy="-33.3" r="3" fill="black"/>
            <circle cx="66.6" cy="-66.6" r="3" fill="black"/>
          </mask>
        </defs>
        <use xlink:href="#graph" mask="url(#step3StartGridMask)"/>
        <g mask="url(#step3StartLineMask)">
          <path d="M0-33.3h33.3m0-33.3h33.3m0-33.4h33.4" class="curve"/>
          <path d="M0 0v-33.3m33.3 0v-33.3m33.3 0v-33.4" 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, jump-start)</text>
      </g>
      <!-- steps(3, jump-end) -->
      <g transform="translate(170 0)">
        <defs>
          <mask id="step3EndGridMask" maskUnits="userSpaceOnUse"
            x="-30" y="-110" width="135" height="135">
            <rect x="-30" y="-110" width="100%" height="100%" fill="white"/>
            <circle cx="33.3" r="3" class="circleKnockout"/>
          </mask>
          <mask id="step3EndLineMask">
            <rect x="-5" y="-105" width="110" height="110" fill="white"/>
            <circle cx="33.3" r="3" fill="black"/>
            <circle cx="66.6" cy="-33.3" r="3" fill="black"/>
            <circle cx="100" cy="-66.6" r="3" fill="black"/>
          </mask>
        </defs>
        <use xlink:href="#graph" mask="url(#step3EndGridMask)"/>
        <g mask="url(#step3EndLineMask)">
          <path d="M0 0h33.3m0-33.3h33.3m0-33.3h33.4" class="curve"/>
          <path d="M33.3 0v-33.3h33.3 0v-33.3m33.4 0v-33.4" 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, jump-end)</text>
      </g>
    </g>
    <!-- Row #2 -->
    <g transform="translate(0 290)">
      <!-- steps(3, jump-none) -->
      <g>
        <defs>
          <mask id="step3NoneGridMask" maskUnits="userSpaceOnUse"
            x="-30" y="-110" width="135" height="135">
            <rect x="-30" y="-110" width="100%" height="100%" fill="white"/>
            <circle cx="33.3" r="3" class="circleKnockout"/>
          </mask>
          <mask id="step3NoneLineMask">
            <rect x="-5" y="-105" width="110" height="110" fill="white"/>
            <circle cx="33.3" r="3" fill="black"/>
            <circle cx="66.6" cy="-50" r="3" fill="black"/>
          </mask>
        </defs>
        <use xlink:href="#graph" mask="url(#step3NoneGridMask)"/>
        <g mask="url(#step3NoneLineMask)">
          <path d="M0 0h33.3m0-50h33.3m0-50h33.4" class="curve"/>
          <path d="M33.3 0v-50m33.3 0v-50" class="dotted"/>
        </g>
        <circle r="3.5" class="filledEndPoint"/>
        <circle cx="33.3" r="3" class="openEndPoint"/>
        <circle cx="33.3" cy="-50" r="3.5" class="filledEndPoint"/>
        <circle cx="66.6" cy="-50" 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, jump-none)</text>
      </g>
      <!-- steps(3, jump-both) -->
      <g transform="translate(170 0)">
        <defs>
          <mask id="step3BothGridMask" 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-25" class="lineKnockout"/>
            <circle r="3" class="circleKnockout"/>
          </mask>
          <mask id="step3BothLineMask">
            <rect x="-5" y="-105" width="110" height="110" fill="white"/>
            <circle r="3" fill="black"/>
            <circle cx="33.3" cy="-25" r="3" fill="black"/>
            <circle cx="66.6" cy="-50" r="3" fill="black"/>
            <circle cx="100" cy="-75" r="3" fill="black"/>
          </mask>
        </defs>
        <use xlink:href="#graph" mask="url(#step3BothGridMask)"/>
        <g mask="url(#step3BothLineMask)">
          <path d="M0-25h33.3m0-25h33.3m0-25h33.3" class="curve"/>
          <path d="M0 0v-25m33.3 0v-25m33.3 0v-25m33.4 0v-25" class="dotted"/>
        </g>
        <circle r="3" class="openEndPoint"/>
        <circle cy="-25" r="3.5" class="filledEndPoint"/>
        <circle cx="33.3" cy="-25" r="3" class="openEndPoint"/>
        <circle cx="33.3" cy="-50" r="3.5" class="filledEndPoint"/>
        <circle cx="66.6" cy="-50" r="3" class="openEndPoint"/>
        <circle cx="66.6" cy="-75" r="3.5" class="filledEndPoint"/>
        <circle cx="100" cy="-75" r="3" class="openEndPoint"/>
        <circle cx="100" cy="-100" r="3.5" class="filledEndPoint"/>
        <text x="50" y="40" class="paramLabel">steps(3, jump-both)</text>
      </g>
    </g>
  </g>
</svg>