SVG > Animate Width From Middle

I got a logo in SVG that I want to animate. There is a middle part that will remain fixed but the sides strokes will actually expands and get around the whole thing. There is and e

Solution 1:

Assuming you aren't wedded to using rectangles to form the sides of your shape, then it becomes a much easier problem if you change your shape to using a single path with stroke width equivalent to your rectangle thickness.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g>
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76"
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" />
	</g>
</svg>

You can then implement your animation by animating the dash pattern of the line. Imagine your path length is 100. We want to start with a 0 length dash and then end with a dash of 100. At the same time, we animate the dash offset (where the dash pattern starts) from -50 (shifts the dash pattern to the centre of the line) to 0 (the start of the line).

For our line, the path length is actually 304.4. So the final animation becomes:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g>
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76"
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" />
		<animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 304.4" to="304.4 0" begin="0s" dur="0.4s" />
		<animate xlink:href="#shape" attributeName="stroke-dashoffset" from="-152.2" to="0" begin="0s" dur="0.4s" />
	</g>
</svg>

Aside: we could also achieve the same effect by just animating the dash pattern alone, but how this works takes longer to explain :)

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g>
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76"
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" />
	<animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 152.2 0 152.2" to="0 0 304.4 0" begin="0s" dur="0.4s" />
	</g>
</svg>