Strip down SVG to one part of it - image
I am not very familiar with SVG and was hoping I can filter out a part of an existing SVG. I have the following SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1223" height="331" viewBox="-2 47 1223 331">
<defs>
<clipPath id="a">
<path d="M84.5 208.2c77.3-15 161.7-47.3 237.1-70.1C529.6 81.8 747.8 29.3 962.2 6.4c34-3 72.4-4.4 104.2 9.8 26 11.3 55.5 31.9 80.4 45.2 15.2 8.3 36.4 17.8 47.7 31.6 22 24.8 33.4 63.8 19.7 95.2-44.8 77.5-174.6 122.4-256.8 149.3-86.8 19-180.7 22.3-269.3 22-157.6-3-324.7-17.4-481.4-33.2-28.6-2.3-63-2.1-91.7-.1-19.7.9-54.5 6.2-74.3 3.3l-4.2-1.1c-3.3-1.5-9.7-5.8-12.7-8l-5.5-5.5C1.9 293.5 2 263.4 8.3 238.3l2.5-5 3.6-4.1 4.7-3c20-8.7 44.1-13.8 65.4-18z" />
</clipPath>
<pattern id="b" width="39.37" height="39.37" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" viewBox="0 0 100 100">
<path fill="#71CE01" d="M0 0h100v100H0z" />
<path fill="#359200" opacity=".15" d="M0 0h50v100H0z" />
<path fill="#359200" opacity=".15" d="M0 0h100v50H0z" />
</pattern>
</defs>
<g clip-path="url(#a)" transform="rotate(366.63 612 182)">
<path d="M-62-492l1348 0 0 1348-1348 0z" fill="#358806" />
<path d="M1050 142.3a39 39 0 00-9.7-25.3c-1.5-1.6-3.3-3-5.2-4.4-1.9-1.4-4-2.5-6.1-3.4-7.2-3.3-15.3-3.4-23-2.4-7.4.9-14.6 2.5-21.7 4.7-7 2.4-13.8 5.1-20.8 7.4-4 1.3-7.9 2.8-12 3.4-8.7 1.6-17.6.3-26.2-1.6-5.4-1.2-11-2.6-16.6-3-4.7-.5-9.4 0-14.1.1-7.2.2-14.3 1.2-21.5 2-4.9.4-9.8 1.4-14.7 2-5.6.7-11.3 1-17 2-12.4 2.4-24 7.8-36 12-5.2 2-10.4 3.9-15.5 6-5.6 2.3-11.1 4.6-16.8 6.5-7.8 2.5-15.3 5.8-23.2 7.7-5.3 1.4-10.8 2-16.2 2.8-3 .4-6 1-9 1.3-4 .3-8 .4-11.8.5-9 0-18 .4-26.8-1-8.8-1-17.6-2.3-26.4-3.3-3.8-.4-7.7-.8-11.5-1.1-4.7-.3-9.4-.5-14-.6-6.6 0-13 .6-19.6 1.2-6.8.3-13.6 1.7-20.2 3.5-3.5 1-7 2-10.5 3.1-4 1.2-7.8 2.6-11.3 4.7a34 34 0 00-5.3 3.8c-1.6 1.5-3 3.3-4.4 5.1-1.4 1.9-2.9 3.7-4.1 5.7a60 60 0 00-4.7 9.8c-1.3 3.4-2.6 7-3.2 10.6-1 5.8 0 11.8 1.4 17.4 1.4 5 3 9.9 5 14.6a47 47 0 007 11c4 4.6 9 8.5 14.5 11.3 3.6 1.9 7.5 3 11.4 4.3 7 2.4 14.4 2.7 21.7 3.2 4.7.3 9.4.8 14 .6 9.2-.1 18.3-1 27.4-2.2 11.7-1.7 23.4-3.4 34.8-6.6 9.6-2.5 19-5.7 28.4-8.6 8.8-2.4 17.9-3.8 27-3.5 5.3.5 10.6 1.3 16 2 3.7.5 7.5 1.2 11.3 1.6 8.8.5 17.7.4 26.5-.7 4.7-.7 9.4-1.8 14-3.1 5.5-1.9 11-3.8 16.5-5.5 8.4-2.5 16.9-5 25-8.1 7.6-3 14.8-7 22.3-10 6-2.6 11.9-5.3 18-7.2 3-1 5.8-2 8.7-2.6 7.7-1.7 15.7-1.6 23.5-1.7 4.6-.1 9.2-.5 13.6-1.8 3.2-1 6.3-2.4 9-4.2 4.3-2.9 8.4-6.1 12.8-8.7 3.6-1.8 7.4-3.4 11.3-4.5 6.1-1.2 12.5-1.1 18.6-1.6 7-.4 14.2-.7 21-2.8 6.3-1.8 12.5-4.2 18.1-7.7 4.2-2.8 7.9-6.2 11.4-9.7 1.9-2.1 3.3-4.6 4.6-7a38 38 0 004.3-18zm-5 .8c0 5.6-1.6 11-4.3 15.9-1.3 2.5-3 4.8-5.2 6.7a53.2 53.2 0 01-9.2 7.5c-5 3-10.6 5.1-16.3 6.7-5.4 1.7-11.2 2.2-16.9 2.4-6.4.4-13 .7-19.4 1.4-3.2.4-6.3 1.6-9.4 2.8-3 1.2-5.9 2.4-8.5 4.2-6 3.8-11.4 9-18.4 11-4.6 1.3-9.3 1.6-14 1.6-6.2.1-12.5.2-18.6 1-5 .7-9.8 2.4-14.6 4-11.8 4-23 9.6-34.2 14.8-10.2 4.5-21 7.4-31.7 10.7-4.6 1.4-9.3 3-13.9 4.6a123 123 0 01-10.2 2.5c-5.8 1.2-11.9 1.4-17.9 1.6-4.6 0-9.2.1-13.8-.6a442 442 0 00-25-3.3c-5-.3-10.1.3-15 .9-8.6 1-16.8 3.8-24.9 6.5a464.7 464.7 0 01-20.2 5.8c-7.2 1.8-14.6 3-22 4.2-9.8 1.6-19.7 3-29.6 3.3-6.5.4-13 .1-19.6-.4-4.6-.4-9.3-.5-13.9-1.3-3.1-.5-6.2-1.5-9.2-2.5-2.7-1-5.4-1.8-8-3-8.1-4.2-15-11-19-19.3-1.2-2.6-2-5.5-3-8.2-1.8-5.1-3.3-10.4-3.6-15.8-.4-5 1-9.8 2.8-14.3 1.3-3.7 3-7.2 5-10.5a97 97 0 015.8-7.7c1.6-2 3.6-3.4 5.8-4.7 4-2.6 8.7-3.8 13.2-5.3 8-2.3 16.2-4.8 24.6-5.3 8-.6 16-1.7 24.1-1.3 18 .3 35.8 3.4 53.7 5.5 5.2.5 10.4.5 15.6.4 5.9 0 11.8 0 17.7-.4 4.3-.4 8.7-1.2 13-1.8 4.4-.7 9-1.2 13.3-2.3 5.9-1.3 11.5-3.4 17-5.5 6-2 12-4 17.7-6.3 10.2-4.3 20.5-8.2 30.8-12 7.8-2.9 15.6-6 23.7-8 6-1.4 12.3-1.6 18.4-2.3 5.6-.7 11.2-1.9 16.9-2.4 8.4-1 17-1.8 25.5-2 6.8-.5 13.5.5 20 2 10.3 2.4 20.8 4.5 31.3 2.7 4.7-.5 9.2-2.2 13.7-3.7 5.6-2 11.3-3.8 16.9-6 11.8-4.1 31-9 42.8-4.6 1.8.6 3.6 1.3 5.2 2.2 2.4 1.5 4.7 3.2 6.7 5.2a34 34 0 018.3 22.7zm112.4 19.2c-.3-9-1.6-18.1-4-26.8-1.6-5.9-4-11.7-8-16.3-3.4-3.9-7.8-6.8-12.5-8.9-6.4-3-14-4-20.8-1.6-4.3 1.8-8.1 5.1-10 9.4-1.7 3.6-2.5 7.6-3.5 11.5-2.7 9.7-5.3 14-11.9 21.5-3.1 3.6-5 8.1-5.5 12.9-.5 5.5.8 11.2 3.8 15.9 1.6 2.7 4 4.8 6.5 6.8 6.2 5 13.8 8 21.3 10.3 6.7 1.7 13.8 2.3 20.4.4 4-1.2 7.7-3.3 11.2-5.5 2-1.4 3.8-3.2 5.5-5 2.5-2.8 4.2-6.2 5.5-9.7 1.7-4.7 2-9.9 2-15zm-4 .6c0 5.5-.6 11.2-3.1 16.2a23.1 23.1 0 01-4.6 6.4 21.4 21.4 0 01-3.9 3.3c-3.1 2-6.4 3.8-10 4.8-5.7 1.6-11.8 1-17.6-.4-7-2.1-14-4.7-19.8-9.3-2.2-1.8-4.4-3.6-5.9-6-4.6-6.9-4.7-16.9.6-23.4 2.8-3.5 5.8-6.8 8.1-10.6 2.3-3.8 3.7-8 5-12.3 1-3.7 1.7-7.6 3.2-11.2 1.4-3.6 4.6-6.5 8.2-8 5.8-1.9 12.2-1 17.6 1.5 4 1.8 7.6 4.2 10.6 7.3 4.2 4.4 6.3 10.2 7.9 15.9 2.2 8.4 3.5 17 3.7 25.8z" fill="#4ca30d" />
<path d="M611.8 258.9c-6.5-.5-13.2-.7-19.5-2.8-3.8-1.2-7.6-2.3-11.2-4-4.7-2.5-9-5.8-12.6-9.8-2.7-3-4.9-6.4-6.6-10-1.1-2.5-1.9-5.2-2.8-7.7-1.9-5.4-3.4-11-3.6-16.7-.2-4.6 1.1-9.1 2.8-13.4 1.4-3.9 3.1-7.6 5.3-11 2.2-3 4.4-6.2 7-8.9 5.6-5 12.8-6.8 19.7-9 5.7-1.5 11.4-3.2 17.2-4.1 3.6-.6 7.3-.6 10.9-1 16.2-1.9 32.6-.4 48.7 1.7 8.3 1.2 16.6 2.1 24.8 3.1 5.7.4 11.4.4 17 .3a205.6 205.6 0 0016.2-.5c3.9-.5 7.8-1.2 11.7-1.7 5.8-.9 11.7-1.6 17.4-3.4 4.4-1.2 8.7-2.8 13-4.4 4.1-1.4 8.4-2.8 12.5-4.4 9.8-3.8 19.5-8 29.4-11.5 10.2-3.6 20.1-8 30.7-10.5 6.4-1.4 13-1.6 19.5-2.4 8.8-1.4 17.7-2.5 26.5-3.4 5-.6 10.1-.6 15.2-.8 9.8-.8 19.3 2.3 28.8 4 4.8 1 9.6 1.5 14.5 1.4 5.8-.2 11.6-1.2 17-3.2 4.8-1.6 9.5-3.1 14.2-4.8 3.6-1.3 7.2-2.8 11-4 8.6-2.5 17.5-4.5 26.5-4.7 3.5 0 7.1.2 10.5 1.2 2.1.7 4.2 1.5 6.2 2.6a39 39 0 015.6 4c4 3.7 6.7 8.8 8.4 14 3 10.5.9 21.3-5.7 30a61.3 61.3 0 01-10.6 9.4 60 60 0 01-9.6 4.9c-4.6 1.6-9.3 3.3-14.1 4-7.8 1.2-15.8 1-23.7 1.8-3.3.2-6.8.3-10 1.3-2.5.7-4.8 1.6-7.2 2.6-2 .8-3.9 1.6-5.6 2.8-5 3-9.4 6.8-14.4 9.7-5.4 3-11.6 3.6-17.6 3.7-6.6.1-13.2 0-19.8 1-2.5.3-5.1.8-7.7 1.5-2.5.8-5 1.7-7.5 2.5-11 3.8-21.5 8.8-32 13.8-10.9 5-22.5 8.2-33.9 11.7-4.6 1.4-9.3 3-13.9 4.6-3.6 1-7.3 2-11 2.7-9.2 1.6-18.8 1.6-28.2 1.1-7.7-1-15.4-2.2-23.2-3.1a49 49 0 00-12-.4c-8.5.5-17 2.2-25 5-10.6 3.3-21.1 6.6-31.9 9-8 2-16.1 3.1-24.3 4.4-9.6 1.3-19.3 2.3-29 2.4-4.6.2-9.3-.4-14-.6zM1091 152.3c2.6-3 5-6 6.8-9.3a65 65 0 005-13.5c1.1-4.2 1.9-8.6 4.4-12.1 2.4-3 5.8-5.3 9.7-5.7 5-.9 10.3.2 15 2.5 3.8 1.8 7.5 4.2 10.3 7.4 5 5.6 7.1 13 8.8 20.3 1.3 6.5 2.3 13.1 2.5 19.8.1 5.9-.4 12-3.1 17.4-.8 1.5-1.7 3-2.7 4.3a38.9 38.9 0 01-3.7 3.9c-1.5 1.3-3.2 2.2-5 3.2-3 1.7-6.1 3.2-9.6 3.7-7 1-14.2-.3-20.7-2.8-4.7-1.8-9.4-3.8-13.4-6.9-3.3-2.5-6.5-5.4-8.2-9.2-2.1-4.8-2.5-10.3-1-15.3 1-2.9 3-5.4 5-7.7z" fill="#71ce01" />
<path d="M1096 156.5c2.7-3.2 5.3-6.6 7.5-10.3a71 71 0 005.4-14.2c1-3.5 1.4-7.4 3.3-10.5 1-1.3 2.2-2.2 3.6-2.9.8-.3 1.7-.4 2.5-.5 3.7-.5 7.4.4 10.6 2a25 25 0 018.2 5.7c3.8 4 5.3 9.5 6.7 14.8 2.2 9.3 4.4 22.7 2 32a19.8 19.8 0 01-7 10.3c-2.8 1.8-5.7 3.6-9 4.4-5.7 1.4-11.8.4-17.4-1.5-3.1-1.2-6.3-2.4-9.3-4a35 35 0 01-6.8-4.9 12.7 12.7 0 01-3.2-4 15 15 0 01-.8-10.8c.7-2.1 2.2-3.9 3.6-5.6zM586 174c7.9-2.5 15.9-5 24.1-6.2 6.8-.5 13.7-1.2 20.5-1.5 3.3-.2 6.6 0 9.9.1 12.5.5 24.9 2.4 37.2 4 5.3.4 10.4 1.4 15.7 1.7 4.5.3 9 .3 13.5.2 6.3 0 12.5-.1 18.8-.6 4.7-.5 9.4-1.4 14-2 4.6-.7 9.1-1.3 13.5-2.5 5.3-1.3 10.5-3.2 15.6-5 3.7-1.4 7.5-2.6 11.2-4 4.8-1.7 9.5-3.7 14.3-5.7A967 967 0 01811 146c10.3-3.6 20.3-8.2 31-10.6 5.3-1 10.8-1.3 16.2-2 4.2-.3 8.3-1.2 12.4-1.7 9.1-1 18.3-2.3 27.5-2.4 3.7-.2 7.4-.4 11.1 0 8.5 1 16.8 3.8 25.3 4.7 3.3.4 6.6.7 9.9.6 4.2-.2 8.3-.7 12.4-1.6 7-1.9 14-4.5 20.8-6.8 6.4-2.4 12.8-4.8 19.5-6.2 5.5-1.1 11-2.1 16.6-2.2 3.4 0 6.9.4 10 1.8 2 .7 4 1.9 5.7 3.2.8.7 1.6 1.3 2.3 2 .7.7 1.2 1.5 1.8 2.3a27 27 0 013 25.1 33 33 0 01-3.6 6.7c-1 1.1-2 2.1-3.1 3.1-2.2 2.1-4.5 4-7 5.6a53.6 53.6 0 01-10 4.5c-5.5 2-11.2 3.3-17.2 3.5a584.3 584.3 0 00-17.4 1.1c-2.8.3-5.7.4-8.5 1-3 .8-6 2-9 3.1-2 .9-4 1.6-5.8 2.7-5.4 3-10 7.2-15.4 10.3-1.2.7-2.5 1.2-3.8 1.6-1.6.4-3.2.7-4.8 1-9.9.8-19.9 0-29.7 1.9-3.4.6-6.7 1.6-10 2.7a138 138 0 00-14.2 5.3c-3.5 1.6-7.1 3-10.6 4.6-5.5 2.5-10.9 5.3-16.4 7.5-8.4 3.4-17 5.9-25.7 8.5-5.3 1.6-10.7 3.4-16 5.3-5.5 1.5-11.2 2.9-17 3.3-6.6.4-13.3.6-20 .2-8.5-1.3-17-2.5-25.7-3.5-4.9-.5-9.8 0-14.7.4-9.7.9-19 3.6-28.2 6.7-8.3 2.6-16.6 5.1-25.1 7-9.3 2.1-18.7 3.6-28.1 4.9-9.4 1-18.8 2-28.3 1.7-4.7-.3-9.5-.5-14.2-1-2.7-.2-5.4-.3-8-.8-2.7-.5-5.3-1.4-8-2.2-2.3-.8-4.7-1.6-7-2.7-5.5-2.8-10.4-7-13.8-12.3a36 36 0 01-4.1-8.9c-1-3-2-6-2.9-8.9-1-4-1.7-8-1-12.2.8-4.1 2.4-8.1 4.1-12 1-1.8 1.8-3.7 3-5.3 1.9-2.5 3.7-5 5.8-7.2 3.1-2.6 6.9-4.3 10.7-5.5z" fill="url(#b)" />
<path d="M264.8 231.8l30.2-3.1 3.2 35-30.5 2.4zm-88.9 9l60-6.6 4.6 41-60.3 6.1zM25 268.4l74.1-9.2 3.4 29-74.1 8.8z" fill="#71ce01" />
<path d="M1141.6 123.6c6.6 7.9 9 23.9 9.9 34 .8 9.5 0 20-7.2 27-1.8 1.8-4 3.2-6.1 4.4-3.1 1.7-6.4 3.2-10 3.6-7.5 1-15-1-21.9-4-5.3-2-10.3-5-14.3-9.1-2.6-2.5-4.1-5.9-4.9-9.3-1-6.1.4-11.6 4.6-16.1 3-3.5 5.8-7 8-11.1 2-4 3.5-8.4 4.6-12.7 1-3.6 1.6-7.3 3.3-10.6 1.3-2.4 3.6-4.2 6-5.4 3.1-1.3 6.6-1.4 9.8-1 6.5 1 14 5.1 18.2 10.3z" fill="#92f100" />
<path d="M1096.2 133.5c-2.2 6-6 11.5-12.2 13.8-4 1.2-8.8.6-12.5-1.7-3-1.9-5.1-4.4-5.8-8-.7-3.1-.7-6.5-1.4-9.7-.6-2.5-1.6-4.9-2.5-7.2-1-2.3-1.4-4.7-1.4-7.2-.1-3.6.9-7.6 3.4-10.3 3.3-3.2 8.4-2.4 12.5-1.7 7.7 1.6 13.6 2.9 18.3 9.7 4.5 6.5 4.4 15.2 1.6 22.3zm-30.3 62.2c-2.6 6.6-7.6 11.5-15.1 9.8-4-.8-7.7-3.3-10-6.7-2-4-2-9.3-.8-13.6.3-1.7 1.4-3.1 2.6-4.5 1-1.3 2.2-2.8 3.4-4 4.8-4.6 12-8.7 18.8-8.4 5.2.6 11.5 2.7 13 8.2.7 2.5.3 5.3-1 7.5-.6 1.4-1.4 2.8-2.9 3.4-6 2.5-5.6 2.3-8 8.3zm-79.8 23a57 57 0 00-2.7 8.7c-.6 2.4-1 5.2-3 6.9-2.3 2-5.6 2.6-8.6 2.9-2.9.3-5.9.2-8.5-1.1-1.9-1-3.6-2.3-5-3.8-3.2-3.4-.4-8.2.7-12 .7-1.7.8-2.6-.4-4.1-2.4-3.8-6.6-8.5-4-13.1.7-1.4 1.7-2.7 3.2-3.4 2.8-1.2 5.9-1.6 8.7-2.9 1.6-.6 2.9-1.9 4.4-2.7a11 11 0 0110.5.8c2 1.4 4.4 2.6 5.7 4.7 2.1 4.3 2 9.4 1 14-.4 1.8-1.3 3.4-2 5zm-82.4 38.5c-1.5.6-2.5 2-3.5 3.2a21 21 0 01-3.8 3.7c-3.9 3.1-11.4 4.2-15.9 2-1.7-1-3.1-2.4-4.6-3.7-2.2-1.9-4.5-3.9-6.3-6.2-1.2-1.5-2.7-3-3.6-4.7-2.6-4.9-2.5-9.5-2-14.8.4-4.8 4.2-9.1 9-9.6 1.6-.2 3.2-.5 4.7-.7 1.4-.1 2.8-.2 4.1-.7 3.9-1.8 7.7-4 12-4.4 2.4-.3 4.8 1 6.2 2.8.7 1.2 1 2.4 1.8 3.5.5.8 1 1.7 1.7 2.3 1.4 1 3 1.8 4.4 2.6 4.1 2.3 10.9 4 11.6 9.5.4 4.2-3.1 7.6-6 10.1-2.9 2.5-6.5 3.5-9.8 5z" fill="#ffff9f" />
<path d="M115 302.4c0-3.3 3.7-5.5 6.6-4 3.3 1.5 3.3 6.4 0 8-3 1.5-6.6-.8-6.5-4zM55 245c0 3.4.1 6.9-.7 10.2-.6 2-1 4.2-2 6l-.2.2-.2.2c-2.7 1-5.9 1-8.8 1.4-4.8.5-9.7 1-14.5 1.7-2.7.5-5.7.8-7.9 2.7-.8.6-1.2 1.5-1.8 2.3l-.1 0-.1 0-.1 0-.2 0c-1-1.2-1.4-2.7-2.1-4-.8-1.6-1.8-3.1-2.6-4.7-1-2.5-1-5.3-1.7-7.9 14.4-1.9 28.7-5.3 43-8zm49.4-11.6c.1 3.5.4 6.9.7 10.3-9.4.4-15 .8-23.4-4.5-.3-3.5-1.2-7-1.6-10.5-.2-2-.8-4.6 1-6.1 4.1-3.4 10.4-1.8 14.6.4 4.6 2 7 6 8.7 10.4zM79 322.8c-3 .6-6 1-9 1.5-1.2.1-2.3.5-3.5.5l-.1-.1c-.4-1-.2-2-.1-3 .2-1.9 1.7-3.4 3.2-4.3 3.4-1.7 7.7-2.3 11.3-1.2 1.5.5 3.2 1.1 4 2.5.3 1 0 2-.2 3-1.8.5-3.8.7-5.6 1zm130.6-13.2c-5.7-1-11.4-1.7-17-3-9.8-2.4-19.4-5.7-28-11 1.6-1 3.2-1.8 5-1.9 3.8-.1 7.5.6 11.2 1 10.8 1.3 21.7 2 32.6 3 15.5 1.3 31.2.7 46.7-1 8.6-1.1 13.1-.1 16.2 8.7a52 52 0 012.3 10c.5 3 .2 6-1.2 8.7-4.2-1-8.4-2.2-12.3-4.1-3-1.5-5.6-3.5-8.6-4.9a27.8 27.8 0 00-10.3-2.6c-5.8-.4-11.7-.2-17.5-.6-6.4-.3-12.8-1.2-19.1-2.3z" fill="#b58254" />
<path d="M1205 223.9c-13.5-.9-32.7-3.6-46-1.3-18 3.7-37.4 9-54.2 16.5-4.6 2.4-11.4 7.4-15.6 10.6-9.1 6.3-20.6 13-30.5 17.9-15.9 8-35.8 17.6-51.8 25.2-5.7 2.4-12.4 4.3-18.6 4.6-13.7 1-31-1.2-44.8.5-14.2 2.3-29 7.1-42.4 12.3-6.6 2.5-24 11.5-30.8 13.7-5.7 1.3-12.6 1.8-18.4.4-11-4.9-24.9-12-36.4-15.5-18.7-5.3-39.6-8.6-59-6-17.6 2.5-37 11.8-53.6 18-11.3 4.6-25.2 11.9-37.6 12.3-20.2 1.9-43.5-2.2-63.7-3.4-8 0-31.6 2.2-40 2.9-13 1.2-26.1-3.2-37.8-8.5-6.2-2.6-13-7.9-19.8-9-45.4 4.9-93.3-8.4-138.7-2.7l-3.5 1.3c-4.8 2.2-9.5 7-13.2 10.7-3.6 3.3-9.5 7.2-13.7 9.9-17.7-3.5-50.6-7.1-67.2-13.2-17.7-9.8-16.7-8.6-36.9-9-27.9-2.6-60.2-6.2-80-28.2-18.4-19.9-27.4-54-21.2-80.4-15.2-2-123.3 18.7-140.7 21.4l23.4 125.6c51.4-9.2 112.6-22 164.9-20.5 20.8 5.6 47 6.4 68.4 9 35.4 7.2 80.9 16.5 116 25.5l.7-24.7-2.4-3.3-1-2.2-.2-1.3c0-.9.1-2.5.3-3.3l.4-1.4 1-1.6 1.4-1.3c5.2-3.6 11.9-5.3 18.2-5.6 39.7-1.5 82 7 121.8 3.5l2 .4c34.4 17.4 42.2 19 80.6 15.1 23.9-2 49.4 3.5 73.4 2.5 10.2-.2 21.6-2.2 31-6.2 38.5-15.2 68.3-32.2 111.2-22.4 20.2 3.3 38.2 19.2 58.8 20.3 17.8 1.2 34.5-12 50.8-17.3 12.2-4.3 27.2-9.4 40.2-10.2 12.1-.3 28.6 1.4 40.6-.5 23.7-3.3 54.6-22.7 76.2-32.4 15-7.2 34.4-22.4 49.6-29.2 16.2-6.3 34.2-11.5 51.6-13.6 16.8 0 37.3 2.5 54.1 2.6l6.4-7.6-23.3-1zM84.6 321.8c-3.5.7-13.9 2.4-17.6 3l-.5-.2-.2-.9 0-1.7.4-1.5.7-1.2 1.3-1.3 1.3-.8 1.7-.7c1-.4 3.5-.7 4.6-.8l2.7 0 2.6.7 2.3 1.2.6.5.4.6 0 1.1-.3 2zm48.6-14.5l-1 2.2-1.4 1.8-1.7 1.4-2 1c-1.5.6-26.6 4.4-29 4.8l-.9-.1-.8-.6c-1.3-1.4-6-6.8-7.5-7.8l-2-1.3-2.2-1-2.3-.5-5.8-.6-1.2-8-3.8.4 1.1 8-3.2.7-3.2 1.5-2.7 1.8-2.8 2.7-1.6 2.3-1.3 2.5-1.4 4-.7 4.3-.4.4-.4.2c-5.9 1.2-13.4 2.6-19.4 2.4l-3.3-.7-3-1.1-2.6-1.5-2.4-2-1.5-1.7-1.4-2c-1.4-2.9-2.4-7.2-3-10.2-2.1-14.2-11-55.7-13.8-70.2l0-1 1.2-.3 2.2-.3 2.2 13.6.4.6.5.2c16.8-2 53-9.9 70-13.3l.4-.4.1-.9c-.4-2.9-2-11-1.7-13.9l.3-1 .8-1 1.3-1 1.4-.5 1.7-.4c5.1-.4 10.5 1.8 14.4 5.2.6.6 1.7 2 2.1 2.7l2.3 4.8c.5 11.6 2.5 24.7 7.4 35.2 4.2 11.6 11.8 21.8 20.5 30.3l.7 2 .6 2.9 0 2-.2 1.4z" fill="#b4b4b4" stroke-opacity=".5" stroke="#000" stroke-width=".3" />
</g>
</svg>
Now I would like to filter out one part of the SVG where fill is equal to
"#92f100"
Is it it possible to create a new SVG that only shows the above part?
You might use a simple js query like so:
let filtered = document.querySelectorAll('[fill="#92f100"]');
and then remove these elements
filtered.forEach(function(el,i){
el.remove()
})
let svg = document.querySelector('svg');
let filterColor = '#92f100';
let filtered = svg.querySelectorAll('[fill="' + filterColor + '"]');
//filterOut(filtered);
function filterOut(filtered) {
filtered.forEach(function(el, i) {
el.remove()
})
}
//getFiltered(svg, filtered);
function getFiltered(svg, filtered) {
let defs = svg.querySelector('defs');
svg.innerHTML = '';
svg.appendChild(defs);
filtered.forEach(function(el, i) {
svg.appendChild(el);
})
}
svg {
display: block;
width: 75%
}
<p><button onclick="filterOut(filtered)" type="button">filter out (remove selection)</button>
<button onclick="getFiltered(svg, filtered)" type="button">get filtered (reduce to selection)</button></p>
<svg xmlns="http://www.w3.org/2000/svg" width="1223" height="331" viewBox="-2 47 1223 331">
<defs>
<clipPath id="a">
<path d="M84.5 208.2c77.3-15 161.7-47.3 237.1-70.1C529.6 81.8 747.8 29.3 962.2 6.4c34-3 72.4-4.4 104.2 9.8 26 11.3 55.5 31.9 80.4 45.2 15.2 8.3 36.4 17.8 47.7 31.6 22 24.8 33.4 63.8 19.7 95.2-44.8 77.5-174.6 122.4-256.8 149.3-86.8 19-180.7 22.3-269.3 22-157.6-3-324.7-17.4-481.4-33.2-28.6-2.3-63-2.1-91.7-.1-19.7.9-54.5 6.2-74.3 3.3l-4.2-1.1c-3.3-1.5-9.7-5.8-12.7-8l-5.5-5.5C1.9 293.5 2 263.4 8.3 238.3l2.5-5 3.6-4.1 4.7-3c20-8.7 44.1-13.8 65.4-18z" />
</clipPath>
<pattern id="b" width="39.37" height="39.37" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" viewBox="0 0 100 100">
<path fill="#71CE01" d="M0 0h100v100H0z" />
<path fill="#359200" opacity=".15" d="M0 0h50v100H0z" />
<path fill="#359200" opacity=".15" d="M0 0h100v50H0z" />
</pattern>
</defs>
<g clip-path="url(#a)" transform="rotate(366.63 612 182)">
<path d="M-62-492l1348 0 0 1348-1348 0z" fill="#358806" />
<path d="M1050 142.3a39 39 0 00-9.7-25.3c-1.5-1.6-3.3-3-5.2-4.4-1.9-1.4-4-2.5-6.1-3.4-7.2-3.3-15.3-3.4-23-2.4-7.4.9-14.6 2.5-21.7 4.7-7 2.4-13.8 5.1-20.8 7.4-4 1.3-7.9 2.8-12 3.4-8.7 1.6-17.6.3-26.2-1.6-5.4-1.2-11-2.6-16.6-3-4.7-.5-9.4 0-14.1.1-7.2.2-14.3 1.2-21.5 2-4.9.4-9.8 1.4-14.7 2-5.6.7-11.3 1-17 2-12.4 2.4-24 7.8-36 12-5.2 2-10.4 3.9-15.5 6-5.6 2.3-11.1 4.6-16.8 6.5-7.8 2.5-15.3 5.8-23.2 7.7-5.3 1.4-10.8 2-16.2 2.8-3 .4-6 1-9 1.3-4 .3-8 .4-11.8.5-9 0-18 .4-26.8-1-8.8-1-17.6-2.3-26.4-3.3-3.8-.4-7.7-.8-11.5-1.1-4.7-.3-9.4-.5-14-.6-6.6 0-13 .6-19.6 1.2-6.8.3-13.6 1.7-20.2 3.5-3.5 1-7 2-10.5 3.1-4 1.2-7.8 2.6-11.3 4.7a34 34 0 00-5.3 3.8c-1.6 1.5-3 3.3-4.4 5.1-1.4 1.9-2.9 3.7-4.1 5.7a60 60 0 00-4.7 9.8c-1.3 3.4-2.6 7-3.2 10.6-1 5.8 0 11.8 1.4 17.4 1.4 5 3 9.9 5 14.6a47 47 0 007 11c4 4.6 9 8.5 14.5 11.3 3.6 1.9 7.5 3 11.4 4.3 7 2.4 14.4 2.7 21.7 3.2 4.7.3 9.4.8 14 .6 9.2-.1 18.3-1 27.4-2.2 11.7-1.7 23.4-3.4 34.8-6.6 9.6-2.5 19-5.7 28.4-8.6 8.8-2.4 17.9-3.8 27-3.5 5.3.5 10.6 1.3 16 2 3.7.5 7.5 1.2 11.3 1.6 8.8.5 17.7.4 26.5-.7 4.7-.7 9.4-1.8 14-3.1 5.5-1.9 11-3.8 16.5-5.5 8.4-2.5 16.9-5 25-8.1 7.6-3 14.8-7 22.3-10 6-2.6 11.9-5.3 18-7.2 3-1 5.8-2 8.7-2.6 7.7-1.7 15.7-1.6 23.5-1.7 4.6-.1 9.2-.5 13.6-1.8 3.2-1 6.3-2.4 9-4.2 4.3-2.9 8.4-6.1 12.8-8.7 3.6-1.8 7.4-3.4 11.3-4.5 6.1-1.2 12.5-1.1 18.6-1.6 7-.4 14.2-.7 21-2.8 6.3-1.8 12.5-4.2 18.1-7.7 4.2-2.8 7.9-6.2 11.4-9.7 1.9-2.1 3.3-4.6 4.6-7a38 38 0 004.3-18zm-5 .8c0 5.6-1.6 11-4.3 15.9-1.3 2.5-3 4.8-5.2 6.7a53.2 53.2 0 01-9.2 7.5c-5 3-10.6 5.1-16.3 6.7-5.4 1.7-11.2 2.2-16.9 2.4-6.4.4-13 .7-19.4 1.4-3.2.4-6.3 1.6-9.4 2.8-3 1.2-5.9 2.4-8.5 4.2-6 3.8-11.4 9-18.4 11-4.6 1.3-9.3 1.6-14 1.6-6.2.1-12.5.2-18.6 1-5 .7-9.8 2.4-14.6 4-11.8 4-23 9.6-34.2 14.8-10.2 4.5-21 7.4-31.7 10.7-4.6 1.4-9.3 3-13.9 4.6a123 123 0 01-10.2 2.5c-5.8 1.2-11.9 1.4-17.9 1.6-4.6 0-9.2.1-13.8-.6a442 442 0 00-25-3.3c-5-.3-10.1.3-15 .9-8.6 1-16.8 3.8-24.9 6.5a464.7 464.7 0 01-20.2 5.8c-7.2 1.8-14.6 3-22 4.2-9.8 1.6-19.7 3-29.6 3.3-6.5.4-13 .1-19.6-.4-4.6-.4-9.3-.5-13.9-1.3-3.1-.5-6.2-1.5-9.2-2.5-2.7-1-5.4-1.8-8-3-8.1-4.2-15-11-19-19.3-1.2-2.6-2-5.5-3-8.2-1.8-5.1-3.3-10.4-3.6-15.8-.4-5 1-9.8 2.8-14.3 1.3-3.7 3-7.2 5-10.5a97 97 0 015.8-7.7c1.6-2 3.6-3.4 5.8-4.7 4-2.6 8.7-3.8 13.2-5.3 8-2.3 16.2-4.8 24.6-5.3 8-.6 16-1.7 24.1-1.3 18 .3 35.8 3.4 53.7 5.5 5.2.5 10.4.5 15.6.4 5.9 0 11.8 0 17.7-.4 4.3-.4 8.7-1.2 13-1.8 4.4-.7 9-1.2 13.3-2.3 5.9-1.3 11.5-3.4 17-5.5 6-2 12-4 17.7-6.3 10.2-4.3 20.5-8.2 30.8-12 7.8-2.9 15.6-6 23.7-8 6-1.4 12.3-1.6 18.4-2.3 5.6-.7 11.2-1.9 16.9-2.4 8.4-1 17-1.8 25.5-2 6.8-.5 13.5.5 20 2 10.3 2.4 20.8 4.5 31.3 2.7 4.7-.5 9.2-2.2 13.7-3.7 5.6-2 11.3-3.8 16.9-6 11.8-4.1 31-9 42.8-4.6 1.8.6 3.6 1.3 5.2 2.2 2.4 1.5 4.7 3.2 6.7 5.2a34 34 0 018.3 22.7zm112.4 19.2c-.3-9-1.6-18.1-4-26.8-1.6-5.9-4-11.7-8-16.3-3.4-3.9-7.8-6.8-12.5-8.9-6.4-3-14-4-20.8-1.6-4.3 1.8-8.1 5.1-10 9.4-1.7 3.6-2.5 7.6-3.5 11.5-2.7 9.7-5.3 14-11.9 21.5-3.1 3.6-5 8.1-5.5 12.9-.5 5.5.8 11.2 3.8 15.9 1.6 2.7 4 4.8 6.5 6.8 6.2 5 13.8 8 21.3 10.3 6.7 1.7 13.8 2.3 20.4.4 4-1.2 7.7-3.3 11.2-5.5 2-1.4 3.8-3.2 5.5-5 2.5-2.8 4.2-6.2 5.5-9.7 1.7-4.7 2-9.9 2-15zm-4 .6c0 5.5-.6 11.2-3.1 16.2a23.1 23.1 0 01-4.6 6.4 21.4 21.4 0 01-3.9 3.3c-3.1 2-6.4 3.8-10 4.8-5.7 1.6-11.8 1-17.6-.4-7-2.1-14-4.7-19.8-9.3-2.2-1.8-4.4-3.6-5.9-6-4.6-6.9-4.7-16.9.6-23.4 2.8-3.5 5.8-6.8 8.1-10.6 2.3-3.8 3.7-8 5-12.3 1-3.7 1.7-7.6 3.2-11.2 1.4-3.6 4.6-6.5 8.2-8 5.8-1.9 12.2-1 17.6 1.5 4 1.8 7.6 4.2 10.6 7.3 4.2 4.4 6.3 10.2 7.9 15.9 2.2 8.4 3.5 17 3.7 25.8z" fill="#4ca30d" />
<path d="M611.8 258.9c-6.5-.5-13.2-.7-19.5-2.8-3.8-1.2-7.6-2.3-11.2-4-4.7-2.5-9-5.8-12.6-9.8-2.7-3-4.9-6.4-6.6-10-1.1-2.5-1.9-5.2-2.8-7.7-1.9-5.4-3.4-11-3.6-16.7-.2-4.6 1.1-9.1 2.8-13.4 1.4-3.9 3.1-7.6 5.3-11 2.2-3 4.4-6.2 7-8.9 5.6-5 12.8-6.8 19.7-9 5.7-1.5 11.4-3.2 17.2-4.1 3.6-.6 7.3-.6 10.9-1 16.2-1.9 32.6-.4 48.7 1.7 8.3 1.2 16.6 2.1 24.8 3.1 5.7.4 11.4.4 17 .3a205.6 205.6 0 0016.2-.5c3.9-.5 7.8-1.2 11.7-1.7 5.8-.9 11.7-1.6 17.4-3.4 4.4-1.2 8.7-2.8 13-4.4 4.1-1.4 8.4-2.8 12.5-4.4 9.8-3.8 19.5-8 29.4-11.5 10.2-3.6 20.1-8 30.7-10.5 6.4-1.4 13-1.6 19.5-2.4 8.8-1.4 17.7-2.5 26.5-3.4 5-.6 10.1-.6 15.2-.8 9.8-.8 19.3 2.3 28.8 4 4.8 1 9.6 1.5 14.5 1.4 5.8-.2 11.6-1.2 17-3.2 4.8-1.6 9.5-3.1 14.2-4.8 3.6-1.3 7.2-2.8 11-4 8.6-2.5 17.5-4.5 26.5-4.7 3.5 0 7.1.2 10.5 1.2 2.1.7 4.2 1.5 6.2 2.6a39 39 0 015.6 4c4 3.7 6.7 8.8 8.4 14 3 10.5.9 21.3-5.7 30a61.3 61.3 0 01-10.6 9.4 60 60 0 01-9.6 4.9c-4.6 1.6-9.3 3.3-14.1 4-7.8 1.2-15.8 1-23.7 1.8-3.3.2-6.8.3-10 1.3-2.5.7-4.8 1.6-7.2 2.6-2 .8-3.9 1.6-5.6 2.8-5 3-9.4 6.8-14.4 9.7-5.4 3-11.6 3.6-17.6 3.7-6.6.1-13.2 0-19.8 1-2.5.3-5.1.8-7.7 1.5-2.5.8-5 1.7-7.5 2.5-11 3.8-21.5 8.8-32 13.8-10.9 5-22.5 8.2-33.9 11.7-4.6 1.4-9.3 3-13.9 4.6-3.6 1-7.3 2-11 2.7-9.2 1.6-18.8 1.6-28.2 1.1-7.7-1-15.4-2.2-23.2-3.1a49 49 0 00-12-.4c-8.5.5-17 2.2-25 5-10.6 3.3-21.1 6.6-31.9 9-8 2-16.1 3.1-24.3 4.4-9.6 1.3-19.3 2.3-29 2.4-4.6.2-9.3-.4-14-.6zM1091 152.3c2.6-3 5-6 6.8-9.3a65 65 0 005-13.5c1.1-4.2 1.9-8.6 4.4-12.1 2.4-3 5.8-5.3 9.7-5.7 5-.9 10.3.2 15 2.5 3.8 1.8 7.5 4.2 10.3 7.4 5 5.6 7.1 13 8.8 20.3 1.3 6.5 2.3 13.1 2.5 19.8.1 5.9-.4 12-3.1 17.4-.8 1.5-1.7 3-2.7 4.3a38.9 38.9 0 01-3.7 3.9c-1.5 1.3-3.2 2.2-5 3.2-3 1.7-6.1 3.2-9.6 3.7-7 1-14.2-.3-20.7-2.8-4.7-1.8-9.4-3.8-13.4-6.9-3.3-2.5-6.5-5.4-8.2-9.2-2.1-4.8-2.5-10.3-1-15.3 1-2.9 3-5.4 5-7.7z" fill="#71ce01" />
<path d="M1096 156.5c2.7-3.2 5.3-6.6 7.5-10.3a71 71 0 005.4-14.2c1-3.5 1.4-7.4 3.3-10.5 1-1.3 2.2-2.2 3.6-2.9.8-.3 1.7-.4 2.5-.5 3.7-.5 7.4.4 10.6 2a25 25 0 018.2 5.7c3.8 4 5.3 9.5 6.7 14.8 2.2 9.3 4.4 22.7 2 32a19.8 19.8 0 01-7 10.3c-2.8 1.8-5.7 3.6-9 4.4-5.7 1.4-11.8.4-17.4-1.5-3.1-1.2-6.3-2.4-9.3-4a35 35 0 01-6.8-4.9 12.7 12.7 0 01-3.2-4 15 15 0 01-.8-10.8c.7-2.1 2.2-3.9 3.6-5.6zM586 174c7.9-2.5 15.9-5 24.1-6.2 6.8-.5 13.7-1.2 20.5-1.5 3.3-.2 6.6 0 9.9.1 12.5.5 24.9 2.4 37.2 4 5.3.4 10.4 1.4 15.7 1.7 4.5.3 9 .3 13.5.2 6.3 0 12.5-.1 18.8-.6 4.7-.5 9.4-1.4 14-2 4.6-.7 9.1-1.3 13.5-2.5 5.3-1.3 10.5-3.2 15.6-5 3.7-1.4 7.5-2.6 11.2-4 4.8-1.7 9.5-3.7 14.3-5.7A967 967 0 01811 146c10.3-3.6 20.3-8.2 31-10.6 5.3-1 10.8-1.3 16.2-2 4.2-.3 8.3-1.2 12.4-1.7 9.1-1 18.3-2.3 27.5-2.4 3.7-.2 7.4-.4 11.1 0 8.5 1 16.8 3.8 25.3 4.7 3.3.4 6.6.7 9.9.6 4.2-.2 8.3-.7 12.4-1.6 7-1.9 14-4.5 20.8-6.8 6.4-2.4 12.8-4.8 19.5-6.2 5.5-1.1 11-2.1 16.6-2.2 3.4 0 6.9.4 10 1.8 2 .7 4 1.9 5.7 3.2.8.7 1.6 1.3 2.3 2 .7.7 1.2 1.5 1.8 2.3a27 27 0 013 25.1 33 33 0 01-3.6 6.7c-1 1.1-2 2.1-3.1 3.1-2.2 2.1-4.5 4-7 5.6a53.6 53.6 0 01-10 4.5c-5.5 2-11.2 3.3-17.2 3.5a584.3 584.3 0 00-17.4 1.1c-2.8.3-5.7.4-8.5 1-3 .8-6 2-9 3.1-2 .9-4 1.6-5.8 2.7-5.4 3-10 7.2-15.4 10.3-1.2.7-2.5 1.2-3.8 1.6-1.6.4-3.2.7-4.8 1-9.9.8-19.9 0-29.7 1.9-3.4.6-6.7 1.6-10 2.7a138 138 0 00-14.2 5.3c-3.5 1.6-7.1 3-10.6 4.6-5.5 2.5-10.9 5.3-16.4 7.5-8.4 3.4-17 5.9-25.7 8.5-5.3 1.6-10.7 3.4-16 5.3-5.5 1.5-11.2 2.9-17 3.3-6.6.4-13.3.6-20 .2-8.5-1.3-17-2.5-25.7-3.5-4.9-.5-9.8 0-14.7.4-9.7.9-19 3.6-28.2 6.7-8.3 2.6-16.6 5.1-25.1 7-9.3 2.1-18.7 3.6-28.1 4.9-9.4 1-18.8 2-28.3 1.7-4.7-.3-9.5-.5-14.2-1-2.7-.2-5.4-.3-8-.8-2.7-.5-5.3-1.4-8-2.2-2.3-.8-4.7-1.6-7-2.7-5.5-2.8-10.4-7-13.8-12.3a36 36 0 01-4.1-8.9c-1-3-2-6-2.9-8.9-1-4-1.7-8-1-12.2.8-4.1 2.4-8.1 4.1-12 1-1.8 1.8-3.7 3-5.3 1.9-2.5 3.7-5 5.8-7.2 3.1-2.6 6.9-4.3 10.7-5.5z" fill="url(#b)" />
<path d="M264.8 231.8l30.2-3.1 3.2 35-30.5 2.4zm-88.9 9l60-6.6 4.6 41-60.3 6.1zM25 268.4l74.1-9.2 3.4 29-74.1 8.8z" fill="#71ce01" />
<path d="M1141.6 123.6c6.6 7.9 9 23.9 9.9 34 .8 9.5 0 20-7.2 27-1.8 1.8-4 3.2-6.1 4.4-3.1 1.7-6.4 3.2-10 3.6-7.5 1-15-1-21.9-4-5.3-2-10.3-5-14.3-9.1-2.6-2.5-4.1-5.9-4.9-9.3-1-6.1.4-11.6 4.6-16.1 3-3.5 5.8-7 8-11.1 2-4 3.5-8.4 4.6-12.7 1-3.6 1.6-7.3 3.3-10.6 1.3-2.4 3.6-4.2 6-5.4 3.1-1.3 6.6-1.4 9.8-1 6.5 1 14 5.1 18.2 10.3z" fill="#92f100" />
<path d="M1096.2 133.5c-2.2 6-6 11.5-12.2 13.8-4 1.2-8.8.6-12.5-1.7-3-1.9-5.1-4.4-5.8-8-.7-3.1-.7-6.5-1.4-9.7-.6-2.5-1.6-4.9-2.5-7.2-1-2.3-1.4-4.7-1.4-7.2-.1-3.6.9-7.6 3.4-10.3 3.3-3.2 8.4-2.4 12.5-1.7 7.7 1.6 13.6 2.9 18.3 9.7 4.5 6.5 4.4 15.2 1.6 22.3zm-30.3 62.2c-2.6 6.6-7.6 11.5-15.1 9.8-4-.8-7.7-3.3-10-6.7-2-4-2-9.3-.8-13.6.3-1.7 1.4-3.1 2.6-4.5 1-1.3 2.2-2.8 3.4-4 4.8-4.6 12-8.7 18.8-8.4 5.2.6 11.5 2.7 13 8.2.7 2.5.3 5.3-1 7.5-.6 1.4-1.4 2.8-2.9 3.4-6 2.5-5.6 2.3-8 8.3zm-79.8 23a57 57 0 00-2.7 8.7c-.6 2.4-1 5.2-3 6.9-2.3 2-5.6 2.6-8.6 2.9-2.9.3-5.9.2-8.5-1.1-1.9-1-3.6-2.3-5-3.8-3.2-3.4-.4-8.2.7-12 .7-1.7.8-2.6-.4-4.1-2.4-3.8-6.6-8.5-4-13.1.7-1.4 1.7-2.7 3.2-3.4 2.8-1.2 5.9-1.6 8.7-2.9 1.6-.6 2.9-1.9 4.4-2.7a11 11 0 0110.5.8c2 1.4 4.4 2.6 5.7 4.7 2.1 4.3 2 9.4 1 14-.4 1.8-1.3 3.4-2 5zm-82.4 38.5c-1.5.6-2.5 2-3.5 3.2a21 21 0 01-3.8 3.7c-3.9 3.1-11.4 4.2-15.9 2-1.7-1-3.1-2.4-4.6-3.7-2.2-1.9-4.5-3.9-6.3-6.2-1.2-1.5-2.7-3-3.6-4.7-2.6-4.9-2.5-9.5-2-14.8.4-4.8 4.2-9.1 9-9.6 1.6-.2 3.2-.5 4.7-.7 1.4-.1 2.8-.2 4.1-.7 3.9-1.8 7.7-4 12-4.4 2.4-.3 4.8 1 6.2 2.8.7 1.2 1 2.4 1.8 3.5.5.8 1 1.7 1.7 2.3 1.4 1 3 1.8 4.4 2.6 4.1 2.3 10.9 4 11.6 9.5.4 4.2-3.1 7.6-6 10.1-2.9 2.5-6.5 3.5-9.8 5z" fill="#ffff9f" />
<path d="M115 302.4c0-3.3 3.7-5.5 6.6-4 3.3 1.5 3.3 6.4 0 8-3 1.5-6.6-.8-6.5-4zM55 245c0 3.4.1 6.9-.7 10.2-.6 2-1 4.2-2 6l-.2.2-.2.2c-2.7 1-5.9 1-8.8 1.4-4.8.5-9.7 1-14.5 1.7-2.7.5-5.7.8-7.9 2.7-.8.6-1.2 1.5-1.8 2.3l-.1 0-.1 0-.1 0-.2 0c-1-1.2-1.4-2.7-2.1-4-.8-1.6-1.8-3.1-2.6-4.7-1-2.5-1-5.3-1.7-7.9 14.4-1.9 28.7-5.3 43-8zm49.4-11.6c.1 3.5.4 6.9.7 10.3-9.4.4-15 .8-23.4-4.5-.3-3.5-1.2-7-1.6-10.5-.2-2-.8-4.6 1-6.1 4.1-3.4 10.4-1.8 14.6.4 4.6 2 7 6 8.7 10.4zM79 322.8c-3 .6-6 1-9 1.5-1.2.1-2.3.5-3.5.5l-.1-.1c-.4-1-.2-2-.1-3 .2-1.9 1.7-3.4 3.2-4.3 3.4-1.7 7.7-2.3 11.3-1.2 1.5.5 3.2 1.1 4 2.5.3 1 0 2-.2 3-1.8.5-3.8.7-5.6 1zm130.6-13.2c-5.7-1-11.4-1.7-17-3-9.8-2.4-19.4-5.7-28-11 1.6-1 3.2-1.8 5-1.9 3.8-.1 7.5.6 11.2 1 10.8 1.3 21.7 2 32.6 3 15.5 1.3 31.2.7 46.7-1 8.6-1.1 13.1-.1 16.2 8.7a52 52 0 012.3 10c.5 3 .2 6-1.2 8.7-4.2-1-8.4-2.2-12.3-4.1-3-1.5-5.6-3.5-8.6-4.9a27.8 27.8 0 00-10.3-2.6c-5.8-.4-11.7-.2-17.5-.6-6.4-.3-12.8-1.2-19.1-2.3z" fill="#b58254" />
<path d="M1205 223.9c-13.5-.9-32.7-3.6-46-1.3-18 3.7-37.4 9-54.2 16.5-4.6 2.4-11.4 7.4-15.6 10.6-9.1 6.3-20.6 13-30.5 17.9-15.9 8-35.8 17.6-51.8 25.2-5.7 2.4-12.4 4.3-18.6 4.6-13.7 1-31-1.2-44.8.5-14.2 2.3-29 7.1-42.4 12.3-6.6 2.5-24 11.5-30.8 13.7-5.7 1.3-12.6 1.8-18.4.4-11-4.9-24.9-12-36.4-15.5-18.7-5.3-39.6-8.6-59-6-17.6 2.5-37 11.8-53.6 18-11.3 4.6-25.2 11.9-37.6 12.3-20.2 1.9-43.5-2.2-63.7-3.4-8 0-31.6 2.2-40 2.9-13 1.2-26.1-3.2-37.8-8.5-6.2-2.6-13-7.9-19.8-9-45.4 4.9-93.3-8.4-138.7-2.7l-3.5 1.3c-4.8 2.2-9.5 7-13.2 10.7-3.6 3.3-9.5 7.2-13.7 9.9-17.7-3.5-50.6-7.1-67.2-13.2-17.7-9.8-16.7-8.6-36.9-9-27.9-2.6-60.2-6.2-80-28.2-18.4-19.9-27.4-54-21.2-80.4-15.2-2-123.3 18.7-140.7 21.4l23.4 125.6c51.4-9.2 112.6-22 164.9-20.5 20.8 5.6 47 6.4 68.4 9 35.4 7.2 80.9 16.5 116 25.5l.7-24.7-2.4-3.3-1-2.2-.2-1.3c0-.9.1-2.5.3-3.3l.4-1.4 1-1.6 1.4-1.3c5.2-3.6 11.9-5.3 18.2-5.6 39.7-1.5 82 7 121.8 3.5l2 .4c34.4 17.4 42.2 19 80.6 15.1 23.9-2 49.4 3.5 73.4 2.5 10.2-.2 21.6-2.2 31-6.2 38.5-15.2 68.3-32.2 111.2-22.4 20.2 3.3 38.2 19.2 58.8 20.3 17.8 1.2 34.5-12 50.8-17.3 12.2-4.3 27.2-9.4 40.2-10.2 12.1-.3 28.6 1.4 40.6-.5 23.7-3.3 54.6-22.7 76.2-32.4 15-7.2 34.4-22.4 49.6-29.2 16.2-6.3 34.2-11.5 51.6-13.6 16.8 0 37.3 2.5 54.1 2.6l6.4-7.6-23.3-1zM84.6 321.8c-3.5.7-13.9 2.4-17.6 3l-.5-.2-.2-.9 0-1.7.4-1.5.7-1.2 1.3-1.3 1.3-.8 1.7-.7c1-.4 3.5-.7 4.6-.8l2.7 0 2.6.7 2.3 1.2.6.5.4.6 0 1.1-.3 2zm48.6-14.5l-1 2.2-1.4 1.8-1.7 1.4-2 1c-1.5.6-26.6 4.4-29 4.8l-.9-.1-.8-.6c-1.3-1.4-6-6.8-7.5-7.8l-2-1.3-2.2-1-2.3-.5-5.8-.6-1.2-8-3.8.4 1.1 8-3.2.7-3.2 1.5-2.7 1.8-2.8 2.7-1.6 2.3-1.3 2.5-1.4 4-.7 4.3-.4.4-.4.2c-5.9 1.2-13.4 2.6-19.4 2.4l-3.3-.7-3-1.1-2.6-1.5-2.4-2-1.5-1.7-1.4-2c-1.4-2.9-2.4-7.2-3-10.2-2.1-14.2-11-55.7-13.8-70.2l0-1 1.2-.3 2.2-.3 2.2 13.6.4.6.5.2c16.8-2 53-9.9 70-13.3l.4-.4.1-.9c-.4-2.9-2-11-1.7-13.9l.3-1 .8-1 1.3-1 1.4-.5 1.7-.4c5.1-.4 10.5 1.8 14.4 5.2.6.6 1.7 2 2.1 2.7l2.3 4.8c.5 11.6 2.5 24.7 7.4 35.2 4.2 11.6 11.8 21.8 20.5 30.3l.7 2 .6 2.9 0 2-.2 1.4z" fill="#b4b4b4" stroke-opacity=".5" stroke="#000" stroke-width=".3" />
</g>
</svg>
Related
SVG SMIL animateTo works fine in Firefox but not in Chrome or Safari
The fill bottle animation working fine in firefox but not working in chrome and safari.
I am trying to fill the color in the bottle based on the textbox value entered by the user.
<script type="text/javascript">
function process(ele) {
if(event.key === 'Enter') {
Array.from(document.getElementsByClassName("animatedStop")).forEach((animation) => {
animation.setAttribute("to", ele.value + "%");
animation.beginElement();
});
}
}
</script>
<div style="float:left;">
<label>Enter Value</label>
<input id="fill-color" type="textbox" min="0" max="100" name="fillcolor" value="20" onkeydown="process(this)" />%
</div>
<svg id="octocat" version="1.0" xmlns="http://www.w3.org/2000/svg" width="150" height="450" viewBox="0 0 640 1280">
<defs>
<linearGradient id="gradient" x2="0%" y1="100%" y2="0%">
<stop offset="0%" stop-color="#df1c2a"/>
<stop offset="0%" stop-color="#df1c2a">
<animate class="animatedStop" attributeName="offset" from="0%" to="0%" dur="3s" fill="freeze" begin="0s"/>
</stop>
<stop offset="20%" stop-color="black">
<animate class="animatedStop" attributeName="offset" from="0%" to="0%" dur="3s" fill="freeze" begin="indefinite"/>
</stop>
</linearGradient>
</defs>
<path id="face" fill="url(#gradient)" d="M289.5 1c-24.5 1.5-44.8 5.2-47.7 8.8-1.5 1.8-1.5 21.6.1 29.7.8 4.1.6 5.5-.9 8.5-2.9 5.7-3.4 11.9-1.5 17.8 2 6 8.8 14.4 11 13.5.8-.3 1.5 0 1.5.6s-.5 1.1-1.2 1.1-.6.6.4 1.7c1.3 1.5 1.7 9.8 2.8 53.8l1.2 52-3.1 18c-7.8 45.2-19.6 83.7-48.4 158.5-11.8 30.7-19.7 53.4-19.7 56.2 0 .7 2.5-5.9 5.4-14.7 3-8.8 11-30.4 17.9-48 16.3-41.8 25.2-67.4 32.3-92.3 1.5-5.1 2.9-9 3.1-8.8 1.6 1.6-16.6 57.4-30.3 92.8-15.6 40.3-16.6 43.1-22.5 60.3-3.2 9.3-5.8 15.9-5.9 14.6 0-1.3-.3-2.1-.7-1.8-.3.4-.9 6.2-1.3 12.9-.6 10.2-1.2 13.4-3.5 18.8-13.7 32-26.5 140.3-22.7 192.1 1 13.7 4 31.1 5.4 31.7 1.5.7.8 4.8-1.2 6.5-1.8 1.5-2 2.9-2 14.4 0 18.6 3.2 44.5 12 98.3 8.2 49.7 11.4 75.5 14.9 117.5 3.7 43.9 4.4 58.5 3.8 83.5-.6 24.9-1.3 31.7-6.3 57.1-1.4 7.2-2.3 13.3-2.1 13.5.2.2 1.2-3.5 2.2-8.3 2.3-11.7 3.3-15.4 3.4-12.8.2 3.7-4.9 28.5-12.9 63-4.4 18.7-8.5 36.4-9.1 39.3-1.5 6.3-2.6 7.5-2.2 2.4.2-3.4.1-3.4-.8.8-1.5 6.9-.5 35.5 1.5 41l1.6 4.5-3.6-3.9-3.7-3.9.7 3.9c2 11.4 6.6 19 16.5 27.3 10.6 8.8 24.3 13.9 49.6 18.6 20.7 3.8 43.3 5.5 81.5 6.2 84.2 1.4 142.2-6.8 171.2-24.3 6.4-3.9 14.1-11.9 15.6-16.3.9-2.5.8-2.8-.8-2.4-1.7.5-1.7.2-.5-3.4.7-2.1 1.6-5.2 1.9-6.8l.7-3-3.5 3.4-3.5 3.3 1.6-4.3c1.1-3.1 1.6-8.6 1.6-18.9.1-14.8-2.1-34.8-3.3-30-.7 2.7-1.1 1.5-4.4-13-1.9-8.1-6.1-25.9-8.6-36.5-3-12.4-7-31.7-6.9-33.5 0-.8.9 1.4 1.9 5 2.6 9.3 2.4 6.3-.5-7.2-5-23.4-5.7-30.3-6.2-59.9-1-56.1 5.3-123.5 19.7-209.9 8.6-51.5 11.9-83.4 10.4-100-.4-4.7-.9-7.7-1.1-6.7-.6 2.2-2.3 1.2-2.3-1.4 0-1.1.4-1.7 1-1.4.6.4.9-1.1.7-3.9-.1-2.4.1-4.3.4-4 3.8 2.3 4.9-76.9 1.6-107.6-3.6-32.7-9-66.4-14.4-89.3-1.7-7.2-2.8-10.5-3.2-9.3-.5 1.3-1.6-.4-3.9-6.4-1.8-4.5-3.2-8.6-3.2-9.3 0-2.3 2 .9 4.4 7.3 1.4 3.6 2.5 5.8 2.5 5 0-.8-1.3-4.7-3-8.5-2.5-5.9-3.2-9.1-3.9-19.6-1.2-15.2-3.3-22.8-14.2-51.3-28.2-73.9-35.7-95.5-43.3-125.1-4.3-16.6-11.1-48.5-13.5-63.5-.7-4.1-1.6-8-2.1-8.6-1.7-2.1-3.1-36.2-2.7-66.3l.4-30.6 2.7-5c1.5-2.8 4.4-6.1 6.5-7.5 8-5.4 11.9-21.9 7.3-31.4-1.5-3.1-2.1-5.8-1.9-8.8l.4-4.3.8 5.3c1.5 9 2.8 4.4 3.4-11.6.5-14.2.4-15-1.6-17-2.5-2.5-6.9-3.8-19.8-5.7-21.9-3.2-69-4.3-99.9-2.5zm-47.2 61.1c2.5 3.6 2.6 3.7.6 4.2-1.6.4-1.8.3-.9-.8.7-.8.7-1.5.1-1.9-.5-.3-1.2 0-1.5.6-.3.7-.3.2 0-1.1.4-1.6.3-2.1-.5-1.7-.7.5-1.1-.1-1.1-1.5 0-1.2.1-2 .3-1.8.2.2 1.5 2 3 4zM405 72.3c0 .2-1 1.2-2.2 2.3l-2.3 1.9 1.9-2.3c1.8-2.1 2.6-2.7 2.6-1.9zM425.8 315c3.8 10.7 12.1 32.8 18.5 49 13.2 34 17.9 46.9 17.4 48.3-.2.6-1.1-1.2-2.1-3.9s-7.5-19.5-14.3-37.4c-15.5-40.2-27.3-73.1-27.3-75.9 0-1.5 1.5 2.4 7.8 19.9zM184 448.8c0 .4-1.7 5-3.9 10.2-2.1 5.2-4.4 11.9-5.1 14.7-.8 2.9-1.7 5.3-2.1 5.3-1 0 3.1-14.9 6.6-23.9 1.5-3.9 3.1-7.1 3.6-7.1s.9.4.9.8zm-17.3 69.4c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm317 5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-318 0c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm319 6.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm-320 2.5c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm311 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-302 3c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm312 1c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-322 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm313 0c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm10 6c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-314 1c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm305 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-315 1.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm9 2.5c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm316 2.5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-9-.5c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-317 4c-.2 1.3-.4.5-.4-1.7-.1-2.2.1-3.2.4-2.3.2 1 .2 2.8 0 4zm327 4.5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-318 1c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm309 .5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-319 7.5c-.2 1.6-.4.3-.4-2.7s.2-4.3.4-2.8c.2 1.6.2 4 0 5.5zm9 0c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm311 0c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm9 3c-.2 1.6-.4.5-.4-2.2 0-2.8.2-4 .4-2.8.2 1.3.2 3.5 0 5zM159 612.5l-.7 38-.1-27c-.2-22.8.6-50.2 1.3-49.3.1.2-.1 17.4-.5 38.3zm331.7-18.8c-.2 3.2-.3.8-.3-5.2 0-6.1.1-8.7.3-5.8.2 2.9.2 7.8 0 11zm-9-10c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-313 2.5c-.2 1.3-.4.5-.4-1.7-.1-2.2.1-3.2.4-2.3.2 1 .2 2.8 0 4zm314 12c-.2 1.8-.4.6-.4-2.7 0-3.3.2-4.8.4-3.3s.2 4.2 0 6zm-315 1.5c-.2 1.6-.4.3-.4-2.7s.2-4.3.4-2.8c.2 1.6.2 4 0 5.5zm324 29c-.1 4.9-.3.9-.3-8.7s.2-13.6.3-8.8c.2 4.9.2 12.7 0 17.5zm-325 7.5c-.1 4-.3.8-.3-7.2s.2-11.2.3-7.3c.2 4 .2 10.6 0 14.5zm324 16.5c-.2 2.1-.4.4-.4-3.7 0-4.1.2-5.8.4-3.8.2 2.1.2 5.5 0 7.5zm-331 4.5c-.2 1.3-.4.3-.4-2.2s.2-3.5.4-2.3c.2 1.3.2 3.3 0 4.5zm8 1.5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm315 1c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm7 .5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-329 2c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm8 3c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm313 0c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-315.4 2.5c-.7.2-2.1.2-3 0-1-.3-.4-.5 1.2-.5 1.7 0 2.4.2 1.8.5zm311.4 16.5c-.2 1.3-.4.3-.4-2.2s.2-3.5.4-2.3c.2 1.3.2 3.3 0 4.5zm-305 0c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm316 17.5c-.2 3.2-.3.8-.3-5.2 0-6.1.1-8.7.3-5.8.2 2.9.2 7.8 0 11zm-328-8c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm9 3c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm311 12c-.2 3.2-.3.8-.3-5.2 0-6.1.1-8.7.3-5.8.2 2.9.2 7.8 0 11zm-319 8c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm8 1c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm318 1c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-8 5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-317 1.5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm8 1.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm316 4.5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-323 4c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm315 0c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-307 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm314 1c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-321 2c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm313 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-305 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm312 3c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-319 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm311 3c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm7 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-317 2c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm320 406.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm4.3 46.3c0 .5-1.9 3.3-4.2 6.1-12 14.6-42.4 24.4-94 30.5-17.9 2.1-103.1 3.1-126.7 1.4-19.7-1.3-36-3.3-49.5-6.1-10.2-2.1-29.1-7.7-28.4-8.5.3-.2 3 .5 6.2 1.6 27.2 9.3 81 14 145.1 12.5 43.2-.9 74.1-4.4 100.1-11 23.4-6 37-12.7 45.4-22.3 4.4-5 6-6.1 6-4.2z"/><path d="M159.1 681.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM178.6 1074.6c-.4 2-.5 3.8-.3 4 .3.3.8-1.1 1.1-3.2.4-2 .5-3.8.3-4-.3-.3-.8 1.1-1.1 3.2zM470.1 1074.6c-.2 1.8 3.2 16 3.5 14.9.2-.6-.5-4.4-1.5-8.5s-1.9-7-2-6.4zM177.1 1081.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM175.1 1089.6c-.7 3-1.1 5.7-.8 6 .2.2.9-2.1 1.6-5.2.7-3 1.1-5.7.8-6-.2-.2-.9 2.1-1.6 5.2zM474.1 1092c0 .8.8 4.6 1.8 8.5 1.1 3.8 1.9 6.3 2 5.5 0-.8-.8-4.7-1.8-8.5-1.1-3.9-1.9-6.3-2-5.5zM173.1 1098.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM171.1 1106.6c-.7 3-1.1 5.7-.8 6 .2.2.9-2.1 1.6-5.2.7-3 1.1-5.7.8-6-.2-.2-.9 2.1-1.6 5.2zM478.1 1109.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM479.1 1113.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM169.1 1115.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM480.1 1117.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM168.1 1119.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM481.1 1121.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM167.1 1123.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM482.2 1125.5c0 1.1.4 3.1.8 4.5.6 2 .8 2.1.8.5 0-1.1-.4-3.1-.8-4.5-.6-2-.8-2.1-.8-.5zM166.2 1128c0 1.4.2 1.9.5 1.2.2-.6.2-1.8 0-2.5-.3-.6-.5-.1-.5 1.3zM165.1 1132.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM484.2 1135c0 1.4.2 1.9.5 1.2.2-.6.2-1.8 0-2.5-.3-.6-.5-.1-.5 1.3zM164.2 1137c0 1.4.2 1.9.5 1.2.2-.6.2-1.8 0-2.5-.3-.6-.5-.1-.5 1.3zM485.1 1139.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM163.1 1141.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM162.2 1146.5c0 1.6.2 2.2.5 1.2.2-.9.2-2.3 0-3-.3-.6-.5.1-.5 1.8z"/></svg>
Fiddle Link
You need replace from and to attributies to values attribute in the animate tags. Inside values we use decimal numbers. Finally, we make some small changes to the process function to handle our values.
PS. I can't test it in Safari, (I don't have Mac products)
before
<animate class="animatedStop" attributeName="offset" from="0%" to="0%" dur="3s" fill="freeze" begin="0s"/>
after
<animate class="animatedStop" attributeName="offset" values="0;0" dur="3s" fill="freeze" begin="0s"/>
function process(ele) {
if (event.key === 'Enter') {
Array.from(document.getElementsByClassName('animatedStop')).forEach(animation => {
// Get value from input field and divide to get decimal number
const enteredValue = Number(ele.value) / 100;
animation.setAttribute('values', `0;${enteredValue}`);
animation.beginElement();
});
}
}
<div style="float: left">
<label>Enter Value</label>
<input id="fill-color" type="textbox" min="0" max="100" name="fillcolor" value="20" onkeydown="process(this)" />%
</div>
<svg id="octocat" version="1.0" xmlns="http://www.w3.org/2000/svg" width="150" height="450" viewBox="0 0 640 1280">
<defs>
<linearGradient id="gradient" x1="0" y1="100%" x2="0" y2="0">
<stop offset="0%" stop-color="#df1c2a" />
<stop offset="0%" stop-color="#df1c2a">
<animate
class="animatedStop"
attributeName="offset"
values="0;0"
dur="3s"
fill="freeze"
begin="0s"
/>
</stop>
<stop offset="20%" stop-color="black">
<animate
class="animatedStop"
attributeName="offset"
values="0;0"
dur="3s"
fill="freeze"
begin="indefinite"
/>
</stop>
</linearGradient>
</defs>
<path
id="face"
fill="url(#gradient)"
d="M289.5 1c-24.5 1.5-44.8 5.2-47.7 8.8-1.5 1.8-1.5 21.6.1 29.7.8 4.1.6 5.5-.9 8.5-2.9 5.7-3.4 11.9-1.5 17.8 2 6 8.8 14.4 11 13.5.8-.3 1.5 0 1.5.6s-.5 1.1-1.2 1.1-.6.6.4 1.7c1.3 1.5 1.7 9.8 2.8 53.8l1.2 52-3.1 18c-7.8 45.2-19.6 83.7-48.4 158.5-11.8 30.7-19.7 53.4-19.7 56.2 0 .7 2.5-5.9 5.4-14.7 3-8.8 11-30.4 17.9-48 16.3-41.8 25.2-67.4 32.3-92.3 1.5-5.1 2.9-9 3.1-8.8 1.6 1.6-16.6 57.4-30.3 92.8-15.6 40.3-16.6 43.1-22.5 60.3-3.2 9.3-5.8 15.9-5.9 14.6 0-1.3-.3-2.1-.7-1.8-.3.4-.9 6.2-1.3 12.9-.6 10.2-1.2 13.4-3.5 18.8-13.7 32-26.5 140.3-22.7 192.1 1 13.7 4 31.1 5.4 31.7 1.5.7.8 4.8-1.2 6.5-1.8 1.5-2 2.9-2 14.4 0 18.6 3.2 44.5 12 98.3 8.2 49.7 11.4 75.5 14.9 117.5 3.7 43.9 4.4 58.5 3.8 83.5-.6 24.9-1.3 31.7-6.3 57.1-1.4 7.2-2.3 13.3-2.1 13.5.2.2 1.2-3.5 2.2-8.3 2.3-11.7 3.3-15.4 3.4-12.8.2 3.7-4.9 28.5-12.9 63-4.4 18.7-8.5 36.4-9.1 39.3-1.5 6.3-2.6 7.5-2.2 2.4.2-3.4.1-3.4-.8.8-1.5 6.9-.5 35.5 1.5 41l1.6 4.5-3.6-3.9-3.7-3.9.7 3.9c2 11.4 6.6 19 16.5 27.3 10.6 8.8 24.3 13.9 49.6 18.6 20.7 3.8 43.3 5.5 81.5 6.2 84.2 1.4 142.2-6.8 171.2-24.3 6.4-3.9 14.1-11.9 15.6-16.3.9-2.5.8-2.8-.8-2.4-1.7.5-1.7.2-.5-3.4.7-2.1 1.6-5.2 1.9-6.8l.7-3-3.5 3.4-3.5 3.3 1.6-4.3c1.1-3.1 1.6-8.6 1.6-18.9.1-14.8-2.1-34.8-3.3-30-.7 2.7-1.1 1.5-4.4-13-1.9-8.1-6.1-25.9-8.6-36.5-3-12.4-7-31.7-6.9-33.5 0-.8.9 1.4 1.9 5 2.6 9.3 2.4 6.3-.5-7.2-5-23.4-5.7-30.3-6.2-59.9-1-56.1 5.3-123.5 19.7-209.9 8.6-51.5 11.9-83.4 10.4-100-.4-4.7-.9-7.7-1.1-6.7-.6 2.2-2.3 1.2-2.3-1.4 0-1.1.4-1.7 1-1.4.6.4.9-1.1.7-3.9-.1-2.4.1-4.3.4-4 3.8 2.3 4.9-76.9 1.6-107.6-3.6-32.7-9-66.4-14.4-89.3-1.7-7.2-2.8-10.5-3.2-9.3-.5 1.3-1.6-.4-3.9-6.4-1.8-4.5-3.2-8.6-3.2-9.3 0-2.3 2 .9 4.4 7.3 1.4 3.6 2.5 5.8 2.5 5 0-.8-1.3-4.7-3-8.5-2.5-5.9-3.2-9.1-3.9-19.6-1.2-15.2-3.3-22.8-14.2-51.3-28.2-73.9-35.7-95.5-43.3-125.1-4.3-16.6-11.1-48.5-13.5-63.5-.7-4.1-1.6-8-2.1-8.6-1.7-2.1-3.1-36.2-2.7-66.3l.4-30.6 2.7-5c1.5-2.8 4.4-6.1 6.5-7.5 8-5.4 11.9-21.9 7.3-31.4-1.5-3.1-2.1-5.8-1.9-8.8l.4-4.3.8 5.3c1.5 9 2.8 4.4 3.4-11.6.5-14.2.4-15-1.6-17-2.5-2.5-6.9-3.8-19.8-5.7-21.9-3.2-69-4.3-99.9-2.5zm-47.2 61.1c2.5 3.6 2.6 3.7.6 4.2-1.6.4-1.8.3-.9-.8.7-.8.7-1.5.1-1.9-.5-.3-1.2 0-1.5.6-.3.7-.3.2 0-1.1.4-1.6.3-2.1-.5-1.7-.7.5-1.1-.1-1.1-1.5 0-1.2.1-2 .3-1.8.2.2 1.5 2 3 4zM405 72.3c0 .2-1 1.2-2.2 2.3l-2.3 1.9 1.9-2.3c1.8-2.1 2.6-2.7 2.6-1.9zM425.8 315c3.8 10.7 12.1 32.8 18.5 49 13.2 34 17.9 46.9 17.4 48.3-.2.6-1.1-1.2-2.1-3.9s-7.5-19.5-14.3-37.4c-15.5-40.2-27.3-73.1-27.3-75.9 0-1.5 1.5 2.4 7.8 19.9zM184 448.8c0 .4-1.7 5-3.9 10.2-2.1 5.2-4.4 11.9-5.1 14.7-.8 2.9-1.7 5.3-2.1 5.3-1 0 3.1-14.9 6.6-23.9 1.5-3.9 3.1-7.1 3.6-7.1s.9.4.9.8zm-17.3 69.4c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm317 5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-318 0c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm319 6.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm-320 2.5c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm311 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-302 3c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm312 1c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-322 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm313 0c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm10 6c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-314 1c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm305 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-315 1.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm9 2.5c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm316 2.5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-9-.5c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-317 4c-.2 1.3-.4.5-.4-1.7-.1-2.2.1-3.2.4-2.3.2 1 .2 2.8 0 4zm327 4.5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-318 1c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm309 .5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-319 7.5c-.2 1.6-.4.3-.4-2.7s.2-4.3.4-2.8c.2 1.6.2 4 0 5.5zm9 0c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm311 0c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm9 3c-.2 1.6-.4.5-.4-2.2 0-2.8.2-4 .4-2.8.2 1.3.2 3.5 0 5zM159 612.5l-.7 38-.1-27c-.2-22.8.6-50.2 1.3-49.3.1.2-.1 17.4-.5 38.3zm331.7-18.8c-.2 3.2-.3.8-.3-5.2 0-6.1.1-8.7.3-5.8.2 2.9.2 7.8 0 11zm-9-10c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-313 2.5c-.2 1.3-.4.5-.4-1.7-.1-2.2.1-3.2.4-2.3.2 1 .2 2.8 0 4zm314 12c-.2 1.8-.4.6-.4-2.7 0-3.3.2-4.8.4-3.3s.2 4.2 0 6zm-315 1.5c-.2 1.6-.4.3-.4-2.7s.2-4.3.4-2.8c.2 1.6.2 4 0 5.5zm324 29c-.1 4.9-.3.9-.3-8.7s.2-13.6.3-8.8c.2 4.9.2 12.7 0 17.5zm-325 7.5c-.1 4-.3.8-.3-7.2s.2-11.2.3-7.3c.2 4 .2 10.6 0 14.5zm324 16.5c-.2 2.1-.4.4-.4-3.7 0-4.1.2-5.8.4-3.8.2 2.1.2 5.5 0 7.5zm-331 4.5c-.2 1.3-.4.3-.4-2.2s.2-3.5.4-2.3c.2 1.3.2 3.3 0 4.5zm8 1.5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm315 1c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm7 .5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-329 2c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm8 3c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm313 0c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-315.4 2.5c-.7.2-2.1.2-3 0-1-.3-.4-.5 1.2-.5 1.7 0 2.4.2 1.8.5zm311.4 16.5c-.2 1.3-.4.3-.4-2.2s.2-3.5.4-2.3c.2 1.3.2 3.3 0 4.5zm-305 0c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm316 17.5c-.2 3.2-.3.8-.3-5.2 0-6.1.1-8.7.3-5.8.2 2.9.2 7.8 0 11zm-328-8c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm9 3c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm311 12c-.2 3.2-.3.8-.3-5.2 0-6.1.1-8.7.3-5.8.2 2.9.2 7.8 0 11zm-319 8c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm8 1c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm318 1c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-8 5c-.3 1-.5.2-.5-1.7s.2-2.7.5-1.8c.2 1 .2 2.6 0 3.5zm-317 1.5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm8 1.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm316 4.5c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-323 4c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm315 0c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-307 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm314 1c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-321 2c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm313 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-305 2c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm312 3c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm-319 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm311 3c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm7 1c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-317 2c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm320 406.5c-.3 1-.5.4-.5-1.2 0-1.7.2-2.4.5-1.8.2.7.2 2.1 0 3zm4.3 46.3c0 .5-1.9 3.3-4.2 6.1-12 14.6-42.4 24.4-94 30.5-17.9 2.1-103.1 3.1-126.7 1.4-19.7-1.3-36-3.3-49.5-6.1-10.2-2.1-29.1-7.7-28.4-8.5.3-.2 3 .5 6.2 1.6 27.2 9.3 81 14 145.1 12.5 43.2-.9 74.1-4.4 100.1-11 23.4-6 37-12.7 45.4-22.3 4.4-5 6-6.1 6-4.2z"
/>
</svg>
How to animate an svg in reverse with anime.js?
I've tweaked this example of an SVG animation from the anime.js docs: https://codepen.io/fergusmeiklejohn/pen/gOwdVpq I'm trying to animate drawing the word from the end of the word to the beginning. Can Anime.js do this? direction: 'reverse' doesn't work as I hoped it would. It animates in reverse but starts with the complete svg and ends with nothing. I also had the idea that if anime can't do this, is a solution to redraw the SVG in reverse? Thanks all! :-)
SVG mask solution
The idea is to first hide the word with the mask, then use the stroke-dashoffset animation for the mask to gradually reveal the word.
The mask will have a wide line to show the bottom word with different line widths in different parts of the word.
To do this, we need to draw a center line in the vector editor, repeating all the bends of the lower word
The red line in the figure is the centerline for the wide line of the mask.
body {
height: 100vh;
width: 100%;
background-color: #35dad2;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
svg {
width: 40em;
}
#word {
fill:white;
}
#msk {
fill:none;
stroke:#fff;
stroke-width:12;
stroke-dasharray:1100px;
stroke-dashoffset:1100px;
}
<h3>
<svg xmlns="http://www.w3.org/2000/svg" class="subtitle" viewBox="0 0 229.2 69.6">
<defs>
<mask id="msk">
<path d="M226.7 46.7s-.6-4-2-5.2a9 9 0 00-7.6-1.8c-3.6.8-5.7 4.7-8.7 7-3 2.1-6 4.4-9.3 6.3-3.2 1.7-6.5 3.6-10 4.3-1.9.4-5.3 1.6-5.6-.2-.8-3.7 2.8-8.5 4.3-12.7 1.8-4.9 2.5-10.5 5.8-14.6 2-2.6 4.7-5.5 7.9-5.6 2.2 0 4.8 1.5 5.5 3.6 1 2.7-1 5.9-2.5 8.3-1.4 2.1-3.4 4.1-5.8 5-4 1.4-9.3-3.4-12.9-.2-6.7 6-11 9.6-19 16.6-.8.8-5.6.7-5-.2 8.7-11 14-25.5 22-38.2 1.6-2.4 5.2 2 7.3 1 .8-.5 1.5-1.7 1-2.4-.8-1.7-4.3.6-5.7-.8-1-1 .3-3-.4-4.4-.5-.9-2-3.8-2.5-2-1 3.3-2.8 5.3-5.3 6.6-2.1 1.2-7.3.8-7.3.8v0s-.4-2.4-1.3-2.8c-1.4-.6-2.5-1.3-4.4 1.3 0 0-3.4.9-3.1 2 .1 1 1.7.5 2.5.6 1.5.3 3 .8 4.4.9 3.2.3 8-2.7 9.7 0 3.4 5-3.8 11.8-7.3 16.8-2.3 3.2-6.2 2.9-8.5 8.1-3.9 8.7-10.7 15.8-16.5 12.1-1.5-1 1-5.1 1-5.1 2.8-11.3 18.1-16 12.7-22.8-.4-.5-.9-1.3-2 .5-7.1 12.8-3.6 3.9-6.5 7.2-2 2.3-5.4 2.7-8 4.2-4.3 2.4-8.8 4.8-12.8 7.7-1.4 1-3.6 1.5-3.8 3.2-.2 1.8 1.8 3.3 3.4 4.3 1 .7 2.4 1.3 3.5.8 2.2-1 2.8-4 3.2-6.3.5-3.5-1.5-6.8-1.6-10.3 0-2.8-.4-5.9.8-8.3 1.3-2.5 4-3.9 6.2-5.6 2.2-1.8 7.5-2.2 7-5.1-1.4-10-23.6-18.2-28.6-9.8-7 11.6-12.4 19.5-15.9 30.4-.9 2.8-2 6-1.2 8.9.7 2.8 2.3 6.7 5.2 7 3.3.2 5.2-4.4 7.3-7 3.3-4.3 6-9 7.7-14 .9-2.5 3.5-8.5 1.4-7.6-4.5 1.8-7.7 9.8-12.9 13.3-3.3 2.2-8.4 1.6-11.3 4.5-2.8 3-.2 11.1-4.3 11.5-1.2.1-1.6-1.8-1.8-3-.4-2.2 3.3-8 1.4-6.7-3 1.8-5.6 4.4-8.7 6-2.4 1.1-5 2.8-7.6 2.5-1.3-.1-3-.7-3.5-2-1.7-3.8 1.2-8.4 2.7-12.2 1.8-4.3 4.3-8.3 7.2-12 2-2.4 3.8-6.1 7-6.5 2.2-.2 5.1 1.4 5.9 3.6.7 2.3-1.3 4.7-2.6 6.7-1.7 2.7-3.7 5.8-6.8 7-2.2.8-6.5 1.9-7-.4-2-7 6.3-15.3 9.7-22.5 2.7-5.5 0-16.2-3.4-12.4-4.7 5.2-7.5 11.3-11.3 16.8-3.6 5.2-7.3 10.3-11.1 15.3-2.4 3-5 6-7.6 9-4 4.4-8 9-12.8 12.8C43.3 63 39 68.6 36 66.8c-2.4-1.4-2.4-4.5 0-8.3 4.5-7.2 10.3-10.4 14.4-20.4 3.2-7.7 10.4-13.8 12.5-22 .5-1.8.7-4 0-5.7-.4-1.1-1.8-3.6-2.4-2.6-4.1 7.3-4.2 16.6-10.5 21.6a248 248 0 00-29.7 29.3c-.9 1-3-.4-3.6-1.6-1-2.3 1.7-4.8 2.8-7.1 3-6 6.9-11.5 10.3-17.3 2.6-4.2 5.4-8.2 7.7-12.6 1.6-3 5.5-6 4-9-1.4-2.6-5.9-2-9-1.7-4 .4-7.5 2.9-11.2 4.7a76.8 76.8 0 00-10 5.8C9 21.7 5 22.9 4.3 26c-.6 2 .5 4.6 2 6.2a7.7 7.7 0 005.2 2.2c1.8 0 5-1.7 5-1.7">
<!-- Animation of the mask opening the word -->
<animate id="an"
attributeName="stroke-dashoffset"
begin="0s"
dur="3s"
values="1100;0"
fill="freeze"
repeatCount="indefinite"/>
</path>
</mask>
</defs>
<!-- The word is hidden by the mask -->
<path id="word" mask="url(#msk)" d="M79.7 29.1a344.4 344.4 0 01-20.4 23.4 152 152 0 01-13.8 12.6c-4.6 3.5-7.9 5.3-9.8 5.3h-.4c-2.9 0-4.8-1-5.6-3l-.2-1v-.6c0-2.2 1.8-6.5 5.5-12.8l7.8-14.3c-11.4 10.8-19 18.3-23 22.1-1.8 0-3.4-.6-4.8-1.8-.6-.7-.9-1.7-.9-2.9 0-2.3 1.8-6.5 5.4-12.6a6587 6587 0 0016.3-30.1h-.2A48.2 48.2 0 008.5 28.9v.1a5.5 5.5 0 002.5 2.9c1.5.5 3 .7 4.5.7l.9.1c0 .9-1.6 1.9-4.8 3.1-1.7.5-3.1.7-4.2.7h-.5c-2.5 0-4.2-2.8-4.9-8.4l-.1-1.6v-1.1a7 7 0 012.8-5.9c1.8-1.7 4.1-3.4 7-5.1 4-2.3 9.3-4.5 15.8-6.6A50 50 0 0139 6c1.5.2 2.9.8 4 1.8a7.9 7.9 0 012.6 5.9 1744.2 1744.2 0 01-17.5 32v.1l22.1-20.9C56 14 59.2 7.7 59.5 6.1c1.4.2 2.7.7 4 1.7a7.7 7.7 0 012.7 6.2v.1C49.7 44 41.2 59.4 40.8 60.4c1.8-1.6 4.3-4.2 7.7-7.8 9.4-10.6 18.4-22 27.2-34A79.7 79.7 0 0086.4 1l.1-1.1v-.1l.2-.1c1.5.4 3.1 1.4 4.9 3C93.4 5 94.4 6.8 94.4 8c-2.9 5.2-7.8 12.2-14.7 21.1zM125.8 40l-1.6 3-2 3.8-2.1 3.7c-1.8 3.2-3.2 5.7-4.1 7.6-1.5 2.8-4.1 3.4-7.7 2-1.5-.6-2.8-1.4-4-2.5a10.2 10.2 0 01-2.5-3.4l-3.6 6.6c-4.5-.4-6.3-2.4-5.6-6l-3 2.1a27.3 27.3 0 01-8.7 3.7l-1.8.2h-.4c-1.8 0-3.4-.7-4.7-2a10.6 10.6 0 01-2.1-6.6v-.6c0-3.1 1.1-7 3.2-11.5a36 36 0 0113.8-16.2l3-1.5 1.6-.6c.7 0 1.9.2 3.4.6l2.2.7c2.5 1.2 3.8 3 3.8 5.4v.4c0 1.6-.6 3.5-1.9 5.7a29.4 29.4 0 01-9.5 9.4l-8.3.2-1.6 2.4c-1.5 2.7-2.3 5-2.6 6.9.1.3.4.5.9.5h.1a45.5 45.5 0 0015.9-7.7l1.2-.9 1.4-2.6 4.5-8.3.7-1.4.8-1.4 1.6-2.9 3.2-5.9c5.4-9.8 8-15.1 7.9-15.9 2 .2 3.6 1 4.8 2.6a7 7 0 011.7 5.2l-11.9 21.5 3.3-3 1.7-1.5 1.7-1.6 6-5.4c4.6.4 6.4 2.6 5.4 6.6-.4 1.5-1.2 3.4-2.4 5.7l-.8 1.5-.9 1.4zm-40.4-1.2l4 .2a9 9 0 003.9-2.5 11.1 11.1 0 002.7-6.3c0-.7-.2-1.1-.6-1.3h-.2c-.8.1-1.8.7-3.1 1.8a93 93 0 00-2.9 2.8 48.8 48.8 0 00-3.8 5.3zm34.5-2.9l-13.6 11.5-.9.6-.4.6c.2 1.7.7 3 1.5 4 .9 1 1.8 1.4 3 1.1l10.4-17.8zm107.9 7.2v.6c0 1.2-.4 2.2-1.1 3h-.1c-.2-.7-.6-1.3-1.2-1.8a5 5 0 00-1.8-.5h-.6c-3.2 0-9.8 2.8-19.8 8.5-9 5.2-14.8 7.8-17.3 7.8h-.3c-3.4 0-5.6-1.9-6.7-5.6-.2-1.1-.4-2.2-.4-3.1v-.5c0-1.4.2-3 .6-4.6l-14.3 13-.9.8c-1.7 0-3.1-.5-4.4-1.5a4 4 0 01-1.1-2.6V56c0-1.7 1.3-5 4-9.8a659 659 0 01-16.1 14.5 9 9 0 01-4-1.1 3.7 3.7 0 01-1.8-3.2V56c0-2.2 1.5-5.8 4.4-10.9l2.2-3.9a93.5 93.5 0 00-7 3.3c.3 1.7.5 3.2.5 4.7v.3c0 3.4-.9 6.4-2.7 8.9a7 7 0 01-5.3 2.4h-.4a7.6 7.6 0 01-7-4.8c-.3-.9-.5-1.8-.5-2.5v-.4c0-.9.2-1.9.6-3l.3-.4c2.5-2 5-3.8 7.5-5.4-2-3.7-3-6-3-6.9v-1.1c0-3 1.6-6.3 4.8-9.8a35.2 35.2 0 0112.2-8.1 9 9 0 014.6 4c.4.6.7 1.3 1 2.1l.2.4c-2.8.9-5 1.8-6.8 2.9-4.9 2.8-7.4 6.2-7.4 10.2 0 .9.1 1.8.4 2.8 4.9-2.9 8.8-4.9 11.6-6l2.7-4.7a21 21 0 002.5-5.9h.1a7.3 7.3 0 015.5 3.5 7.8 7.8 0 011.1 3.7l-.1.3v.4l-4.2 7.5-5.2 9.1 12.1-11.1c.7-.4 1.4-.6 1.8-.6h.4l9-16.4h-.1l-6.4.2a2 2 0 01-.9-.9l-3.4 3.5a31.2 31.2 0 01-7-1.8v-.1l4-9.3 4.2-.3h1.2c2.7 0 5.3.3 7.8.8v.1l-4.9 5.1 7.3-.8c3-5.5 4.5-8.6 4.5-9.3 1.2 0 2.5.6 4.1 1.8a7.4 7.4 0 012.3 5.4c0 .4-.2 1-.6 1.6l2.6-.1h2.8l.1.2-1.9 4.3h-.1l-5.6-.4-16 28.7h.1l12.1-11.2h.1l2.5-4.4c1.1-1.6 2.6-3.4 4.5-5.4a23 23 0 015.4-4.3c1.4-.9 3-1.8 4.9-2.5l.4-.1c1.8 0 3.8.5 5.9 1.4 2.5 1.2 3.7 3 3.7 5.5 0 3.2-2 6.9-6 11.2a27.9 27.9 0 01-5.5 4.3l-.7.1-7.8.1c-2.1 2.8-3.5 6-4.2 9.4 0 .3.6.6 1.7.7l.7.1h.7c3.1 0 7.8-2.7 13.8-8.1 5.1-4.6 8.7-7.5 10.9-8.8 2-1.1 3.7-1.7 5.1-1.7 4.1 0 7 1.7 8.6 5 .4.9.5 1.8.5 2.5zm-35.5-4.6l4.1.1c1.1-.2 2.2-.9 3.4-2 2.1-2.3 3.1-4.6 3.1-6.9-.1-.8-.3-1.2-.7-1.2-2.8.8-6.1 4.2-9.9 10zm-57.5 9.4a34 34 0 00-2.7 2.3c-.6.6-1 1.2-1.4 1.8 1.5-.4 2.6-1 3.4-1.8.4-.5.6-1 .6-1.7v-.6z"/>
</svg>
</h3>
With a 2s pause between reps
body {
height: 100vh;
width: 100%;
background-color: #6247D5;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
svg {
width: 40em;
}
#word {
fill:white;
}
#msk {
fill:none;
stroke:#fff;
stroke-width:12;
stroke-dasharray:1100px;
stroke-dashoffset:1100px;
}
<h3>
<svg xmlns="http://www.w3.org/2000/svg" class="subtitle" viewBox="0 0 229.2 69.6">
<defs>
<mask id="msk">
<path d="M226.7 46.7s-.6-4-2-5.2a9 9 0 00-7.6-1.8c-3.6.8-5.7 4.7-8.7 7-3 2.1-6 4.4-9.3 6.3-3.2 1.7-6.5 3.6-10 4.3-1.9.4-5.3 1.6-5.6-.2-.8-3.7 2.8-8.5 4.3-12.7 1.8-4.9 2.5-10.5 5.8-14.6 2-2.6 4.7-5.5 7.9-5.6 2.2 0 4.8 1.5 5.5 3.6 1 2.7-1 5.9-2.5 8.3-1.4 2.1-3.4 4.1-5.8 5-4 1.4-9.3-3.4-12.9-.2-6.7 6-11 9.6-19 16.6-.8.8-5.6.7-5-.2 8.7-11 14-25.5 22-38.2 1.6-2.4 5.2 2 7.3 1 .8-.5 1.5-1.7 1-2.4-.8-1.7-4.3.6-5.7-.8-1-1 .3-3-.4-4.4-.5-.9-2-3.8-2.5-2-1 3.3-2.8 5.3-5.3 6.6-2.1 1.2-7.3.8-7.3.8v0s-.4-2.4-1.3-2.8c-1.4-.6-2.5-1.3-4.4 1.3 0 0-3.4.9-3.1 2 .1 1 1.7.5 2.5.6 1.5.3 3 .8 4.4.9 3.2.3 8-2.7 9.7 0 3.4 5-3.8 11.8-7.3 16.8-2.3 3.2-6.2 2.9-8.5 8.1-3.9 8.7-10.7 15.8-16.5 12.1-1.5-1 1-5.1 1-5.1 2.8-11.3 18.1-16 12.7-22.8-.4-.5-.9-1.3-2 .5-7.1 12.8-3.6 3.9-6.5 7.2-2 2.3-5.4 2.7-8 4.2-4.3 2.4-8.8 4.8-12.8 7.7-1.4 1-3.6 1.5-3.8 3.2-.2 1.8 1.8 3.3 3.4 4.3 1 .7 2.4 1.3 3.5.8 2.2-1 2.8-4 3.2-6.3.5-3.5-1.5-6.8-1.6-10.3 0-2.8-.4-5.9.8-8.3 1.3-2.5 4-3.9 6.2-5.6 2.2-1.8 7.5-2.2 7-5.1-1.4-10-23.6-18.2-28.6-9.8-7 11.6-12.4 19.5-15.9 30.4-.9 2.8-2 6-1.2 8.9.7 2.8 2.3 6.7 5.2 7 3.3.2 5.2-4.4 7.3-7 3.3-4.3 6-9 7.7-14 .9-2.5 3.5-8.5 1.4-7.6-4.5 1.8-7.7 9.8-12.9 13.3-3.3 2.2-8.4 1.6-11.3 4.5-2.8 3-.2 11.1-4.3 11.5-1.2.1-1.6-1.8-1.8-3-.4-2.2 3.3-8 1.4-6.7-3 1.8-5.6 4.4-8.7 6-2.4 1.1-5 2.8-7.6 2.5-1.3-.1-3-.7-3.5-2-1.7-3.8 1.2-8.4 2.7-12.2 1.8-4.3 4.3-8.3 7.2-12 2-2.4 3.8-6.1 7-6.5 2.2-.2 5.1 1.4 5.9 3.6.7 2.3-1.3 4.7-2.6 6.7-1.7 2.7-3.7 5.8-6.8 7-2.2.8-6.5 1.9-7-.4-2-7 6.3-15.3 9.7-22.5 2.7-5.5 0-16.2-3.4-12.4-4.7 5.2-7.5 11.3-11.3 16.8-3.6 5.2-7.3 10.3-11.1 15.3-2.4 3-5 6-7.6 9-4 4.4-8 9-12.8 12.8C43.3 63 39 68.6 36 66.8c-2.4-1.4-2.4-4.5 0-8.3 4.5-7.2 10.3-10.4 14.4-20.4 3.2-7.7 10.4-13.8 12.5-22 .5-1.8.7-4 0-5.7-.4-1.1-1.8-3.6-2.4-2.6-4.1 7.3-4.2 16.6-10.5 21.6a248 248 0 00-29.7 29.3c-.9 1-3-.4-3.6-1.6-1-2.3 1.7-4.8 2.8-7.1 3-6 6.9-11.5 10.3-17.3 2.6-4.2 5.4-8.2 7.7-12.6 1.6-3 5.5-6 4-9-1.4-2.6-5.9-2-9-1.7-4 .4-7.5 2.9-11.2 4.7a76.8 76.8 0 00-10 5.8C9 21.7 5 22.9 4.3 26c-.6 2 .5 4.6 2 6.2a7.7 7.7 0 005.2 2.2c1.8 0 5-1.7 5-1.7">
<!-- Animation of the mask opening the word -->
<animate id="an"
attributeName="stroke-dashoffset"
begin="0s;an.end+2s"
dur="3s"
values="1100;0"
fill="freeze"
repeatCount="1"/>
</path>
</mask>
</defs>
<!-- The word is hidden by the mask -->
<path id="word" mask="url(#msk)" d="M79.7 29.1a344.4 344.4 0 01-20.4 23.4 152 152 0 01-13.8 12.6c-4.6 3.5-7.9 5.3-9.8 5.3h-.4c-2.9 0-4.8-1-5.6-3l-.2-1v-.6c0-2.2 1.8-6.5 5.5-12.8l7.8-14.3c-11.4 10.8-19 18.3-23 22.1-1.8 0-3.4-.6-4.8-1.8-.6-.7-.9-1.7-.9-2.9 0-2.3 1.8-6.5 5.4-12.6a6587 6587 0 0016.3-30.1h-.2A48.2 48.2 0 008.5 28.9v.1a5.5 5.5 0 002.5 2.9c1.5.5 3 .7 4.5.7l.9.1c0 .9-1.6 1.9-4.8 3.1-1.7.5-3.1.7-4.2.7h-.5c-2.5 0-4.2-2.8-4.9-8.4l-.1-1.6v-1.1a7 7 0 012.8-5.9c1.8-1.7 4.1-3.4 7-5.1 4-2.3 9.3-4.5 15.8-6.6A50 50 0 0139 6c1.5.2 2.9.8 4 1.8a7.9 7.9 0 012.6 5.9 1744.2 1744.2 0 01-17.5 32v.1l22.1-20.9C56 14 59.2 7.7 59.5 6.1c1.4.2 2.7.7 4 1.7a7.7 7.7 0 012.7 6.2v.1C49.7 44 41.2 59.4 40.8 60.4c1.8-1.6 4.3-4.2 7.7-7.8 9.4-10.6 18.4-22 27.2-34A79.7 79.7 0 0086.4 1l.1-1.1v-.1l.2-.1c1.5.4 3.1 1.4 4.9 3C93.4 5 94.4 6.8 94.4 8c-2.9 5.2-7.8 12.2-14.7 21.1zM125.8 40l-1.6 3-2 3.8-2.1 3.7c-1.8 3.2-3.2 5.7-4.1 7.6-1.5 2.8-4.1 3.4-7.7 2-1.5-.6-2.8-1.4-4-2.5a10.2 10.2 0 01-2.5-3.4l-3.6 6.6c-4.5-.4-6.3-2.4-5.6-6l-3 2.1a27.3 27.3 0 01-8.7 3.7l-1.8.2h-.4c-1.8 0-3.4-.7-4.7-2a10.6 10.6 0 01-2.1-6.6v-.6c0-3.1 1.1-7 3.2-11.5a36 36 0 0113.8-16.2l3-1.5 1.6-.6c.7 0 1.9.2 3.4.6l2.2.7c2.5 1.2 3.8 3 3.8 5.4v.4c0 1.6-.6 3.5-1.9 5.7a29.4 29.4 0 01-9.5 9.4l-8.3.2-1.6 2.4c-1.5 2.7-2.3 5-2.6 6.9.1.3.4.5.9.5h.1a45.5 45.5 0 0015.9-7.7l1.2-.9 1.4-2.6 4.5-8.3.7-1.4.8-1.4 1.6-2.9 3.2-5.9c5.4-9.8 8-15.1 7.9-15.9 2 .2 3.6 1 4.8 2.6a7 7 0 011.7 5.2l-11.9 21.5 3.3-3 1.7-1.5 1.7-1.6 6-5.4c4.6.4 6.4 2.6 5.4 6.6-.4 1.5-1.2 3.4-2.4 5.7l-.8 1.5-.9 1.4zm-40.4-1.2l4 .2a9 9 0 003.9-2.5 11.1 11.1 0 002.7-6.3c0-.7-.2-1.1-.6-1.3h-.2c-.8.1-1.8.7-3.1 1.8a93 93 0 00-2.9 2.8 48.8 48.8 0 00-3.8 5.3zm34.5-2.9l-13.6 11.5-.9.6-.4.6c.2 1.7.7 3 1.5 4 .9 1 1.8 1.4 3 1.1l10.4-17.8zm107.9 7.2v.6c0 1.2-.4 2.2-1.1 3h-.1c-.2-.7-.6-1.3-1.2-1.8a5 5 0 00-1.8-.5h-.6c-3.2 0-9.8 2.8-19.8 8.5-9 5.2-14.8 7.8-17.3 7.8h-.3c-3.4 0-5.6-1.9-6.7-5.6-.2-1.1-.4-2.2-.4-3.1v-.5c0-1.4.2-3 .6-4.6l-14.3 13-.9.8c-1.7 0-3.1-.5-4.4-1.5a4 4 0 01-1.1-2.6V56c0-1.7 1.3-5 4-9.8a659 659 0 01-16.1 14.5 9 9 0 01-4-1.1 3.7 3.7 0 01-1.8-3.2V56c0-2.2 1.5-5.8 4.4-10.9l2.2-3.9a93.5 93.5 0 00-7 3.3c.3 1.7.5 3.2.5 4.7v.3c0 3.4-.9 6.4-2.7 8.9a7 7 0 01-5.3 2.4h-.4a7.6 7.6 0 01-7-4.8c-.3-.9-.5-1.8-.5-2.5v-.4c0-.9.2-1.9.6-3l.3-.4c2.5-2 5-3.8 7.5-5.4-2-3.7-3-6-3-6.9v-1.1c0-3 1.6-6.3 4.8-9.8a35.2 35.2 0 0112.2-8.1 9 9 0 014.6 4c.4.6.7 1.3 1 2.1l.2.4c-2.8.9-5 1.8-6.8 2.9-4.9 2.8-7.4 6.2-7.4 10.2 0 .9.1 1.8.4 2.8 4.9-2.9 8.8-4.9 11.6-6l2.7-4.7a21 21 0 002.5-5.9h.1a7.3 7.3 0 015.5 3.5 7.8 7.8 0 011.1 3.7l-.1.3v.4l-4.2 7.5-5.2 9.1 12.1-11.1c.7-.4 1.4-.6 1.8-.6h.4l9-16.4h-.1l-6.4.2a2 2 0 01-.9-.9l-3.4 3.5a31.2 31.2 0 01-7-1.8v-.1l4-9.3 4.2-.3h1.2c2.7 0 5.3.3 7.8.8v.1l-4.9 5.1 7.3-.8c3-5.5 4.5-8.6 4.5-9.3 1.2 0 2.5.6 4.1 1.8a7.4 7.4 0 012.3 5.4c0 .4-.2 1-.6 1.6l2.6-.1h2.8l.1.2-1.9 4.3h-.1l-5.6-.4-16 28.7h.1l12.1-11.2h.1l2.5-4.4c1.1-1.6 2.6-3.4 4.5-5.4a23 23 0 015.4-4.3c1.4-.9 3-1.8 4.9-2.5l.4-.1c1.8 0 3.8.5 5.9 1.4 2.5 1.2 3.7 3 3.7 5.5 0 3.2-2 6.9-6 11.2a27.9 27.9 0 01-5.5 4.3l-.7.1-7.8.1c-2.1 2.8-3.5 6-4.2 9.4 0 .3.6.6 1.7.7l.7.1h.7c3.1 0 7.8-2.7 13.8-8.1 5.1-4.6 8.7-7.5 10.9-8.8 2-1.1 3.7-1.7 5.1-1.7 4.1 0 7 1.7 8.6 5 .4.9.5 1.8.5 2.5zm-35.5-4.6l4.1.1c1.1-.2 2.2-.9 3.4-2 2.1-2.3 3.1-4.6 3.1-6.9-.1-.8-.3-1.2-.7-1.2-2.8.8-6.1 4.2-9.9 10zm-57.5 9.4a34 34 0 00-2.7 2.3c-.6.6-1 1.2-1.4 1.8 1.5-.4 2.6-1 3.4-1.8.4-.5.6-1 .6-1.7v-.6z"/>
</svg>
</h3>
SVG mask + JS solution
Drawing a word, erasing a word by clicking on a button
var draw = true;
function play() {
var path = document.getElementById('path');
path.style.strokeDashoffset = (draw) ? '0' : '1109';
draw = !draw;
}
body {
height: 100vh;
width: 100%;
background-color:#6247D5;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
svg {
width: 40em;
}
#word {
fill:white;
}
#msk {
fill:none;
stroke:#fff;
stroke-width:12;
stroke-dasharray:1109px;
stroke-dashoffset:1109px;
}
<button onclick="play();">Play</button>
<h3>
<svg xmlns="http://www.w3.org/2000/svg" class="subtitle" viewBox="0 0 229.2 69.6">
<defs>
<mask id="msk">
<path id="path" d="M226.7 46.7s-.6-4-2-5.2a9 9 0 00-7.6-1.8c-3.6.8-5.7 4.7-8.7 7-3 2.1-6 4.4-9.3 6.3-3.2 1.7-6.5 3.6-10 4.3-1.9.4-5.3 1.6-5.6-.2-.8-3.7 2.8-8.5 4.3-12.7 1.8-4.9 2.5-10.5 5.8-14.6 2-2.6 4.7-5.5 7.9-5.6 2.2 0 4.8 1.5 5.5 3.6 1 2.7-1 5.9-2.5 8.3-1.4 2.1-3.4 4.1-5.8 5-4 1.4-9.3-3.4-12.9-.2-6.7 6-11 9.6-19 16.6-.8.8-5.6.7-5-.2 8.7-11 14-25.5 22-38.2 1.6-2.4 5.2 2 7.3 1 .8-.5 1.5-1.7 1-2.4-.8-1.7-4.3.6-5.7-.8-1-1 .3-3-.4-4.4-.5-.9-2-3.8-2.5-2-1 3.3-2.8 5.3-5.3 6.6-2.1 1.2-7.3.8-7.3.8v0s-.4-2.4-1.3-2.8c-1.4-.6-2.5-1.3-4.4 1.3 0 0-3.4.9-3.1 2 .1 1 1.7.5 2.5.6 1.5.3 3 .8 4.4.9 3.2.3 8-2.7 9.7 0 3.4 5-3.8 11.8-7.3 16.8-2.3 3.2-6.2 2.9-8.5 8.1-3.9 8.7-10.7 15.8-16.5 12.1-1.5-1 1-5.1 1-5.1 2.8-11.3 18.1-16 12.7-22.8-.4-.5-.9-1.3-2 .5-7.1 12.8-3.6 3.9-6.5 7.2-2 2.3-5.4 2.7-8 4.2-4.3 2.4-8.8 4.8-12.8 7.7-1.4 1-3.6 1.5-3.8 3.2-.2 1.8 1.8 3.3 3.4 4.3 1 .7 2.4 1.3 3.5.8 2.2-1 2.8-4 3.2-6.3.5-3.5-1.5-6.8-1.6-10.3 0-2.8-.4-5.9.8-8.3 1.3-2.5 4-3.9 6.2-5.6 2.2-1.8 7.5-2.2 7-5.1-1.4-10-23.6-18.2-28.6-9.8-7 11.6-12.4 19.5-15.9 30.4-.9 2.8-2 6-1.2 8.9.7 2.8 2.3 6.7 5.2 7 3.3.2 5.2-4.4 7.3-7 3.3-4.3 6-9 7.7-14 .9-2.5 3.5-8.5 1.4-7.6-4.5 1.8-7.7 9.8-12.9 13.3-3.3 2.2-8.4 1.6-11.3 4.5-2.8 3-.2 11.1-4.3 11.5-1.2.1-1.6-1.8-1.8-3-.4-2.2 3.3-8 1.4-6.7-3 1.8-5.6 4.4-8.7 6-2.4 1.1-5 2.8-7.6 2.5-1.3-.1-3-.7-3.5-2-1.7-3.8 1.2-8.4 2.7-12.2 1.8-4.3 4.3-8.3 7.2-12 2-2.4 3.8-6.1 7-6.5 2.2-.2 5.1 1.4 5.9 3.6.7 2.3-1.3 4.7-2.6 6.7-1.7 2.7-3.7 5.8-6.8 7-2.2.8-6.5 1.9-7-.4-2-7 6.3-15.3 9.7-22.5 2.7-5.5 0-16.2-3.4-12.4-4.7 5.2-7.5 11.3-11.3 16.8-3.6 5.2-7.3 10.3-11.1 15.3-2.4 3-5 6-7.6 9-4 4.4-8 9-12.8 12.8C43.3 63 39 68.6 36 66.8c-2.4-1.4-2.4-4.5 0-8.3 4.5-7.2 10.3-10.4 14.4-20.4 3.2-7.7 10.4-13.8 12.5-22 .5-1.8.7-4 0-5.7-.4-1.1-1.8-3.6-2.4-2.6-4.1 7.3-4.2 16.6-10.5 21.6a248 248 0 00-29.7 29.3c-.9 1-3-.4-3.6-1.6-1-2.3 1.7-4.8 2.8-7.1 3-6 6.9-11.5 10.3-17.3 2.6-4.2 5.4-8.2 7.7-12.6 1.6-3 5.5-6 4-9-1.4-2.6-5.9-2-9-1.7-4 .4-7.5 2.9-11.2 4.7a76.8 76.8 0 00-10 5.8C9 21.7 5 22.9 4.3 26c-.6 2 .5 4.6 2 6.2a7.7 7.7 0 005.2 2.2c1.8 0 5-1.7 5-1.7"
style="transition: stroke-dashoffset 3s ease-in-out; stroke-dashoffset: 1109;">
</path>
</mask>
</defs>
<!-- The word is hidden by the mask -->
<path id="word" mask="url(#msk)" d="M79.7 29.1a344.4 344.4 0 01-20.4 23.4 152 152 0 01-13.8 12.6c-4.6 3.5-7.9 5.3-9.8 5.3h-.4c-2.9 0-4.8-1-5.6-3l-.2-1v-.6c0-2.2 1.8-6.5 5.5-12.8l7.8-14.3c-11.4 10.8-19 18.3-23 22.1-1.8 0-3.4-.6-4.8-1.8-.6-.7-.9-1.7-.9-2.9 0-2.3 1.8-6.5 5.4-12.6a6587 6587 0 0016.3-30.1h-.2A48.2 48.2 0 008.5 28.9v.1a5.5 5.5 0 002.5 2.9c1.5.5 3 .7 4.5.7l.9.1c0 .9-1.6 1.9-4.8 3.1-1.7.5-3.1.7-4.2.7h-.5c-2.5 0-4.2-2.8-4.9-8.4l-.1-1.6v-1.1a7 7 0 012.8-5.9c1.8-1.7 4.1-3.4 7-5.1 4-2.3 9.3-4.5 15.8-6.6A50 50 0 0139 6c1.5.2 2.9.8 4 1.8a7.9 7.9 0 012.6 5.9 1744.2 1744.2 0 01-17.5 32v.1l22.1-20.9C56 14 59.2 7.7 59.5 6.1c1.4.2 2.7.7 4 1.7a7.7 7.7 0 012.7 6.2v.1C49.7 44 41.2 59.4 40.8 60.4c1.8-1.6 4.3-4.2 7.7-7.8 9.4-10.6 18.4-22 27.2-34A79.7 79.7 0 0086.4 1l.1-1.1v-.1l.2-.1c1.5.4 3.1 1.4 4.9 3C93.4 5 94.4 6.8 94.4 8c-2.9 5.2-7.8 12.2-14.7 21.1zM125.8 40l-1.6 3-2 3.8-2.1 3.7c-1.8 3.2-3.2 5.7-4.1 7.6-1.5 2.8-4.1 3.4-7.7 2-1.5-.6-2.8-1.4-4-2.5a10.2 10.2 0 01-2.5-3.4l-3.6 6.6c-4.5-.4-6.3-2.4-5.6-6l-3 2.1a27.3 27.3 0 01-8.7 3.7l-1.8.2h-.4c-1.8 0-3.4-.7-4.7-2a10.6 10.6 0 01-2.1-6.6v-.6c0-3.1 1.1-7 3.2-11.5a36 36 0 0113.8-16.2l3-1.5 1.6-.6c.7 0 1.9.2 3.4.6l2.2.7c2.5 1.2 3.8 3 3.8 5.4v.4c0 1.6-.6 3.5-1.9 5.7a29.4 29.4 0 01-9.5 9.4l-8.3.2-1.6 2.4c-1.5 2.7-2.3 5-2.6 6.9.1.3.4.5.9.5h.1a45.5 45.5 0 0015.9-7.7l1.2-.9 1.4-2.6 4.5-8.3.7-1.4.8-1.4 1.6-2.9 3.2-5.9c5.4-9.8 8-15.1 7.9-15.9 2 .2 3.6 1 4.8 2.6a7 7 0 011.7 5.2l-11.9 21.5 3.3-3 1.7-1.5 1.7-1.6 6-5.4c4.6.4 6.4 2.6 5.4 6.6-.4 1.5-1.2 3.4-2.4 5.7l-.8 1.5-.9 1.4zm-40.4-1.2l4 .2a9 9 0 003.9-2.5 11.1 11.1 0 002.7-6.3c0-.7-.2-1.1-.6-1.3h-.2c-.8.1-1.8.7-3.1 1.8a93 93 0 00-2.9 2.8 48.8 48.8 0 00-3.8 5.3zm34.5-2.9l-13.6 11.5-.9.6-.4.6c.2 1.7.7 3 1.5 4 .9 1 1.8 1.4 3 1.1l10.4-17.8zm107.9 7.2v.6c0 1.2-.4 2.2-1.1 3h-.1c-.2-.7-.6-1.3-1.2-1.8a5 5 0 00-1.8-.5h-.6c-3.2 0-9.8 2.8-19.8 8.5-9 5.2-14.8 7.8-17.3 7.8h-.3c-3.4 0-5.6-1.9-6.7-5.6-.2-1.1-.4-2.2-.4-3.1v-.5c0-1.4.2-3 .6-4.6l-14.3 13-.9.8c-1.7 0-3.1-.5-4.4-1.5a4 4 0 01-1.1-2.6V56c0-1.7 1.3-5 4-9.8a659 659 0 01-16.1 14.5 9 9 0 01-4-1.1 3.7 3.7 0 01-1.8-3.2V56c0-2.2 1.5-5.8 4.4-10.9l2.2-3.9a93.5 93.5 0 00-7 3.3c.3 1.7.5 3.2.5 4.7v.3c0 3.4-.9 6.4-2.7 8.9a7 7 0 01-5.3 2.4h-.4a7.6 7.6 0 01-7-4.8c-.3-.9-.5-1.8-.5-2.5v-.4c0-.9.2-1.9.6-3l.3-.4c2.5-2 5-3.8 7.5-5.4-2-3.7-3-6-3-6.9v-1.1c0-3 1.6-6.3 4.8-9.8a35.2 35.2 0 0112.2-8.1 9 9 0 014.6 4c.4.6.7 1.3 1 2.1l.2.4c-2.8.9-5 1.8-6.8 2.9-4.9 2.8-7.4 6.2-7.4 10.2 0 .9.1 1.8.4 2.8 4.9-2.9 8.8-4.9 11.6-6l2.7-4.7a21 21 0 002.5-5.9h.1a7.3 7.3 0 015.5 3.5 7.8 7.8 0 011.1 3.7l-.1.3v.4l-4.2 7.5-5.2 9.1 12.1-11.1c.7-.4 1.4-.6 1.8-.6h.4l9-16.4h-.1l-6.4.2a2 2 0 01-.9-.9l-3.4 3.5a31.2 31.2 0 01-7-1.8v-.1l4-9.3 4.2-.3h1.2c2.7 0 5.3.3 7.8.8v.1l-4.9 5.1 7.3-.8c3-5.5 4.5-8.6 4.5-9.3 1.2 0 2.5.6 4.1 1.8a7.4 7.4 0 012.3 5.4c0 .4-.2 1-.6 1.6l2.6-.1h2.8l.1.2-1.9 4.3h-.1l-5.6-.4-16 28.7h.1l12.1-11.2h.1l2.5-4.4c1.1-1.6 2.6-3.4 4.5-5.4a23 23 0 015.4-4.3c1.4-.9 3-1.8 4.9-2.5l.4-.1c1.8 0 3.8.5 5.9 1.4 2.5 1.2 3.7 3 3.7 5.5 0 3.2-2 6.9-6 11.2a27.9 27.9 0 01-5.5 4.3l-.7.1-7.8.1c-2.1 2.8-3.5 6-4.2 9.4 0 .3.6.6 1.7.7l.7.1h.7c3.1 0 7.8-2.7 13.8-8.1 5.1-4.6 8.7-7.5 10.9-8.8 2-1.1 3.7-1.7 5.1-1.7 4.1 0 7 1.7 8.6 5 .4.9.5 1.8.5 2.5zm-35.5-4.6l4.1.1c1.1-.2 2.2-.9 3.4-2 2.1-2.3 3.1-4.6 3.1-6.9-.1-.8-.3-1.2-.7-1.2-2.8.8-6.1 4.2-9.9 10zm-57.5 9.4a34 34 0 00-2.7 2.3c-.6.6-1 1.2-1.4 1.8 1.5-.4 2.6-1 3.4-1.8.4-.5.6-1 .6-1.7v-.6z"/>
</svg>
</h3>
RuntimeError: CUDA error: no kernel image is available for execution on the device
CUDA error with pytorch
Installed pytorch with conda and CUDA support
The error occurs when I am trying to run a tensor on the cuda gpu
torch.rand(10).to(torch.device('cuda'))
RuntimeError Traceback (most recent call last)
~/anaconda3/envs/deep/lib/python3.7/site-packages/IPython/core/formatters.py in call(self, obj)
700 type_pprinters=self.type_printers,
701 deferred_pprinters=self.deferred_printers)
--> 702 printer.pretty(obj)
703 printer.flush()
704 return stream.getvalue()
~/anaconda3/envs/deep/lib/python3.7/site-packages/IPython/lib/pretty.py in pretty(self, obj)
397 if cls is not object
398 and callable(cls.dict.get('repr')):
--> 399 return _repr_pprint(obj, self, cycle)
400
401 return _default_pprint(obj, self, cycle)
~/anaconda3/envs/deep/lib/python3.7/site-packages/IPython/lib/pretty.py in repr_pprint(obj, p, cycle)
687 """A pprint that just redirects to the normal repr function."""
688 # Find newlines and replace them with p.break()
--> 689 output = repr(obj)
690 for idx,output_line in enumerate(output.splitlines()):
691 if idx:
~/anaconda3/envs/deep/lib/python3.7/site-packages/torch/tensor.py in repr(self)
128 # characters to replace unicode characters with.
129 if sys.version_info > (3,):
--> 130 return torch._tensor_str._str(self)
131 else:
132 if hasattr(sys.stdout, 'encoding'):
~/anaconda3/envs/deep/lib/python3.7/site-packages/torch/_tensor_str.py in _str(self)
309 tensor_str = _tensor_str(self.to_dense(), indent)
310 else:
--> 311 tensor_str = _tensor_str(self, indent)
312
313 if self.layout != torch.strided:
~/anaconda3/envs/deep/lib/python3.7/site-packages/torch/_tensor_str.py in _tensor_str(self, indent)
207 if self.dtype is torch.float16 or self.dtype is torch.bfloat16:
208 self = self.float()
--> 209 formatter = _Formatter(get_summarized_data(self) if summarize else self)
210 return _tensor_str_with_formatter(self, indent, formatter, summarize)
211
~/anaconda3/envs/deep/lib/python3.7/site-packages/torch/_tensor_str.py in init(self, tensor)
85
86 else:
---> 87 nonzero_finite_vals = torch.masked_select(tensor_view, torch.isfinite(tensor_view) & tensor_view.ne(0))
88
89 if nonzero_finite_vals.numel() == 0:
~/anaconda3/envs/deep/lib/python3.7/site-packages/torch/functional.py in isfinite(tensor)
225 if not tensor.is_floating_point():
226 return torch.ones_like(tensor, dtype=torch.bool)
--> 227 return (tensor == tensor) & (tensor.abs() != inf)
228
229
RuntimeError: CUDA error: no kernel image is available for execution on the device
This is the collect_env.py output:
Collecting environment information...
PyTorch version: 1.3.1
Is debug build: No
CUDA used to build PyTorch: 10.0.130
OS: Ubuntu 16.04.6 LTS
GCC version: (Ubuntu 5.4.0-6ubuntu1~16.04.12) 5.4.0 20160609
CMake version: version 3.5.1
Python version: 3.7
Is CUDA available: Yes
CUDA runtime version: 10.0.130
GPU models and configuration: GPU 0: GeForce 920M
Nvidia driver version: 415.27
cuDNN version: Could not collect
Versions of relevant libraries:
[pip] numpy==1.17.4
[pip] numpy-stl==2.10.1
[pip] torch==1.3.1
[pip] torchvision==0.4.2
[conda] blas 1.0 mkl
[conda] mkl 2019.4 243
[conda] mkl-service 2.3.0 py37he904b0f_0
[conda] mkl_fft 1.0.15 py37ha843d7b_0
[conda] mkl_random 1.1.0 py37hd6b4f25_0
[conda] pytorch 1.3.1 py3.7_cuda10.0.130_cudnn7.6.3_0 pytorch
[conda] torchvision 0.4.2 py37_cu100 pytorch
Some have stated that the TORCH_CUDA_ARCH_LIST needs to be manually set to ='3.5', but I can't figure out how
java 7 swing application rendering wrong colors on rhel7 machine
I have a java swing application that is compiled with java 1.7_u60. It is launching fine on RHEL6.4 while the same when launched on the RHEL7 machine does not render properly. In fact there is a black color everywhere and nothing is shown. While launching application I also get the following Warning message. WARNING: Application calling GLX 1.3 function "glXCreatePbuffer" when GLX 1.3 is not supported! This is an application bug! I tried to update the GLX to 1.3 or higher but could not update this to higher version. The output of glxinfo is as follows. $ glxinfo name of display: sahara:2 display: sahara:2 screen: 0 direct rendering: Yes server glx vendor string: SGI server glx version string: 1.2 server glx extensions: GLX_ARB_multisample, GLX_EXT_import_context, GLX_EXT_visual_info, GLX_EXT_visual_rating, GLX_OML_swap_method, GLX_SGIS_multisample, GLX_SGIX_fbconfig, GLX_SGIX_hyperpipe, GLX_SGIX_swap_barrier, GLX_SGI_make_current_read client glx vendor string: Mesa Project and SGI client glx version string: 1.4 client glx extensions: GLX_ARB_create_context, GLX_ARB_create_context_profile, GLX_ARB_create_context_robustness, GLX_ARB_fbconfig_float, GLX_ARB_framebuffer_sRGB, GLX_ARB_get_proc_address, GLX_ARB_multisample, GLX_EXT_create_context_es2_profile, GLX_EXT_fbconfig_packed_float, GLX_EXT_framebuffer_sRGB, GLX_EXT_import_context, GLX_EXT_texture_from_pixmap, GLX_EXT_visual_info, GLX_EXT_visual_rating, GLX_INTEL_swap_event, GLX_MESA_copy_sub_buffer, GLX_MESA_multithread_makecurrent, GLX_MESA_swap_control, GLX_OML_swap_method, GLX_OML_sync_control, GLX_SGIS_multisample, GLX_SGIX_fbconfig, GLX_SGIX_pbuffer, GLX_SGIX_visual_select_group, GLX_SGI_make_current_read, GLX_SGI_swap_control, GLX_SGI_video_sync GLX version: 1.2 GLX extensions: GLX_ARB_get_proc_address, GLX_ARB_multisample, GLX_EXT_import_context, GLX_EXT_visual_info, GLX_EXT_visual_rating, GLX_MESA_multithread_makecurrent, GLX_OML_swap_method, GLX_SGIS_multisample, GLX_SGIX_fbconfig, GLX_SGI_make_current_read OpenGL vendor string: VMware, Inc. OpenGL renderer string: Gallium 0.4 on llvmpipe (LLVM 3.3, 256 bits) OpenGL version string: 2.1 Mesa 9.2.5 OpenGL shading language version string: 1.30 OpenGL extensions: GL_AMD_conservative_depth, GL_AMD_draw_buffers_blend, GL_APPLE_packed_pixels, GL_APPLE_vertex_array_object, GL_ARB_ES2_compatibility, GL_ARB_blend_func_extended, GL_ARB_color_buffer_float, GL_ARB_conservative_depth, GL_ARB_copy_buffer, GL_ARB_debug_output, GL_ARB_depth_buffer_float, GL_ARB_depth_texture, GL_ARB_draw_buffers, GL_ARB_draw_buffers_blend, GL_ARB_draw_elements_base_vertex, GL_ARB_draw_instanced, GL_ARB_explicit_attrib_location, GL_ARB_fragment_coord_conventions, GL_ARB_fragment_program, GL_ARB_fragment_program_shadow, GL_ARB_fragment_shader, GL_ARB_framebuffer_object, GL_ARB_framebuffer_sRGB, GL_ARB_get_program_binary, GL_ARB_half_float_pixel, GL_ARB_half_float_vertex, GL_ARB_instanced_arrays, GL_ARB_internalformat_query, GL_ARB_invalidate_subdata, GL_ARB_map_buffer_range, GL_ARB_multisample, GL_ARB_multitexture, GL_ARB_occlusion_query, GL_ARB_occlusion_query2, GL_ARB_pixel_buffer_object, GL_ARB_point_parameters, GL_ARB_point_sprite, GL_ARB_provoking_vertex, GL_ARB_robustness, GL_ARB_sampler_objects, GL_ARB_shader_bit_encoding, GL_ARB_shader_objects, GL_ARB_shader_texture_lod, GL_ARB_shading_language_100, GL_ARB_shading_language_420pack, GL_ARB_shading_language_packing, GL_ARB_shadow, GL_ARB_sync, GL_ARB_texture_border_clamp, GL_ARB_texture_compression, GL_ARB_texture_compression_rgtc, GL_ARB_texture_cube_map, GL_ARB_texture_env_add, GL_ARB_texture_env_combine, GL_ARB_texture_env_crossbar, GL_ARB_texture_env_dot3, GL_ARB_texture_mirrored_repeat, GL_ARB_texture_non_power_of_two, GL_ARB_texture_rectangle, GL_ARB_texture_rg, GL_ARB_texture_rgb10_a2ui, GL_ARB_texture_storage, GL_ARB_texture_swizzle, GL_ARB_timer_query, GL_ARB_transform_feedback2, GL_ARB_transform_feedback3, GL_ARB_transform_feedback_instanced, GL_ARB_transpose_matrix, GL_ARB_uniform_buffer_object, GL_ARB_vertex_array_bgra, GL_ARB_vertex_array_object, GL_ARB_vertex_buffer_object, GL_ARB_vertex_program, GL_ARB_vertex_shader, GL_ARB_vertex_type_2_10_10_10_rev, GL_ARB_window_pos, GL_ATI_blend_equation_separate, GL_ATI_draw_buffers, GL_ATI_separate_stencil, GL_ATI_texture_compression_3dc, GL_ATI_texture_env_combine3, GL_ATI_texture_mirror_once, GL_EXT_abgr, GL_EXT_bgra, GL_EXT_blend_color, GL_EXT_blend_equation_separate, GL_EXT_blend_func_separate, GL_EXT_blend_minmax, GL_EXT_blend_subtract, GL_EXT_compiled_vertex_array, GL_EXT_copy_texture, GL_EXT_draw_buffers2, GL_EXT_draw_instanced, GL_EXT_draw_range_elements, GL_EXT_fog_coord, GL_EXT_framebuffer_blit, GL_EXT_framebuffer_object, GL_EXT_framebuffer_sRGB, GL_EXT_gpu_program_parameters, GL_EXT_multi_draw_arrays, GL_EXT_packed_depth_stencil, GL_EXT_packed_float, GL_EXT_packed_pixels, GL_EXT_pixel_buffer_object, GL_EXT_point_parameters, GL_EXT_polygon_offset, GL_EXT_provoking_vertex, GL_EXT_rescale_normal, GL_EXT_secondary_color, GL_EXT_separate_specular_color, GL_EXT_shadow_funcs, GL_EXT_stencil_two_side, GL_EXT_stencil_wrap, GL_EXT_subtexture, GL_EXT_texture, GL_EXT_texture3D, GL_EXT_texture_array, GL_EXT_texture_compression_latc, GL_EXT_texture_compression_rgtc, GL_EXT_texture_cube_map, GL_EXT_texture_edge_clamp, GL_EXT_texture_env_add, GL_EXT_texture_env_combine, GL_EXT_texture_env_dot3, GL_EXT_texture_integer, GL_EXT_texture_lod_bias, GL_EXT_texture_mirror_clamp, GL_EXT_texture_object, GL_EXT_texture_rectangle, GL_EXT_texture_sRGB, GL_EXT_texture_sRGB_decode, GL_EXT_texture_shared_exponent, GL_EXT_texture_snorm, GL_EXT_texture_swizzle, GL_EXT_timer_query, GL_EXT_transform_feedback, GL_EXT_vertex_array, GL_EXT_vertex_array_bgra, GL_IBM_multimode_draw_arrays, GL_IBM_rasterpos_clip, GL_IBM_texture_mirrored_repeat, GL_INGR_blend_func_separate, GL_MESA_pack_invert, GL_MESA_texture_array, GL_MESA_texture_signed_rgba, GL_MESA_window_pos, GL_MESA_ycbcr_texture, GL_NV_blend_square, GL_NV_conditional_render, GL_NV_fog_distance, GL_NV_light_max_exponent, GL_NV_packed_depth_stencil, GL_NV_primitive_restart, GL_NV_texgen_reflection, GL_NV_texture_env_combine4, GL_NV_texture_rectangle, GL_OES_EGL_image, GL_OES_read_format, GL_SGIS_generate_mipmap, GL_SGIS_texture_border_clamp, GL_SGIS_texture_edge_clamp, GL_SGIS_texture_lod, GL_SUN_multi_draw_arrays 2 GLX Visuals visual x bf lv rg d st colorbuffer sr ax dp st accumbuffer ms cav id dep cl sp sz l ci b ro r g b a F gb bf th cl r g b a ns b eat ---------------------------------------------------------------------------- 0x023 24 tc 0 24 0 r y . 8 8 8 0 . . 0 16 0 0 0 0 0 0 0 None 0x027 24 dc 0 24 0 r y . 8 8 8 0 . . 0 16 0 0 0 0 0 0 0 None 2 GLXFBConfigs: visual x bf lv rg d st colorbuffer sr ax dp st accumbuffer ms cav id dep cl sp sz l ci b ro r g b a F gb bf th cl r g b a ns b eat ---------------------------------------------------------------------------- 0x023 24 tc 0 24 0 r y . 8 8 8 0 . . 0 16 0 0 0 0 0 0 0 None 0x027 24 dc 0 24 0 r y . 8 8 8 0 . . 0 16 0 0 0 0 0 0 0 None I would love to have your help. Thanks a ton Ankit
Pig Join is returning no results
I have been stuck on this problem for over twelve hours now. I have a Pig script that is running on Amazon Web Services. Currently, I am just running my script in interactive mode. I am trying to get averages on a large data set of climate readings from weather stations; however, this data doesn't have country or state information so it has to be joined with another table that does.
State Table:
719990 99999 LILLOOET CN CA BC WKF +50683 -121933 +02780
719994 99999 SEDCO 710 CN CA CWQJ +46500 -048500 +00000
720000 99999 BOGUS AMERICAN US US -99999 -999999 -99999
720001 99999 PEASON RIDGE/RANGE US US LA K02R +31400 -093283 +01410
720002 99999 HALLOCK(AWS) US US MN K03Y +48783 -096950 +02500
720003 99999 DEER PARK(AWS) US US WA K07S +47967 -117433 +06720
720004 99999 MASON US US MI K09G +42567 -084417 +02800
720005 99999 GASTONIA US US NC K0A6 +35200 -081150 +02440
Climate Table: (I realize this doesn't contain anything to satisfy the join condition, but the full data set does.)
STN--- WBAN YEARMODA TEMP DEWP SLP STP VISIB WDSP MXSPD GUST MAX MIN PRCP SNDP FRSHTT
010010 99999 20090101 23.3 24 15.6 24 1033.2 24 1032.0 24 13.5 6 9.6 24 17.5 999.9 27.9* 16.7 0.00G 999.9 001000
010010 99999 20090102 27.3 24 20.5 24 1026.1 24 1024.9 24 13.7 5 14.6 24 23.3 999.9 28.9 25.3* 0.00G 999.9 001000
010010 99999 20090103 25.2 24 18.4 24 1028.3 24 1027.1 24 15.5 6 4.2 24 9.7 999.9 26.2* 23.9* 0.00G 999.9 001000
010010 99999 20090104 27.7 24 23.2 24 1019.3 24 1018.1 24 6.7 6 8.6 24 13.6 999.9 29.8 24.8 0.00G 999.9 011000
010010 99999 20090105 19.3 24 13.0 24 1015.5 24 1014.3 24 5.6 6 17.5 24 25.3 999.9 26.2* 10.2* 0.05G 999.9 001000
010010 99999 20090106 12.9 24 2.9 24 1019.6 24 1018.3 24 8.2 6 15.5 24 25.3 999.9 19.0* 8.8 0.02G 999.9 001000
010010 99999 20090107 26.2 23 20.7 23 998.6 23 997.4 23 6.6 6 12.1 22 21.4 999.9 31.5 19.2* 0.00G 999.9 011000
010010 99999 20090108 21.5 24 15.2 24 995.3 24 994.1 24 12.4 5 12.8 24 25.3 999.9 24.6* 19.2* 0.05G 999.9 011000
010010 99999 20090109 27.5 23 24.5 23 982.5 23 981.3 23 7.9 5 20.2 22 33.0 999.9 34.2 20.1* 0.00G 999.9 011000
010010 99999 20090110 22.5 23 16.7 23 977.2 23 976.1 23 11.9 6 15.5 23 35.0 999.9 28.9* 17.2 0.09G 999.9 000000
I load in the climate data using TextLoader, apply a regular expression to obtain the fields, and filter out the nulls from the result set. I then do the same with the state data, but I filter it for the country being the US.
The bags have the following schema:
CLIMATE_REMOVE_EMPTY: {station: int,wban: int,year: int,month: int,day: int,temp: double}
STATES_FILTER_US: {station: int,wban: int,name: chararray,wmo: chararray,fips: chararray,state: chararray}
I need to perform a join operation on (station,wban) so I can get a resulting bag with the station, wban, year, month, and temps. When I perform a dump on the resulting bag, it says that it was successful; however, the dump returns 0 results. This is the output.
HadoopVersion PigVersion UserId StartedAt FinishedAt Features
1.0.3 0.9.2-amzn hadoop 2013-05-03 00:10:51 2013-05-03 00:12:42 HASH_JOIN,FILTER
Success!
Job Stats (time in seconds):
JobId Maps Reduces MaxMapTime MinMapTIme AvgMapTime MaxReduceTime MinReduceTime AvgReduceTime Alias Feature Outputs
job_201305030005_0001 2 1 36 15 25 33 33 33 CLIMATE,CLIMATE_REMOVE_NULL,RAW_CLIMATE,RAW_STATES,STATES,STATES_FILTER_US,STATE_CLIMATE_JO IN HASH_JOIN hdfs://10.204.30.125:9000/tmp/temp-204730737/tmp1776606203,
Input(s):
Successfully read 30587 records from: "hiddenbucket"
Successfully read 21027 records from: "hiddenbucket"
Output(s):
Successfully stored 0 records in: "hdfs://10.204.30.125:9000/tmp/temp-204730737/tmp1776606203"
Counters:
Total records written : 0
Total bytes written : 0
Spillable Memory Manager spill count : 0
Total bags proactively spilled: 0
Total records proactively spilled: 0
I have no idea why my this contains 0 results. My data extraction seems correct. and the job is successful. It leads me to believe that the join condition is never satisfied. I know the input files have some data that should satisfy the join condition, but it returns absolutely nothing.
The only thing that looks suspicious is a warning that states:
Encountered Warning ACCESSING_NON_EXISTENT_FIELD 26001 time(s).
I'm not exactly sure where to go from here. Since the job isn't failing, I can't see any errors or anything in debug.
I'm not sure if these mean anything, but here are other things that stand out:
When I try to illustrate STATE_CLIMATE_JOIN, I get a nullPointerException - ERROR 2997: Encountered IOException. Exception : null
When I try to illustrate STATES, I get java.lang.IndexOutOfBoundsException: Index: 1, Size: 1
Here is my full code:
--Piggy Bank Functions
register file:/home/hadoop/lib/pig/piggybank.jar
DEFINE EXTRACT org.apache.pig.piggybank.evaluation.string.EXTRACT();
--Load Climate Data
RAW_CLIMATE = LOAD 'hiddenbucket' USING TextLoader as (line:chararray);
RAW_STATES= LOAD 'hiddenbucket' USING TextLoader as (line:chararray);
CLIMATE=
FOREACH
RAW_CLIMATE
GENERATE
FLATTEN ((tuple(int,int,int,int,int,double))
EXTRACT(line,'^(\\d{6})\\s+(\\d{5})\\s+(\\d{4})(\\d{2})(\\d{2})\\s+(\\d{1,3}\\.\\d{1})')
)
AS (
station: int,
wban: int,
year: int,
month: int,
day: int,
temp: double
)
;
STATES=
FOREACH
RAW_STATES
GENERATE
FLATTEN ((tuple(int,int,chararray,chararray,chararray,chararray))
EXTRACT(line,'^(\\d{6})\\s+(\\d{5})\\s+(\\S+)\\s+(\\w{2})\\s+(\\w{2})\\s+(\\w{2})')
)
AS (
station: int,
wban: int,
name: chararray,
wmo: chararray,
fips: chararray,
state: chararray
)
;
CLIMATE_REMOVE_NULL = FILTER CLIMATE BY station IS NOT NULL;
STATES_FILTER_US = FILTER STATES BY (fips == 'US');
STATE_CLIMATE_JOIN = JOIN CLIMATE_REMOVE_NULL BY (station), STATES_FILTER_US BY (station);
Thanks in advance. I am at a loss here.
--EDIT--
I finally got it to work! My regular expression for parsing the STATE_DATA was invalid.