JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="wl-bird-bg">
  
  
  </div>

CSS

html {
  height: 400vh; /* just to test */
  background-attachment: scroll; /* default (remove, or make it "fixed" if needed) */
  background-size: max(calc(100vw - 2rem), 20rem) auto; /* use 926.4px here to solidify the "real" size */
  background-repeat: no-repeat;
  background-position: top right;
  background-image: url('data:image/svg+xml,<svg style="outline: 2px solid mark; outline-offset:-2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 926.4 635.3"><path fill="%2320201e" d="m178 487.4-2.9 3.2a20 20 0 0 1-7.4 5.2c-4.5 1.7-8.5.6-12.1-2.1-2.4-1.8-2.7-4.5-1-7a15 15 0 0 1 5.1-4.6 91 91 0 0 0 13.2-9.1l3.9-3.5c2.4-2.1 3.2-4.8 3.5-7.9q.3-2-2.1-2.3-3-.2-6 0c-8.2.7-16.3 2.2-24.5 2.5a314 314 0 0 1-47.4-1.8 199 199 0 0 1-43.2-9q-7.5-2.5-14.2-6.9a29 29 0 0 1-7.6-7.2q-2-2.9-2.7-6.8 5.2 1.6 9.9 2.8 12 2.8 24.3 4.2 24.2 2.7 48.3 2.2a559 559 0 0 0 57.3-3.7l21.2-2.5c2-.2 3.1-1.5 4-3.1q1.8-3.6 2-7.6l.9-10.5q.3-4.2 1.4-8.2 1-3.4 3.4-5.7a17 17 0 0 0 4.4-6.8 171 171 0 0 0 6.7-21q5.4-21 8-42.5.9-9.3 2.5-18.5c1-4.5 2.1-9 4.2-13.2q.9-2 2.4-3.6 3.2-3.1 5.8.5 1 1.5 1.5 3.2c2.2 7.2 4.6 14.3 5.5 21.8q1.3 10.2 0 20.3a168 168 0 0 1-10.6 38.7c-4.5 12-9.1 23.9-12.9 36.1q-.9 2.6-1.2 5.4-.2.8.4 1.5c.6.4 1.1 0 1.5-.3l3.7-3q4.8-4.5 10.1-8.5c3.5-2.5 7.1-4.6 11.4-5.3q3.5-.6 6.6.5a53 53 0 0 0 22.4 2.7h3.3q-.5.7-1.4.7-14.7 5.3-29.5 9.8-3.6 1.1-7.4 1.8-4.5.7-6.3 4.9-1.7 3.6-2.7 7.4c-1.6 5.9-4.8 11-8.1 15.9-6.7 10-14.5 19.1-22.3 28.2l-13.9 15.9q-4.4 5-7.1 11.1-1 2.2-2.3 4.2-1.2 1.6-2.1-.2-.5-1.3-.6-2.8-1-7.3.5-15.6Z"/><path fill="%2320201f" d="M512.9 153.3c1.9 2.6 2.7 5.5 3.4 8.9q1.2-4 1.7-7.5l.8-7.6c.1-2.5-.3-4.9-.2-7.7 5.7 5 9.2 10.7 8.9 18.2q-.2 4.5-2.3 8.5l-11.5 22.4-3.9 8.2-1 2.7c-1.1 3.4-.8 3.6 2.7 4.3q4.2.8 6.8-2.5l1.9-2.5 1.2-1.8c3.7-5 7.5-6.2 13.4-4.1q3 1.1 5.9 2.7 1.2.5 2 1.8-.8.9-2 .9-3.4.3-6.2 2.3c-1.1.9-2.6 1.1-4 1.5q-4.1 1.1-7.9 2.7c-3.6 1.6-6.3 3.9-7.5 7.9q-1.7 4.8-4.6 8.9a101 101 0 0 1-21.5 24.7 42 42 0 0 1-28 9.5q-2.2 0-4.2-.8-1.8-.4-2.6-2.4 4.6-.3...