JSFiddle - React, Tailwind, and code Playground
by vals
HTML
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>
<div class='B'>B</div>
CSS
body { background:#FFF8E6; }
.B {
position:absolute;
top:50%; left:50%;
margin-top:-150px;
line-height:236px;
font-size:225pt;
font-weight:bold;
font-family:'Carrois Gothic SC', sans-serif;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(9%,#FFBF7F), color-stop(9%,#F4A668), color-stop(19.6%,#F4A668), color-stop(19.9%,#F38669), color-stop(28.7%,#F38669), color-stop(29%,#AF9F88), color-stop(49%,#AF9F88), color-stop(49%,#cfb698), color-stop(70%,#cfb698), color-stop(70%,#ecd2b1));
color:transparent;
-webkit-background-clip: text;
}
.B:before {
content:'';
position:absolute;
left: -237px;
height:135px;
width: 258px;
background-image: linear-gradient(0deg,#898481,#898481),
radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
linear-gradient(0deg,#898481,#898481),
radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),
radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
linear-gradient(0deg,#ccbcac,#ccbcac),
linear-gradient(0deg,#898481,#898481),
radial-gradient(circle at top right, #898481 22px, transparent 22px),
linear-gradient(187deg,#B46550 2px,#f38669 24px),
radial-gradient(circle at top right, #f38669 22px, transparent 22px),
linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),
radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
linear-gradient(0deg,#ccbcac,#ccbcac),
linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),
radial-gradient(circle at top right, #f4a668 22px, transparent 22px),
linear-gradient(0deg,#ffbf7f,#ffbf7f),
radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
...