Finis Logo

by Ayyappan Sakthivadivel

HTML

<svg
    xmlns="http://www.w3.org/2000/svg" stroke="hsl(50.59deg 100% 50%)" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="9.5" fill="none" stroke="#f0f0f0"></circle>
    <g>
        <circle
    cx="12"
    cy="12"
    r="9.5"
    fill="none"
    stroke="hsl(50.59deg 100% 50%)"
    stroke-width="1.15"
    stroke-linecap="round"
    stroke-dasharray="20 1" />
            <animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/>
            <animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/>
        </circle>
            <animateTransform attributeName="transform" type="rotate" dur="3s" values="0 12 12;360 12 12" repeatCount="indefinite"/>
    </g>

<g id="layer1" transform="translate(-132.5,-130.5)">
    <path d="m 144.18303,141.90996 c -1.89538,-0.35645 -4.3299,-0.76547 -5.5017,-2.20996 l -1.62716,1.26003 c 0,0 1.5532,1.56746 7.12886,0.94993 z" fill="hsl(50.59deg 100% 50%)" id="path1" style="stroke-width:0"/>
    <path d="m 139.62414,143.79995 2.16628,1.62359 c 0,0 1.20389,-2.16359 10.76903,-2.88539 -0.96418,-0.1916 -10.93566,-0.49279 -12.93086,1.2618" fill="hsl(50.59deg 100% 50%)" id="path2" style="stroke-width:0"/>
  </g>
</svg>