Having trouble moving/animating my svg logo in a particular way - html

Question

This is my svg logo for my website. I want each tag to be opened wider while having the center brush stand up straight. I have been playing around with translate properties but I am not getting anywhere. So to summarize...
id of Tag_R needs to move to right in the same distance as id of Tag_L so it looks like it is opening a mouth. At the same time, I want the brush (id of Brush) to stand straight by pointing up.
svg {
width:350px;
text-align:center;
display:block;
margin:auto;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 145"><defs><style>.cls-1{fill:black;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Logo"><g id="Logo_1" data-name="Logo 1"><path id="Tag_R" class="cls-1" d="M160.91,48.19h0a5.18,5.18,0,0,0,1.69,3.9l40.5,38.6L162.62,129a5.14,5.14,0,0,0-1.71,3.92v.72c0,4.1,4.12,6.38,6.91,3.82l46.5-42.73a5.18,5.18,0,0,0,0-7.64l-46.5-42.72C165,41.81,160.91,44.09,160.91,48.19Z"/><path id="Tag_L" class="cls-1" d="M55.09,48.53h0a5.2,5.2,0,0,1-1.69,3.91L12.9,91l40.48,38.3a5.16,5.16,0,0,1,1.71,3.92V134c0,4.1-4.12,6.38-6.91,3.82L1.68,95.07a5.17,5.17,0,0,1,0-7.63l46.5-42.73C51,42.15,55.09,44.43,55.09,48.53Z"/><g id="Brush"><path class="cls-1" d="M115,44.12c.7,9.7,12.05,11,19.74,10.59,5.76-.32-38.44,72.41-50.48,89.72-.94,1.36-2.22.09-1.7-1.68C89.13,120.48,114.38,35.67,115,44.12Z"/><path class="cls-1" d="M121.67,24.62c6.79-7.1,23.19-16,25.94-24.62,0,0,1.9,50.74-15.16,51.3C119.81,51.71,109.72,37.09,121.67,24.62Z"/></g><path id="Eye_R" class="cls-1" d="M147.68,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S152.42,75,147.68,75Zm0,13.6a4,4,0,1,1,3.56-4A3.79,3.79,0,0,1,147.68,88.61Z"/><path id="Eye_L" class="cls-1" d="M68.87,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S73.61,75,68.87,75Zm0,13.6a4,4,0,1,1,3.56-4A3.8,3.8,0,0,1,68.87,88.61Z"/></g></g></g></svg>

Answer 1

After translating you need to change the viewBox of your svg element for a bigger icon. In order to get it right you may use Logo.getBBox(). This will return an object with the new size of your Logo. I hope it helps.
Also you need to find the center of the brush in order to be able to set the rotation center.
svg {
width: 350px;
text-align: center;
display: block;
margin: 1em auto;
border: 1px solid;
overflow: visible;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-21 -7 257 160"><defs><style>.cls-1{fill:black;}</style></defs>
<g id="Logo">
<path id="Tag_R" class="cls-1" d="M160.91,48.19h0a5.18,5.18,0,0,0,1.69,3.9l40.5,38.6L162.62,129a5.14,5.14,0,0,0-1.71,3.92v.72c0,4.1,4.12,6.38,6.91,3.82l46.5-42.73a5.18,5.18,0,0,0,0-7.64l-46.5-42.72C165,41.81,160.91,44.09,160.91,48.19Z" transform="translate(0,0)">
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 20,0; 0,0"
begin="0s"
dur="2s"
repeatCount="indefinite" />
</path>
<path id="Tag_L" class="cls-1" d="M55.09,48.53h0a5.2,5.2,0,0,1-1.69,3.91L12.9,91l40.48,38.3a5.16,5.16,0,0,1,1.71,3.92V134c0,4.1-4.12,6.38-6.91,3.82L1.68,95.07a5.17,5.17,0,0,1,0-7.63l46.5-42.73C51,42.15,55.09,44.43,55.09,48.53Z" transform="translate(0,0)">
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; -20,0; 0,0"
begin="0s"
calcMode="linear"
dur="2s"
repeatCount="indefinite" />
</path>
<g id="Brush" >
<animateTransform
attributeType="XML"
attributeName="transform"
type="rotate"
values="0,115,71.5; -22,115,71.5; 0,115,71.5"
begin="0s"
calcMode="linear"
dur="2s"
repeatCount="indefinite" />
<path class="cls-1" d="M115,44.12c.7,9.7,12.05,11,19.74,10.59,5.76-.32-38.44,72.41-50.48,89.72-.94,1.36-2.22.09-1.7-1.68C89.13,120.48,114.38,35.67,115,44.12Z"/>
<path class="cls-1" d="M121.67,24.62c6.79-7.1,23.19-16,25.94-24.62,0,0,1.9,50.74-15.16,51.3C119.81,51.71,109.72,37.09,121.67,24.62Z"/>
</g>
<path id="Eye_R" class="cls-1" d="M147.68,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S152.42,75,147.68,75Zm0,13.6a4,4,0,1,1,3.56-4A3.79,3.79,0,0,1,147.68,88.61Z"/><path id="Eye_L" class="cls-1" d="M68.87,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S73.61,75,68.87,75Zm0,13.6a4,4,0,1,1,3.56-4A3.8,3.8,0,0,1,68.87,88.61Z"/>
<circle cx="115" cy="80" r="2" fill="red" />
</g></svg>