import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
class SvgBackground extends React.Component {
render() {
return (
<svg xmlns='http://www.w3.org/2000/svg' width={100} height={100}>
<rect width={100} height={100} fill='#269' />
<g fill='#6494b7'>
<rect width={100} height={1} y={20} />
<rect width={100} height={1} y={40} />
<rect width={100} height={1} y={60} />
<rect width={100} height={1} y={80} />
<rect width={1} height={100} x={20} />
<rect width={1} height={100} x={40} />
<rect width={1} height={100} x={60} />
<rect width={1} height={100} x={80} />
</g>
<rect
width={100}
height={100}
fill='none'
strokeWidth={2}
stroke='#fff'
/>
</svg>
);
}
}
class App extends React.Component {
render() {
const svgString = encodeURIComponent(renderToStaticMarkup(<SvgBackground />));
const dataUri = `url("data:image/svg+xml,${svgString}")`;
return (
<div
className='App'
style={{
background: dataUri,
width: 500,
height: 500,
}}
/>
);
}
}