CSS_layout_inverse.svg

<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" width="897" height="526">

<text transform="matrix(1 0 0 1 4 130.0234)" fill="#FFFFFF" font-family="'Lato-Black'" font-size="72">Layout</text>
<text transform="matrix(1 0 0 1 0 61.4697)" fill="#FFFFFF" font-family="'Lato-Light'" font-size="72">CSS</text>
<rect x="225.413" y="480.648" fill="#EB5B8C" width="122.555" height="35.075"/>
<text transform="matrix(1 0 0 1 250.519 507.6855)" fill="#FFFFFF" font-family="'Lato-Regular'" font-size="28.1163">frame</text>
<rect x="347.346" y="368.988" fill="#EB5B8C" width="122.554" height="35.076"/>
<text transform="matrix(1 0 0 1 377.4292 396.0254)" fill="#FFFFFF" font-family="'Lato-Regular'" font-size="28.1163">table</text>
<rect x="469.279" y="257.327" fill="#EB5B8C" width="122.555" height="35.076"/>
<text transform="matrix(1 0 0 1 511.9023 284.3643)" fill="#FFFFFF" font-family="'Lato-Regular'" font-size="28.1163">div</text>
<rect x="591.212" y="145.666" fill="#EB5B8C" width="122.555" height="35.076"/>
<text transform="matrix(1 0 0 1 607.7705 172.7041)" fill="#FFFFFF" font-family="'Lato-Regular'" font-size="28.1163">flexbox</text>
<rect x="713.146" y="34.005" fill="#EB5B8C" width="122.555" height="35.076"/>
<text transform="matrix(1 0 0 1 750.1162 61.0361)" fill="#FFFFFF" font-family="'Lato-Regular'" font-size="28.1163">grid</text>
<path fill="#C6C6C6" d="M295.968,453.812c-2.904-17.886-11.468-34.65-11.957-52.935c-0.444-16.587,8.837-30.743,21.158-41.008
	c11.213-9.342,25.205-15.626,39.422-18.668c7.729-1.653,16.086-1.823,23.871-0.481c3.888,0.671,7.602,2.058,11.058,3.938
	c1.895,1.032,3.611,2.362,5.24,3.766c0.952,0.854,1.846,1.766,2.682,2.733c0.506,0.637,1.013,1.271,1.52,1.909
	c0.814,1.6,1.143,1.686,0.985,0.256c-0.736,0.245,1.33,4.708,2.55,4.301c1.915-0.638-6.109-10.236-6.609-10.748
	c-5.769-5.905-12.792-9.332-20.898-10.729c-17.342-2.99-35.833,2.981-50.774,11.454c-15.27,8.659-28.211,22.092-32.096,39.588
	c-4.773,21.493,7.655,42.543,11.022,63.281C293.32,451.58,296.163,455.013,295.968,453.812L295.968,453.812z"/>
<path fill="#C6C6C6" d="M380.015,357.381c5.941,0.208,11.228,3.231,16.724,5.157c1.123,0.394,3.334,0.104,3.588-1.385
	c0.721-4.229,1.413-8.558,2.666-12.666c0.79-2.588-4.166-3.029-4.878-0.693c-1.254,4.11-1.945,8.438-2.667,12.668
	c1.196-0.462,2.393-0.924,3.588-1.385c-6.47-2.269-12.297-5.267-19.276-5.511C376.612,353.458,376.951,357.274,380.015,357.381
	L380.015,357.381z"/>
<path fill="#C6C6C6" d="M492.65,385.373c16.564-1.688,31.072-8.781,43.614-19.585c6.268-5.398,12.186-11.533,16.798-18.409
	c2.049-3.052,3.67-6.372,5.188-9.709c1.543-3.391,4.048-7.617,4.573-11.303c0.092-0.64-4.445-1.421-4.937-0.797
	c-0.233,0.298-0.278,0.52-0.222,0.889c0.146,0.947,3.868,1.045,4.562,0.963c0.141-0.017,0.279-0.033,0.421-0.049
	c0.735-0.086-3.177-1.248-4.191-1.129c-0.14,0.017-0.28,0.033-0.42,0.049c1.521,0.321,3.042,0.642,4.562,0.963
	c-0.057-0.369-0.012-0.591,0.223-0.889c-1.646-0.267-3.29-0.532-4.937-0.797c-0.411,2.881-2.308,6.004-3.435,8.684
	c-1.438,3.414-3.027,6.744-4.862,9.961c-4.269,7.482-10.585,13.798-16.904,19.559c-12.408,11.311-27.443,18.763-44.229,20.472
	C487.735,384.318,491.633,385.476,492.65,385.373L492.65,385.373z"/>
