JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<svg viewBox="-20 -20 140 140" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="0">
	<symbol id="icon">
		<circle cx="50" cy="50" r="50" fill="none" stroke="currentColor" stroke-width="2" id="icon-outer" />
		<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-width="2" id="icon-inner" />
		<path d="M34.5,31 l0,38 l8,0 l0,-24 l15,24 l8,0 l0,-38 l-8,0 l0,24 l-15,-24 Z" fill="currentColor" id="icon-n" />
	</symbol>
	<g id="ukraine">
		<path fill="#044bbb" d="M-571-473H662v822H-571z" clip-path="url(#clip-a)" />
		<path fill="#ffc500" d="M-571 50H662v411H-571z" clip-path="url(#clip-a)" />
		<clipPath id="clip-a"><use href="#icon-n" overflow="visible"/></clipPath>
		<linearGradient>
			
		</linearGradient>
	</g>
</svg>

CSS

* {
	color: black;
}