src/assets/img/flag.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 207.5" style="enable-background:new 0 0 300 207.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F15D5D;}
.st1{fill:#FFFFFF;}
.st2{fill:#338DC9;}
</style>
<defs>
<mask id="flagMask" maskUnits="userSpaceOnUse">
<g transform="translate(0 -300)">
<animateTransform attributeName="transform" type="translate" from="-300 0" to="0 0" dur="3s" begin="0s" repeatCount="indefinite"/>
<use xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wave"/>
</g>
</mask>
<g id="wave">
<path fill="white" d="M300,201.7c0,0,22,11.8,50,0c27.8-11.7,50,0,50,0s26.6,12,50,0s50,0,50,0s22.9,11.7,50.1,0c27.2-11.7,50,0,50,0
V5.7c0,0-28.2-11.7-50,0s-50,0-50,0s-25-12.7-50,0c-23.4,11.9-50,0-50,0s-23.1-12.2-50.1,0c-29.5,13.3-50,0-50,0l0,0
c-1.3-0.5-28.6-11.4-49.9,0c-21.8,11.7-50,0-50,0s-25-12.7-50,0c-23.4,11.9-50,0-50,0S76.9-6.5,50,5.7C20.5,19,0,5.7,0,5.7v196
c0,0,22,11.8,50,0c27.8-11.7,50,0,50,0s26.6,12,50,0s50,0,50,0s22.9,11.7,50.1,0C276.7,190.2,299.3,201.3,300,201.7L300,201.7z"/>
</g>
<g id="flag">
<rect class="st0" width="300" height="207.5"/>
<rect x="134.9" y="30.4" class="st1" width="165.1" height="27.9"/>
<rect x="134.9" y="90.7" class="st1" width="165.1" height="27.9"/>
<rect y="149.5" class="st1" width="300" height="27.9"/>
<rect class="st2" width="134.9" height="118.5"/>
</g>
</defs>
<use xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#flag" mask="url(#flagMask)"/>
</svg>