D3 Examples - Arrow SMIL/CSS/Web Animation

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
    svg {
        border: 1px solid #ccc;
        display: block;
        margin: 8px 0;
    }
​
    div {
        float: left;
        margin: 8px;
        width: 216px;
        font-family: sans-serif;
    }
​
    body {
        padding: 16px;
    }
</style>
<body>
<div>
    <strong>Static SVG</strong>
    <svg width="64" height="64">
        <defs>
            <marker id="arrow-1"
                    orient="auto"
                    viewBox="0 0 8 8"
                    markerWidth="8"
                    markerHeight="8"
                    markerUnits="strokeWidth"
                    refX="0"
                    refY="4"
                    fill="#000">
                <polyline points="0,0 8,4 0,8"></polyline>
            </marker>
        </defs>
        <path d="M 32 0 L 32 32"
              marker-end="url(#arrow-1)"
              stroke-width="3"
              stroke="#000"
              fill="none"
              stroke-dasharray="8,2">
        </path>
    </svg>
    <em>pure static SVG,
        <br>
        no CSS</em>
</div>
<div>
    <strong>SMIL Animation</strong>
    <svg width="64" height="64">
        <defs>
            <marker id="arrow-2"
                    orient="auto"
                    viewBox="0 0 8 8"
                    markerWidth="8"
                    markerHeight="8"
                    markerUnits="strokeWidth"
                    refX="0"
                    refY="4"
                    fill="#000">
                <polyline points="0,0 8,4 0,8">
                    <animate dur="3s"
                             repeatCount="indefinite"
                             attributeName="fill-opacity"
                             values="0;1;0">
                    </animate>
                </polyline>
            </marker>
        </defs>
        <path d="M 32 0 L 32 32"
              marker-end="url(#arrow-2)"
              stroke-width="3"
              stroke="#000"
              fill="none"
              stroke-dasharray="8,2">
            <animate dur="3s" repeatCount="indefinite" attributeName="stroke-opacity" values="0;1;0"></animate>
            <animate dur="3s" repeatCount="indefinite" attributeName="stroke-dashoffset" values="0;-80;-160"></animate>
        </path>
    </svg>
    <em>SMIL is <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/5o0yiO440LM/59rZqirUQNwJ">deprecated</a>,
        <br>
        no CSS</em>
</div>
<div>
    <strong>CSS Animation</strong>
    <style>
        #svg-3 > * {
            animation-name: svg-3;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
​
        @keyframes svg-3 {
            0% {
                opacity: 0;
                stroke-dashoffset: 0;
            }
​
            50% {
                opacity: 1;
                stroke-dashoffset: -80;
            }
​
            100% {
                opacity: 0;
                stroke-dashoffset: -160;
            }
        }
    </style>
    <svg id="svg-3" width="64" height="64">
        <defs>
            <marker id="arrow-3"
                    orient="auto"
                    viewBox="0 0 8 8"
                    markerWidth="8"
                    markerHeight="8"
                    markerUnits="strokeWidth"
                    refX="0"
                    refY="4"
                    fill="#000">
                <polyline points="0,0 8,4 0,8"></polyline>
            </marker>
        </defs>
        <path d="M 32 0 L 32 32"
              marker-end="url(#arrow-3)"
              stroke-width="3"
              stroke="#000"
              fill="none"
              stroke-dasharray="8,2">
        </path>
    </svg>
</div>
<div>
    <strong>Web Animation</strong>
    <svg id="svg-4" width="64" height="64">
        <defs>
            <marker id="arrow-4"
                    orient="auto"
                    viewBox="0 0 8 8"
                    markerWidth="8"
                    markerHeight="8"
                    markerUnits="strokeWidth"
                    refX="0" refY="4">
                <polyline points="0,0 8,4 0,8"></polyline>
            </marker>
        </defs>
        <path d="M 32 0 L 32 32"
              marker-end="url(#arrow-4)"
              stroke-width="3"
              stroke="#000"
              fill="none"
              stroke-dasharray="8,2">
        </path>
    </svg>
    <em><a href="https://caniuse.com/#feat=web-animation">limited</a> use,
        <br>
        polyfill <a href="https://github.com/web-animations/web-animations-js">available</a></em>
    <br>
    <br>
    <button onclick="loadPolyfill()">Run with polyfill</button>
</div>
​
<script>
    function loadPolyfill() {
        var s = document.createElement('script');
        s.src = 'web-animations.min.js';
        document.body.appendChild(s);
        s.onload = startAnimation;
    }
​
    function startAnimation() {
        try {
            document.getElementById('svg-4').querySelector('path').animate([
                {opacity: 0, strokeDashoffset: 0},
                {opacity: 1, strokeDashoffset: -80},
                {opacity: 0, strokeDashoffset: -160}
            ], {
                duration: 3000,
                iterations: Infinity
            });
        } catch (ign) {
        }
    }
​
    startAnimation();
</script>
</body>
​
    