<path fill="#C6C6C6" d="M552.951,326.307c3.812-2.44,7.166-5.297,10.565-8.266c0.867-0.756,2.321-2.251,3.543-1.594
	c2.443,1.314,4.349,4.001,6.124,6.045c1.235,1.421,5.999,1.515,4.072-0.702c-2.951-3.395-7.813-9.964-13.214-8.87
	c-1.87,0.378-3.278,1.407-4.72,2.612c-3.24,2.709-6.254,5.484-9.833,7.775C547.277,324.725,551.362,327.324,552.951,326.307
	L552.951,326.307z"/>
<path fill="#C6C6C6" d="M728.79,174.087c20.696-6.378,39.513-17.289,54.498-33.018c6.169-6.476,12.758-14.238,16.181-22.588
	c0.87-2.121,7.009-15.849,5.92-16.742c1.665,1.365-1.054-2.694-1.668-3.197c-0.028-0.024-0.06-0.048-0.089-0.073
	c-0.135-0.111-0.505-0.462-0.735-0.348c-1.237,0.617-1.937,4.007-2.372,5.164c-1.314,3.489-2.529,7.014-3.872,10.493
	c-3.386,8.766-10.188,16.591-16.502,23.399c-14.694,15.84-33.979,26.694-54.498,33.018
	C725.486,170.246,727.634,174.443,728.79,174.087L728.79,174.087z"/>
<path fill="#C6C6C6" d="M797.604,101.905c3.482-2.69,6.709-5.72,10.238-8.342c1.287-0.956,1.292-0.229,0.402-0.785
	c0.675,0.421,1.218,1.047,1.759,1.62c1.494,1.58,2.796,3.361,4.132,5.073c0.863,1.107,5.352,0.661,4.84,0.007
	c-3.089-3.961-5.811-8.368-11.28-8.45c-2.003-0.03-3.622,0.936-5.175,2.09c-3.342,2.481-6.383,5.379-9.681,7.926
	C792.261,101.489,796.474,102.777,797.604,101.905L797.604,101.905z"/>
<path fill="#C6C6C6" d="M507.194,244.556c-5.15-6.67-5.629-16.606-6.241-24.681c-0.665-8.774-1.284-17.668-0.684-26.457
	c1.228-17.944,8.84-34.568,20.786-47.877c11.868-13.223,28.373-24.335,44.981-30.592c9.232-3.478,19.423-4.536,28.289,0.459
	c4.406,2.482,8.424,6.89,11.002,11.215c1.641,2.752,4.447,8.841,1.744,11.702c-1.358,1.438,3.124,3.536,4.295,2.297
	c5.253-5.56-2.614-15.683-6.249-19.912c-6.344-7.379-15.525-11.424-25.159-11.749c-9.612-0.324-19.057,3.411-27.452,7.72
	c-9.599,4.927-18.794,11.113-27.007,18.094c-15.71,13.352-26.331,31.317-29.368,51.775c-1.526,10.275-0.685,20.672-0.036,30.983
	c0.58,9.217,1.293,19.938,7.15,27.525C504.254,246.362,508.946,246.825,507.194,244.556L507.194,244.556z"/>
<path fill="#C6C6C6" d="M597.295,131.104c4.787-0.264,7.314,5.155,9.323,8.669c0.854,1.492,3.916,2.092,4.217-0.177
	c0.662-4.998,1.637-10.254,4.802-14.336c1.71-2.206-1.799-5.765-3.498-3.572c-3.688,4.758-5.085,10.453-5.863,16.331
	c1.404-0.059,2.811-0.118,4.217-0.177c-3.316-5.8-7.237-11.741-14.678-11.331C592.793,126.678,594.628,131.251,597.295,131.104
	L597.295,131.104z"/>
<text transform="matrix(1 0 0 1 599.8887 279.3105)" fill="#B2B2B2" font-family="'Lato-Regular'" font-size="18">float/display</text>
<text transform="matrix(1 0 0 1 644.8887 208.3105)" fill="#B2B2B2" font-family="'Lato-Regular'" font-size="18">for small components</text>
</svg>