Visualizing Cubic Poly-Bezier Timing Functions

HTML

<svg viewBox="-0.25 -0.1 1.4 1.3">
    <rect width="1" height="1"/>
    <g text-anchor="end" transform="translate(-0.03,0.03)">
        <text y="1" >y=0</text>
        <text y="0.5">0.5</text>
        <text y="0" >y=1</text>
    </g>
    <g text-anchor="middle" transform="translate(0,1.11)">
        <text x="0" >x=0</text>
        <text x="0.5">0.5</text>
        <text x="1" >x=1</text>
    </g>
    <g transform="translate(0,1)scale(1,-1)">
        <path d="M0,0
                 C0.25,0.25, 0.25,0.75 0.3,1 
                 C0.5,0.5 0.6,0.5 0.7,1
                 C0.85,0.8 0.9,0.8 1,1" />
        <circle class="implicit vertex" r="0.03" cx="0" cy="0"/>
        <circle class="control" r="0.02" cx="0.25" cy="0.25"/>
        <circle class="control" r="0.02" cx="0.25" cy="0.75"/>
        <circle class="vertex" r="0.02" cx="0.3" cy="1"/>
        <circle class="control" r="0.02" cx="0.5" cy="0.5"/>
        <circle class="control" r="0.02" cx="0.6" cy="0.5"/>
        <circle class="vertex" r="0.02" cx="0.7" cy="1"/>
        <circle class="control" r="0.02" cx="0.85" cy="0.8"/>
        <circle class="control" r="0.02" cx="0.9" cy="0.8"/>
        <circle class="implicit vertex" r="0.03" cx="1" cy="1"/>
    </g>
</svg>

CSS

svg {max-width: 500px; stroke-width: 0.01; background: white;}
rect {fill: none; stroke: gray; }
text {fill: black; font-size: 0.1px}
path {stroke: black; fill: none;}

.implicit {fill-opacity: 0.5;}
.vertex {fill: red;}
.control {fill: blue;}

body {background: gray;}