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.

<svgversion="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g><pathid="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:

<svgversion="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g><pathid="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" /><animatexlink:href="#shape"attributeName="stroke-dasharray"from="0 304.4"to="304.4 0"begin="0s"dur="0.4s" /><animatexlink: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 :)

<svgversion="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g><pathid="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" /><animatexlink: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>