JSFiddle - React, Tailwind, and code Playground
HTML
<div id="splash">
<div id="logowrapper">
<div class="kitten"></div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 300" preserveAspectRatio="xMinYMin meet">
<defs/>
<g>
<path stroke="none" fill="#DDDDDD" d="M110.95 215.1 Q100 225.6 100 240.7 100 256.25 110.75 266.85 121.45 277.5 137 277.5 153.9 277.5 165.45 267.4 177 257.35 177 242.5 177 226.85 166.7 216.1 155.6 204.6 137.5 204.6 121.85 204.6 110.95 215.1 M82.9 206.15 L82.2 206.05 80.3 206.05 Q75.15 206.05 71.55 207.25 66.35 208.95 66.35 212.7 66.35 215.65 67.75 216.9 L69.25 218.45 Q69.25 220.6 67.05 223.4 64.85 226.1 64.05 226.1 L63.8 226.1 Q62.45 225.9 60.35 223.3 58.25 220.75 58.25 218.4 58.25 217.8 59.6 217.1 60.95 216.3 60.95 214.7 L60.85 213.3 Q60.35 210.15 57.05 208.5 53.7 206.9 50.15 206.9 L32.8 206.9 27.25 207.75 Q21.85 209.3 21.85 213.1 21.85 214.8 23.35 216.2 24.85 217.8 28.4 219.3 29.9 219.9 35.1 226.2 40.3 232.5 44.5 239.15 45.2 240.05 45.4 242.35 L45.6 248.15 45.4 255.5 45 261.5 Q45 263.1 42.8 264.65 38.2 267.8 38.2 269.6 38.2 274.8 45.2 275.9 L58.55 276.5 61.45 276.5 64.35 276.6 Q69.45 276.6 72.2 275.6 75.85 274.1 77.25 270.45 L77.45 269.1 Q77.45 267.2 75.15 265.6 70.45 262.25 70.45 259.55 L70.45 238.95 86.05 218.7 Q86.3 218.45 91.45 216.9 95.1 215.75 95.1 212.05 95.1 208.35 93.45 207.15 91.6 205.95 88.5 205.95 L85.65 206.05 82.9 206.15 M127.75 222.3 Q130.15 219.2 133.85 219.2 141.8 219.2 146.9 232 151 242.15 151 251.7 151 256.7 148.6 259.6 146.2 262.4 142.2 262.4 135.1 262.4 129.75 249.5 125.35 238.95 125.35 230.4 125.35 225.5 127.75 222.3 M127 174.1 Q127.35 173.5 128.35 173.5 132.6 173.5 132.6 178.95 132.6 183.25 129 183.25 127.35 183.25 126.95 181.7 126.7 180.85 126.7 178.2 L126.65 176.9 126.6 175.7 Q126.6 174.7 127 174.1 M126.85 160.15 Q127.2 159.3 128.05 159.3 131.5 159.3 131.5 164.2 131.5 168.75 127.95 168.75 127.1 168.75 126.8 167.9 126.45 167.1 126.45 165.75 L126.5 164.8 126.6 163.8 126.55 163.5 126.5 162.2 Q126.5 161...
CSS
#splash {
position: relative;
height: 100vh;
padding: 3rem;
overflow: hidden;
display: flex;
align-items: center;
background-color: #DDDDDD;
}
#logowrapper {
position: relative;
width: auto;
height: 60%;
margin: auto;
}
#logowrapper .kitten {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('http://placekitten.com/200/300');
background-size: cover;
}
#logowrapper svg {
position: relative;
width: auto;
height: 100%;
z-index: 4;
animation: redraw 1s infinite;
}
@keyframes redraw {
from { min-width: 1px; }
to { min-width: 2px; }
}