Efeito Imagens Transição

Eu tenho uma imagem em svg com o mesmo formato em diferentes cores. Elas são usadas para fazer a transição entre uma seção e outra de um site em desenvolvimento. Estou com problemas para fazer esse efeito de transição.

Deixei duas imagens em anexo, uma é a barra de transição (que na cor roxa é o mesmo formato) que eu tenho pra fazer o efeito e a outra é o efeito como deve ficar.

Eu tentei criando uma div pra cada imagem, sobrepondo uma e usando transform, mas não consegui fazer o efeito.

	Tentei inserindo a imagem direto com <img> mas também não consegui fazer ficar dessa forma. 

	Em todas as seções tem uma transição parecida com essa, com cores diferentes e com a barra algumas vezes invertida.