Svg symbol is not fully displaying in Firefox - firefox
My code is like this:
<div>
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 152 45" id="icon-google-play"><title>icon-google-play</title><defs><linearGradient x1="91.503%" y1="4.965%" x2="-38.331%" y2="71.904%" id="dxa"><stop stop-color="#00A0FF" offset="0%"/><stop stop-color="#00A1FF" offset=".66%"/><stop stop-color="#00BEFF" offset="26.01%"/><stop stop-color="#00D2FF" offset="51.22%"/><stop stop-color="#00DFFF" offset="76.04%"/><stop stop-color="#00E3FF" offset="100%"/></linearGradient><linearGradient x1="107.584%" y1="49.999%" x2="-130.469%" y2="49.999%" id="dxb"><stop stop-color="#FFE000" offset="0%"/><stop stop-color="#FFBD00" offset="40.87%"/><stop stop-color="#FFA500" offset="77.54%"/><stop stop-color="#FF9C00" offset="100%"/></linearGradient><linearGradient x1="86.247%" y1="17.846%" x2="-50.137%" y2="194.808%" id="dxc"><stop stop-color="#FF3A44" offset="0%"/><stop stop-color="#C31162" offset="100%"/></linearGradient><linearGradient x1="-18.81%" y1="-54.156%" x2="42.095%" y2="24.867%" id="dxd"><stop stop-color="#32A071" offset="0%"/><stop stop-color="#2DA771" offset="6.85%"/><stop stop-color="#15CF74" offset="47.62%"/><stop stop-color="#06E775" offset="80.09%"/><stop stop-color="#00F076" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M146.25 45H5.625C2.53 45 0 42.47 0 39.375V5.625C0 2.53 2.53 0 5.625 0H146.25c3.094 0 5.625 2.53 5.625 5.625v33.75c0 3.094-2.53 5.625-5.625 5.625z" fill="#000"/><path d="M146.25.9a4.73 4.73 0 0 1 4.725 4.725v33.75a4.73 4.73 0 0 1-4.725 4.725H5.625A4.73 4.73 0 0 1 .9 39.375V5.625A4.73 4.73 0 0 1 5.625.9H146.25zm0-.9H5.625C2.53 0 0 2.53 0 5.625v33.75C0 42.47 2.53 45 5.625 45H146.25c3.094 0 5.625-2.53 5.625-5.625V5.625c0-3.094-2.53-5.625-5.625-5.625z" fill="#A6A6A6"/><path d="M76.653 24.47c-2.646 0-4.803 2.013-4.803 4.786 0 2.755 2.157 4.784 4.803 4.784s4.803-2.03 4.803-4.784c0-2.773-2.157-4.785-4.803-4.785zm0 7.685c-1.45 0-2.7-1.196-2.7-2.9 0-1.723 1.25-2.9 2.7-2.9 1.45 0 2.7 1.177 2.7 2.9 0 1.704-1.25 2.9-2.7 2.9zM66.175 24.47c-2.646 0-4.803 2.013-4.803 4.786 0 2.755 2.157 4.784 4.803 4.784s4.802-2.03 4.802-4.784c0-2.773-2.155-4.785-4.802-4.785zm0 7.685c-1.45 0-2.7-1.196-2.7-2.9 0-1.723 1.25-2.9 2.7-2.9 1.45 0 2.7 1.177 2.7 2.9 0 1.704-1.25 2.9-2.7 2.9zM53.712 25.94v2.03h4.858c-.145 1.14-.526 1.974-1.106 2.555-.707.706-1.813 1.486-3.752 1.486-2.99 0-5.328-2.41-5.328-5.4s2.338-5.4 5.328-5.4c1.613-.002 2.79.633 3.66 1.45l1.433-1.433c-1.214-1.16-2.827-2.048-5.093-2.048-4.096 0-7.54 3.334-7.54 7.43s3.444 7.43 7.54 7.43c2.212 0 3.88-.724 5.184-2.084 1.34-1.34 1.758-3.227 1.758-4.75 0-.47-.036-.906-.11-1.268h-6.832zm50.97 1.575c-.397-1.07-1.612-3.044-4.095-3.044-2.465 0-4.512 1.94-4.512 4.786 0 2.682 2.03 4.784 4.75 4.784 2.19 0 3.46-1.34 3.986-2.12l-1.63-1.088c-.544.797-1.288 1.323-2.356 1.323-1.07 0-1.83-.49-2.32-1.45l6.398-2.646-.22-.545zM98.16 29.11c-.055-1.848 1.43-2.79 2.5-2.79.833 0 1.54.417 1.776 1.014l-4.278 1.776zm-5.202 4.64h2.102V19.686h-2.102V33.75zm-3.445-8.21h-.072c-.47-.562-1.376-1.07-2.518-1.07-2.393 0-4.585 2.103-4.585 4.803 0 2.68 2.192 4.766 4.585 4.766 1.142 0 2.047-.508 2.52-1.09h.07v.69c0 1.83-.978 2.81-2.555 2.81-1.287 0-2.085-.926-2.41-1.704l-1.83.76c.524 1.27 1.92 2.828 4.24 2.828 2.465 0 4.55-1.45 4.55-4.983v-8.59h-1.994v.78zm-2.41 6.615c-1.45 0-2.664-1.214-2.664-2.883 0-1.685 1.213-2.918 2.663-2.918 1.432 0 2.556 1.233 2.556 2.92-.002 1.667-1.125 2.88-2.557 2.88zm27.43-12.47h-5.03V33.75h2.097v-5.328h2.932c2.326 0 4.613-1.684 4.613-4.367s-2.287-4.37-4.613-4.37zm.053 6.78H111.6v-4.82h2.986c1.57 0 2.46 1.298 2.46 2.41 0 1.09-.89 2.41-2.46 2.41zm12.973-2.02c-1.52 0-3.094.67-3.746 2.153l1.864.78c.398-.78 1.14-1.033 1.918-1.033 1.086 0 2.19.652 2.208 1.81v.144c-.38-.218-1.195-.544-2.19-.544-2.008 0-4.053 1.104-4.053 3.167 0 1.882 1.648 3.094 3.493 3.094 1.412 0 2.19-.634 2.678-1.375h.073v1.085h2.026v-5.392c0-2.497-1.864-3.89-4.27-3.89zm-.254 7.708c-.687 0-1.647-.345-1.647-1.195 0-1.086 1.194-1.502 2.224-1.502.923 0 1.357.2 1.92.47a2.545 2.545 0 0 1-2.498 2.227zm11.905-7.4l-2.406 6.097h-.072l-2.496-6.098h-2.26l3.744 8.522-2.135 4.74h2.19l5.77-13.262h-2.334zm-18.907 8.997h2.1V19.686h-2.1V33.75z" fill="#FFF"/><g transform="translate(10.125 7.875)"><path d="M1.614.605c-.327.347-.52.885-.52 1.58v24.88c0 .7.193 1.235.52 1.582l.084.08L15.635 14.79v-.328L1.698.522l-.084.083z" fill="url(#dxa)"/><path d="M20.282 19.438l-4.646-4.648v-.328l4.647-4.646.104.06 5.505 3.127c1.573.893 1.573 2.354 0 3.25l-5.505 3.126-.105.058z" fill="url(#dxb)"/><path d="M20.387 19.378l-4.752-4.752-14.02 14.02c.518.55 1.373.617 2.337.07l16.435-9.338" fill="url(#dxc)"/><path d="M20.387 9.874L3.953.537C2.99-.01 2.133.057 1.616.605l14.02 14.02 4.75-4.75z" fill="url(#dxd)"/><g transform="translate(0 19.125)" fill="#000"><path d="M20.283.148L3.953 9.427c-.913.52-1.73.485-2.254.013l-.086.083.084.08c.524.474 1.34.508 2.254-.01L20.386.252 20.283.15z" opacity=".2"/><path d="M1.614 9.358c-.327-.347-.52-.885-.52-1.58v.163c0 .698.193 1.235.52 1.582l.085-.084-.086-.08z" opacity=".12"/></g><path d="M25.892 16.086l-5.61 3.188.105.104 5.505-3.127c.786-.446 1.18-1.034 1.18-1.623-.067.532-.468 1.054-1.18 1.46z" opacity=".12" fill="#000"/><path d="M3.953.7l21.94 12.466c.712.405 1.11.927 1.178 1.46 0-.588-.392-1.178-1.178-1.624L3.952.537c-1.57-.894-2.857-.152-2.857 1.65v.164C1.095.55 2.38-.19 3.953.7z" opacity=".25" fill="#FFF"/></g><g transform="translate(46.125 6.75)" fill="#FFF"><path d="M6.56 1.012H1.83v3.452c.01 1.156-.254 1.987-.788 2.47h-.73V9.42h1.055V7.988h4.895V9.42h1.055V6.932h-.754v-5.92H6.56zM5.47 2.067v4.865H2.372c.376-.648.562-1.478.55-2.47V2.067h2.546zM11.49.862c-1.013 0-1.873.355-2.554 1.057-.68.7-1.026 1.566-1.026 2.58s.345 1.88 1.026 2.58c.68.702 1.54 1.057 2.555 1.057 1.014 0 1.875-.355 2.557-1.056.68-.7 1.026-1.57 1.026-2.58 0-1.007-.347-1.873-1.03-2.577-.686-.705-1.545-1.06-2.552-1.06zM13.963 4.5c0 .75-.24 1.376-.717 1.86a2.375 2.375 0 0 1-1.754.724 2.38 2.38 0 0 1-1.753-.725c-.476-.484-.717-1.11-.717-1.86 0-.752.24-1.376.717-1.858a2.38 2.38 0 0 1 1.754-.726c.69 0 1.28.244 1.755.726.477.482.717 1.108.717 1.858zM21.317 6.14c-.547.626-1.218.943-1.99.943-.703 0-1.302-.24-1.784-.712-.48-.47-.725-1.1-.725-1.87s.244-1.4.725-1.87c.482-.473 1.08-.713 1.783-.713.753 0 1.355.274 1.788.816l.078.096.77-.745-.07-.08C21.236 1.246 20.373.86 19.325.86c-1.02 0-1.886.35-2.578 1.042-.69.69-1.042 1.563-1.042 2.596 0 1.033.35 1.907 1.042 2.596.69.69 1.558 1.042 2.578 1.042.562 0 1.088-.113 1.565-.335.478-.222.882-.53 1.2-.91l.067-.08-.76-.76-.08.088zM22.646 2.067h1.886v5.92h1.092v-5.92h1.886V1.012h-4.864v1.055zM30.683 4.756l-1.61-3.744h-1.268l2.324 5.1-.225.492c-.087.188-.177.318-.27.383-.09.064-.225.097-.402.097a.785.785 0 0 1-.397-.108l-.125-.07-.29 1.034.09.038c.253.106.492.16.714.16.743 0 1.306-.428 1.676-1.272l2.626-5.853H32.26l-1.577 3.744zM34.222 7.987h1.092v-5.92h2.924v5.92h1.092V1.013h-5.108v6.974zM44.893 3.906h-3.15V1.012h-1.09v6.975h1.09V4.942h3.15v3.045h1.093V1.013h-1.093v2.893zM50.464.862c-1.014 0-1.873.355-2.555 1.057-.68.7-1.026 1.566-1.026 2.58s.346 1.88 1.026 2.58c.68.702 1.54 1.057 2.555 1.057 1.015 0 1.874-.355 2.555-1.056.68-.7 1.026-1.57 1.026-2.58 0-1.007-.346-1.873-1.03-2.577-.685-.705-1.544-1.06-2.552-1.06zm0 6.22a2.383 2.383 0 0 1-1.754-.725c-.476-.482-.718-1.107-.718-1.858 0-.753.242-1.377.718-1.86a2.38 2.38 0 0 1 1.754-.725c.69 0 1.28.244 1.754.725.477.484.72 1.11.72 1.86s-.243 1.376-.72 1.86a2.376 2.376 0 0 1-1.754.723zM61.868 4.922a1.813 1.813 0 0 0-.68-.546c.212-.128.39-.296.53-.5.178-.262.268-.57.268-.913 0-.558-.208-1.028-.616-1.398a2.104 2.104 0 0 0-1.448-.552h-2.554v6.974h2.686c.58 0 1.09-.193 1.513-.575.43-.385.645-.877.645-1.46 0-.388-.115-.734-.344-1.03zm-1.242-1.304c-.175.194-.406.288-.704.288H58.46v-1.84h1.5c.284 0 .503.094.675.284.175.194.26.4.26.632 0 .23-.09.44-.27.636zm.476 2.314c0 .25-.092.476-.282.69a.92.92 0 0 1-.727.31H58.46v-1.99h1.595c.316 0 .563.1.757.307.195.21.29.434.29.682z"/></g></g></symbol></svg>
</div>
<svg class="icon-google-play" role="img">
<use xlink:href="#icon-google-play"/>
</svg>
Fiddle: https://jsfiddle.net/qhsphtfs/
Expected: http://joxi.ru/Dr83MQlTYBMEA6
Actual: http://joxi.ru/LmGyMklS56lGAl
In Google Chrome, Safari works good (green icon on left is displayed), but in Firefox it's not work. What's problem?
Firefox does not support linearGradients within a symbol tag. The workaround is simple though, move the gradients outside the symbol tag.
<div>
<svg><defs><linearGradient x1="91.503%" y1="4.965%" x2="-38.331%" y2="71.904%" id="dxa"><stop stop-color="#00A0FF" offset="0%"/><stop stop-color="#00A1FF" offset=".66%"/><stop stop-color="#00BEFF" offset="26.01%"/><stop stop-color="#00D2FF" offset="51.22%"/><stop stop-color="#00DFFF" offset="76.04%"/><stop stop-color="#00E3FF" offset="100%"/></linearGradient><linearGradient x1="107.584%" y1="49.999%" x2="-130.469%" y2="49.999%" id="dxb"><stop stop-color="#FFE000" offset="0%"/><stop stop-color="#FFBD00" offset="40.87%"/><stop stop-color="#FFA500" offset="77.54%"/><stop stop-color="#FF9C00" offset="100%"/></linearGradient><linearGradient x1="86.247%" y1="17.846%" x2="-50.137%" y2="194.808%" id="dxc"><stop stop-color="#FF3A44" offset="0%"/><stop stop-color="#C31162" offset="100%"/></linearGradient><linearGradient x1="-18.81%" y1="-54.156%" x2="42.095%" y2="24.867%" id="dxd"><stop stop-color="#32A071" offset="0%"/><stop stop-color="#2DA771" offset="6.85%"/><stop stop-color="#15CF74" offset="47.62%"/><stop stop-color="#06E775" offset="80.09%"/><stop stop-color="#00F076" offset="100%"/></linearGradient></defs><symbol viewBox="0 0 152 45" id="icon-google-play"><title>icon-google-play</title><g fill="none" fill-rule="evenodd"><path d="M146.25 45H5.625C2.53 45 0 42.47 0 39.375V5.625C0 2.53 2.53 0 5.625 0H146.25c3.094 0 5.625 2.53 5.625 5.625v33.75c0 3.094-2.53 5.625-5.625 5.625z" fill="#000"/><path d="M146.25.9a4.73 4.73 0 0 1 4.725 4.725v33.75a4.73 4.73 0 0 1-4.725 4.725H5.625A4.73 4.73 0 0 1 .9 39.375V5.625A4.73 4.73 0 0 1 5.625.9H146.25zm0-.9H5.625C2.53 0 0 2.53 0 5.625v33.75C0 42.47 2.53 45 5.625 45H146.25c3.094 0 5.625-2.53 5.625-5.625V5.625c0-3.094-2.53-5.625-5.625-5.625z" fill="#A6A6A6"/><path d="M76.653 24.47c-2.646 0-4.803 2.013-4.803 4.786 0 2.755 2.157 4.784 4.803 4.784s4.803-2.03 4.803-4.784c0-2.773-2.157-4.785-4.803-4.785zm0 7.685c-1.45 0-2.7-1.196-2.7-2.9 0-1.723 1.25-2.9 2.7-2.9 1.45 0 2.7 1.177 2.7 2.9 0 1.704-1.25 2.9-2.7 2.9zM66.175 24.47c-2.646 0-4.803 2.013-4.803 4.786 0 2.755 2.157 4.784 4.803 4.784s4.802-2.03 4.802-4.784c0-2.773-2.155-4.785-4.802-4.785zm0 7.685c-1.45 0-2.7-1.196-2.7-2.9 0-1.723 1.25-2.9 2.7-2.9 1.45 0 2.7 1.177 2.7 2.9 0 1.704-1.25 2.9-2.7 2.9zM53.712 25.94v2.03h4.858c-.145 1.14-.526 1.974-1.106 2.555-.707.706-1.813 1.486-3.752 1.486-2.99 0-5.328-2.41-5.328-5.4s2.338-5.4 5.328-5.4c1.613-.002 2.79.633 3.66 1.45l1.433-1.433c-1.214-1.16-2.827-2.048-5.093-2.048-4.096 0-7.54 3.334-7.54 7.43s3.444 7.43 7.54 7.43c2.212 0 3.88-.724 5.184-2.084 1.34-1.34 1.758-3.227 1.758-4.75 0-.47-.036-.906-.11-1.268h-6.832zm50.97 1.575c-.397-1.07-1.612-3.044-4.095-3.044-2.465 0-4.512 1.94-4.512 4.786 0 2.682 2.03 4.784 4.75 4.784 2.19 0 3.46-1.34 3.986-2.12l-1.63-1.088c-.544.797-1.288 1.323-2.356 1.323-1.07 0-1.83-.49-2.32-1.45l6.398-2.646-.22-.545zM98.16 29.11c-.055-1.848 1.43-2.79 2.5-2.79.833 0 1.54.417 1.776 1.014l-4.278 1.776zm-5.202 4.64h2.102V19.686h-2.102V33.75zm-3.445-8.21h-.072c-.47-.562-1.376-1.07-2.518-1.07-2.393 0-4.585 2.103-4.585 4.803 0 2.68 2.192 4.766 4.585 4.766 1.142 0 2.047-.508 2.52-1.09h.07v.69c0 1.83-.978 2.81-2.555 2.81-1.287 0-2.085-.926-2.41-1.704l-1.83.76c.524 1.27 1.92 2.828 4.24 2.828 2.465 0 4.55-1.45 4.55-4.983v-8.59h-1.994v.78zm-2.41 6.615c-1.45 0-2.664-1.214-2.664-2.883 0-1.685 1.213-2.918 2.663-2.918 1.432 0 2.556 1.233 2.556 2.92-.002 1.667-1.125 2.88-2.557 2.88zm27.43-12.47h-5.03V33.75h2.097v-5.328h2.932c2.326 0 4.613-1.684 4.613-4.367s-2.287-4.37-4.613-4.37zm.053 6.78H111.6v-4.82h2.986c1.57 0 2.46 1.298 2.46 2.41 0 1.09-.89 2.41-2.46 2.41zm12.973-2.02c-1.52 0-3.094.67-3.746 2.153l1.864.78c.398-.78 1.14-1.033 1.918-1.033 1.086 0 2.19.652 2.208 1.81v.144c-.38-.218-1.195-.544-2.19-.544-2.008 0-4.053 1.104-4.053 3.167 0 1.882 1.648 3.094 3.493 3.094 1.412 0 2.19-.634 2.678-1.375h.073v1.085h2.026v-5.392c0-2.497-1.864-3.89-4.27-3.89zm-.254 7.708c-.687 0-1.647-.345-1.647-1.195 0-1.086 1.194-1.502 2.224-1.502.923 0 1.357.2 1.92.47a2.545 2.545 0 0 1-2.498 2.227zm11.905-7.4l-2.406 6.097h-.072l-2.496-6.098h-2.26l3.744 8.522-2.135 4.74h2.19l5.77-13.262h-2.334zm-18.907 8.997h2.1V19.686h-2.1V33.75z" fill="#FFF"/><g transform="translate(10.125 7.875)"><path d="M1.614.605c-.327.347-.52.885-.52 1.58v24.88c0 .7.193 1.235.52 1.582l.084.08L15.635 14.79v-.328L1.698.522l-.084.083z" fill="url(#dxa)"/><path d="M20.282 19.438l-4.646-4.648v-.328l4.647-4.646.104.06 5.505 3.127c1.573.893 1.573 2.354 0 3.25l-5.505 3.126-.105.058z" fill="url(#dxb)"/><path d="M20.387 19.378l-4.752-4.752-14.02 14.02c.518.55 1.373.617 2.337.07l16.435-9.338" fill="url(#dxc)"/><path d="M20.387 9.874L3.953.537C2.99-.01 2.133.057 1.616.605l14.02 14.02 4.75-4.75z" fill="url(#dxd)"/><g transform="translate(0 19.125)" fill="#000"><path d="M20.283.148L3.953 9.427c-.913.52-1.73.485-2.254.013l-.086.083.084.08c.524.474 1.34.508 2.254-.01L20.386.252 20.283.15z" opacity=".2"/><path d="M1.614 9.358c-.327-.347-.52-.885-.52-1.58v.163c0 .698.193 1.235.52 1.582l.085-.084-.086-.08z" opacity=".12"/></g><path d="M25.892 16.086l-5.61 3.188.105.104 5.505-3.127c.786-.446 1.18-1.034 1.18-1.623-.067.532-.468 1.054-1.18 1.46z" opacity=".12" fill="#000"/><path d="M3.953.7l21.94 12.466c.712.405 1.11.927 1.178 1.46 0-.588-.392-1.178-1.178-1.624L3.952.537c-1.57-.894-2.857-.152-2.857 1.65v.164C1.095.55 2.38-.19 3.953.7z" opacity=".25" fill="#FFF"/></g><g transform="translate(46.125 6.75)" fill="#FFF"><path d="M6.56 1.012H1.83v3.452c.01 1.156-.254 1.987-.788 2.47h-.73V9.42h1.055V7.988h4.895V9.42h1.055V6.932h-.754v-5.92H6.56zM5.47 2.067v4.865H2.372c.376-.648.562-1.478.55-2.47V2.067h2.546zM11.49.862c-1.013 0-1.873.355-2.554 1.057-.68.7-1.026 1.566-1.026 2.58s.345 1.88 1.026 2.58c.68.702 1.54 1.057 2.555 1.057 1.014 0 1.875-.355 2.557-1.056.68-.7 1.026-1.57 1.026-2.58 0-1.007-.347-1.873-1.03-2.577-.686-.705-1.545-1.06-2.552-1.06zM13.963 4.5c0 .75-.24 1.376-.717 1.86a2.375 2.375 0 0 1-1.754.724 2.38 2.38 0 0 1-1.753-.725c-.476-.484-.717-1.11-.717-1.86 0-.752.24-1.376.717-1.858a2.38 2.38 0 0 1 1.754-.726c.69 0 1.28.244 1.755.726.477.482.717 1.108.717 1.858zM21.317 6.14c-.547.626-1.218.943-1.99.943-.703 0-1.302-.24-1.784-.712-.48-.47-.725-1.1-.725-1.87s.244-1.4.725-1.87c.482-.473 1.08-.713 1.783-.713.753 0 1.355.274 1.788.816l.078.096.77-.745-.07-.08C21.236 1.246 20.373.86 19.325.86c-1.02 0-1.886.35-2.578 1.042-.69.69-1.042 1.563-1.042 2.596 0 1.033.35 1.907 1.042 2.596.69.69 1.558 1.042 2.578 1.042.562 0 1.088-.113 1.565-.335.478-.222.882-.53 1.2-.91l.067-.08-.76-.76-.08.088zM22.646 2.067h1.886v5.92h1.092v-5.92h1.886V1.012h-4.864v1.055zM30.683 4.756l-1.61-3.744h-1.268l2.324 5.1-.225.492c-.087.188-.177.318-.27.383-.09.064-.225.097-.402.097a.785.785 0 0 1-.397-.108l-.125-.07-.29 1.034.09.038c.253.106.492.16.714.16.743 0 1.306-.428 1.676-1.272l2.626-5.853H32.26l-1.577 3.744zM34.222 7.987h1.092v-5.92h2.924v5.92h1.092V1.013h-5.108v6.974zM44.893 3.906h-3.15V1.012h-1.09v6.975h1.09V4.942h3.15v3.045h1.093V1.013h-1.093v2.893zM50.464.862c-1.014 0-1.873.355-2.555 1.057-.68.7-1.026 1.566-1.026 2.58s.346 1.88 1.026 2.58c.68.702 1.54 1.057 2.555 1.057 1.015 0 1.874-.355 2.555-1.056.68-.7 1.026-1.57 1.026-2.58 0-1.007-.346-1.873-1.03-2.577-.685-.705-1.544-1.06-2.552-1.06zm0 6.22a2.383 2.383 0 0 1-1.754-.725c-.476-.482-.718-1.107-.718-1.858 0-.753.242-1.377.718-1.86a2.38 2.38 0 0 1 1.754-.725c.69 0 1.28.244 1.754.725.477.484.72 1.11.72 1.86s-.243 1.376-.72 1.86a2.376 2.376 0 0 1-1.754.723zM61.868 4.922a1.813 1.813 0 0 0-.68-.546c.212-.128.39-.296.53-.5.178-.262.268-.57.268-.913 0-.558-.208-1.028-.616-1.398a2.104 2.104 0 0 0-1.448-.552h-2.554v6.974h2.686c.58 0 1.09-.193 1.513-.575.43-.385.645-.877.645-1.46 0-.388-.115-.734-.344-1.03zm-1.242-1.304c-.175.194-.406.288-.704.288H58.46v-1.84h1.5c.284 0 .503.094.675.284.175.194.26.4.26.632 0 .23-.09.44-.27.636zm.476 2.314c0 .25-.092.476-.282.69a.92.92 0 0 1-.727.31H58.46v-1.99h1.595c.316 0 .563.1.757.307.195.21.29.434.29.682z"/></g></g></symbol></svg>
</div>
<svg class="icon-google-play" role="img">
<use xlink:href="#icon-google-play"/>
</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>
Strip down SVG to one part of it
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>
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>
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
Opening a positron emission tomography (PET) DICOM image in MatLab and interpreting the pixel values correctly?
I'm new to processing DICOM images away from their native manufacturer software. I am trying to dicomread a PET image from a set of reconstructed transaxial slices into MatLab. My aim is to do some simple segmentation and finally determine the maximum and minimum pixel value in the segment. However I am having trouble with converting the stored values to their values seen on the native system. The image is loading into MatLab as an int16 class. The maximum pixel value is always 32767, regardless of which slice I load from the series. I know from viewing the images on their native system that the maximum pixel value in each slice is different. I've checked the rescale value and rescale intercept values and the rescale relationship appears to be linear. Is there another correction I should be making? I assume all other corrections (e.g. decay, scatter and randoms) are made during the reconstruction process. Any help would be appreciated (hopefully I'm missing something simple!).I've posted the DICOM info retrieved from the header below (Don't worry, the images are of a phantom so there is no patient identifying data). Regards, Ross Filename: [1x76 char] FileModDate: '26-Jul-2013 10:50:42' FileSize: 38356 Format: 'DICOM' FormatVersion: 3 Width: 128 Height: 128 BitDepth: 16 ColorType: 'grayscale' FileMetaInformationGroupLength: 182 FileMetaInformationVersion: [2x1 uint8] MediaStorageSOPClassUID: '1.2.840.10008.5.1.4.1.1.128' MediaStorageSOPInstanceUID: [1x49 char] TransferSyntaxUID: '1.2.840.10008.1.2.1' ImplementationClassUID: '1.2.840.113619.6.55' SourceApplicationEntityTitle: 'dst01' IdentifyingGroupLength: 484 SpecificCharacterSet: 'ISO_IR 100' ImageType: 'ORIGINAL\PRIMARY' InstanceCreationDate: '20130522' InstanceCreationTime: '171655' InstanceCreatorUID: '1.2.840.113619.1.131' SOPClassUID: '1.2.840.10008.5.1.4.1.1.128' SOPInstanceUID: [1x49 char] StudyDate: '20130514' SeriesDate: '20130514' AcquisitionDate: '20130514' ContentDate: '20130522' StudyTime: '142911' SeriesTime: '143208.00' AcquisitionTime: '143208.00' ContentTime: '171655' AccessionNumber: '' Modality: 'PT' Manufacturer: 'GE MEDICAL SYSTEMS' InstitutionName: 'NHS TRUST' ReferringPhysicianName: [1x1 struct] StationName: 'dst01' StudyDescription: '' SeriesDescription: 'WB_3D_VuePoint' PhysicianReadingStudy: [1x1 struct] OperatorName: [1x1 struct] ManufacturerModelName: 'Discovery STE' Private_0009_GroupLength: 2714 Private_0009_10xx_Creator: 'GEMS_PETD_01' Private_0009_11xx_Creator: 'GEMS_GENIE_1' Private_0009_1002: 'SOLID_TEST' Private_0009_1005: '20130514143030.00' Private_0009_1006: 0 Private_0009_100a: [1x45 char] Private_0009_100d: '20130514143208.00' Private_0009_100e: '20130514143055.00' Private_0009_1013: [1x59 char] Private_0009_1014: 'Sternal Notch' Private_0009_1015: 'SN' Private_0009_1016: 0 Private_0009_1017: 0 Private_0009_1018: 0 Private_0009_1019: 0 Private_0009_101a: 1 Private_0009_101b: 0 Private_0009_101c: 1 Private_0009_101d: 0 Private_0009_101e: 1 Private_0009_101f: 1 Private_0009_1020: 0 Private_0009_1021: 1 Private_0009_1022: 0 Private_0009_1023: 0 Private_0009_1024: 2 Private_0009_1025: 2 Private_0009_1026: 23 Private_0009_1027: 1 Private_0009_1028: 1 Private_0009_1029: 0 Private_0009_102a: 0 Private_0009_102b: 70 Private_0009_102c: 153 Private_0009_102d: 0 Private_0009_102e: 0 Private_0009_1034: 0 Private_0009_1035: 0 Private_0009_1036: 'FDG -- fluorodeoxyglucose' Private_0009_1037: '' Private_0009_1038: 0 Private_0009_1039: '' Private_0009_103a: 0 Private_0009_103b: '' Private_0009_103c: 0 Private_0009_103d: '' Private_0009_103e: '18F' Private_0009_103f: 6588 Private_0009_1040: 0.9700 Private_0009_104d: 0 Private_0009_104e: 23 Private_0009_104f: 23 Private_0009_1050: 7 Private_0009_1051: 7 Private_0009_1052: 32 Private_0009_1053: 800 Private_0009_1054: 650 Private_0009_1055: 425 Private_0009_1056: [1x49 char] Private_0009_1057: [1x48 char] Private_0009_1059: [1x49 char] Private_0009_105a: 0 Private_0009_105c: [1x49 char] Private_0009_105d: [1x45 char] Private_0009_105e: [1x51 char] Private_0009_105f: 'SOLID_TEST' Private_0009_1062: [1x44 char] Private_0009_1063: 0 Private_0009_1064: 0 Private_0009_1066: 119.5000 Private_0009_1067: -79.8540 Private_0009_1068: '20130514143123.00' Private_0009_1069: 553 Private_0009_106a: -79.9000 Private_0009_106b: 0 Private_0009_106c: '20130514143208.00' Private_0009_106d: 180 Private_0009_1070: 0 Private_0009_1071: 90674329 Private_0009_1072: 0 Private_0009_1073: 1 Private_0009_1074: 255 Private_0009_107c: 0 Private_0009_107d: 2 Private_0009_107e: 0 Private_0009_107f: 0 Private_0009_1080: 0 Private_0009_1081: 0 Private_0009_108b: 5 Private_0009_108c: 2 Private_0009_108d: 0.0960 Private_0009_108e: 0 Private_0009_108f: 0 Private_0009_1090: 0 Private_0009_1091: 0 Private_0009_1092: 0 Private_0009_1093: 0 Private_0009_1094: 0 Private_0009_1095: 0 Private_0009_1096: [1x49 char] Private_0009_1097: [1x51 char] Private_0009_1098: [1x49 char] Private_0009_1099: '' Private_0009_109a: 0 Private_0009_109b: 0 Private_0009_109c: '' Private_0009_109d: 0 Private_0009_109e: 0 Private_0009_109f: 0 Private_0009_10a0: 0 Private_0009_10a1: 0 Private_0009_10a2: 0 Private_0009_10a3: 0 Private_0009_10a6: 26 Private_0009_10a7: 0 Private_0009_10ab: 0 Private_0009_10ac: 0 Private_0009_10ad: '' Private_0009_10ae: '' Private_0009_10b2: 2 Private_0009_10b3: 20 Private_0009_10b4: 70 Private_0009_10b5: 0 Private_0009_10b6: 0 Private_0009_10b7: 0 Private_0009_10b8: 0 Private_0009_10b9: 0 Private_0009_10ba: 1 Private_0009_10bb: 6 Private_0009_10bc: 0 Private_0009_10bd: 0 Private_0009_10be: 0 Private_0009_10bf: 0 Private_0009_10c0: 0 Private_0009_10c1: 0 Private_0009_10c2: 0 Private_0009_10c3: 0 Private_0009_10c4: 6 Private_0009_10c5: 0 Private_0009_10c6: 0 Private_0009_10c7: 0 Private_0009_10cb: 0.8601 Private_0009_10cc: 0.1256 Private_0009_10cd: 0.8240 Private_0009_10ce: -0.0254 Private_0009_10cf: 0.5000 Private_0009_10d0: -0.0483 Private_0009_10d5: 0 Private_0009_10d6: 70.5000 Private_0009_10d7: -79.9000 Private_0009_10d8: 1 Private_0009_10db: 3 Private_0009_10dc: 2 Private_0009_10df: 47 Private_0009_10e2: 10 Private_0009_10e4: '3D_AC' Private_0009_10e5: 0 Private_0009_10e6: 0 Private_0009_10e7: 0 Private_0009_10e9: 0 Private_0009_10ea: 0 Private_0009_10eb: 0 Private_0009_10ec: 0 Private_0009_111e: [1x49 char] Private_0009_1146: [1x49 char] PatientGroupLength: 96 PatientName: [1x1 struct] PatientID: 'SOLID_TEST' PatientBirthDate: '' PatientSex: '' PatientAge: '' PatientSize: 0 PatientWeight: 0 EthnicGroup: '' AdditionalPatientHistory: '' Private_0017_GroupLength: 46 Private_0017_10xx_Creator: 'GEMS_PETD_01' Private_0017_1004: '20130207140047.00' AcquisitionGroupLength: 230 SliceThickness: 3.2700 AcquisitionTerminationCondition: 'TIME' AcquisitionStartCondition: 'MANU' AcquisitionStartConditionData: 0 AcquisitionTerminationConditionData: 0 SoftwareVersion: '41.04' ProtocolName: 'WB 3D' TriggerTime: 0 FrameTime: 0 IntervalsAcquired: 0 IntervalsRejected: 0 ReconstructionDiameter: 700 GantryDetectorTilt: 0 FieldOfViewShape: 'CYLINDRICAL RING' FieldOfViewDimensions: [2x1 double] CollimatorType: 'NONE' ActualFrameDuration: 180000 PatientPosition: 'HFS' Private_0019_GroupLength: 42 Private_0019_10xx_Creator: 'GEMS_PETD_01' Private_0019_1004: '20130207140602' RelationshipGroupLength: 322 StudyInstanceUID: [1x51 char] SeriesInstanceUID: [1x49 char] StudyID: '6893' SeriesNumber: 401 InstanceNumber: 22 ImagePositionPatient: [3x1 double] ImageOrientationPatient: [6x1 double] FrameOfReferenceUID: [1x59 char] PositionReferenceIndicator: 'SN' SliceLocation: 1.8500 ImagePresentationGroupLength: 218 SamplesPerPixel: 1 PhotometricInterpretation: 'MONOCHROME2' Rows: 128 Columns: 128 PixelSpacing: [2x1 double] CorrectedImage: [1x40 char] BitsAllocated: 16 BitsStored: 16 HighBit: 15 PixelRepresentation: 1 SmallestImagePixelValue: 0 LargestImagePixelValue: 32767 RescaleIntercept: 0 RescaleSlope: 0.3555 LossyImageCompression: '00' Unknown_0040_0000: 158 AcquisitionContextSequence: [1x1 struct] NuclearAcquisitionGroupLength: 808 EnergyWindowRangeSequence: [1x1 struct] RadiopharmaceuticalInformationSequence: [1x1 struct] NumberOfSlices: 47 TypeOfDetectorMotion: 'NONE' PatientOrientationCodeSequence: [1x1 struct] PatientOrientationModifierCodeSequence: [1x1 struct] PatientGantryRelationshipCodeSequence: [1x1 struct] SeriesType: 'STATIC\IMAGE' Units: 'BQML' CountsSource: 'EMISSION' RandomsCorrectionMethod: 'SING' AttenuationCorrectionMethod: 'measured,, 0.096000 cm-1,' DecayCorrection: 'START' ReconstructionMethod: '3D IR' DetectorLinesOfResponseUsed: '0' ScatterCorrectionMethod: 'Model Based' AxialMash: [2x1 double] TransverseMash: 2 CoincidenceWindowWidth: 0 FrameReferenceTime: 0 PrimaryPromptsCountsAccumulated: 0 SecondaryCountsAccumulated: 0 SliceSensitivityFactor: 1 DecayFactor: 1.0095 DoseCalibrationFactor: 1139 ScatterFractionFactor: 0.3174 DeadTimeFactor: 1.1243 ImageIndex: 26 PixelDataGroupLength: 32780
I work in mammo and have no experience of PET so take what I say here with a pinch of salt. The maximum pixel value is 32767 which is 2 to the power of 15 minus 1. Is the rescale slope not of importance? RescaleSlope: 0.3555 Presumably this can vary for each slice and the pixel values should be multiplied by this value (intercept should be added too but this is zero).
Out of the major scanner manufacturers (Siemens, GE, Philips) I have only encountered a slice-by-slice RescaleSlope value when working with GE PET cameras. However, it is always a good idea to check RescaleSlope and RescaleIntercept. The QIBA working group on FDG-PET has a collection of recommendations and also pseudocode for SUV calculations straight from the DICOM data.