studios-doodle/index.html

SVG JavaScript utility to Animate marker element along path with tail

<div id="wrapper">
    <svg version="1.1" class="" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="540px" viewBox="0 0 0 " enable-background="new 0 0 17.191 29.535" xml:space="preserve" style="background: linear-gradient(to top, hsl(30, 89%, 43%),hsl(30, 87%, 49%), hsl(37, 86%, 54%), hsl(37, 88%, 58%));">
        <g class="translateGroup">
            <line class="lines" x1="0" y1="0" x2="600" y2="0" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="65" x2="600" y2="65" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="130" x2="600" y2="130" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="195" x2="600" y2="195" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="260" x2="600" y2="260" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="325" x2="2000" y2="325" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="390" x2="600" y2="390" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="455" x2="600" y2="455" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="0" y1="0" x2="0" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="40" y1="0" x2="40" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="80" y1="0" x2="80" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="120" y1="0" x2="120" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="160" y1="0" x2="160" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="200" y1="0" x2="200" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="240" y1="0" x2="240" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="280" y1="0" x2="280" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="320" y1="0" x2="320" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
            <line class="lines" x1="360" y1="0" x2="360" y2="700" style="stroke-width:1; opacity: .1; stroke: white;" />
        </g>
        <circle r="20%" stroke="#ffd200" class="prefix__puls" fill="none" cx="50%" cy="50%" style="animation: 3s ease-in-out 1.2s infinite alternate none running circle-small-scale;"></circle>
    </svg>
</div>

<script type="text/javascript" src="index.js"></script>
<script>
    studiousDoodle({
        d: 'M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z',
        speed: 4,
        head: {
            elem: 'circle',
            r: 3,
            fill: '#fff'
        },
        tail: {
            'stroke': 'white',
            'fill': 'none',
            'stroke-width': 2,
            'stroke-dasharray': '3 4'
        },
        onStart: ({
            tail
        }) => {
            console.log(tail)
        }
    });

</script>