An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
fsckcss/public/ice_cream_graphic.svg

26 lines
14 KiB

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.0948,0,0,1.07601,-69.7034,-150.814)">
<ellipse cx="297.5" cy="334" rx="163.5" ry="172" style="fill:url(#_Linear1);"/>
</g>
<g transform="matrix(-0.44965,0.141361,-0.339175,-1.26131,758.579,1263.2)">
<clipPath id="_clip2">
<path d="M440,506L619,762L261,762L440,506Z"/>
</clipPath>
<g clip-path="url(#_clip2)">
<g transform="matrix(-2.05059,-0.229821,0.551421,-0.731027,858.984,1097.77)">
<use xlink:href="#_Image3" x="222.7" y="339.758" width="167.316px" height="348.198px" transform="matrix(0.99593,0,0,0.997703,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(0.78337,0,0,0.847019,28.4311,-40.0264)">
<ellipse cx="471" cy="916.5" rx="48" ry="47.5" style="fill:url(#_Radial4);"/>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(327,0,0,344,134,334)"><stop offset="0" style="stop-color:rgb(77,77,77);stop-opacity:1"/><stop offset="0.45" style="stop-color:rgb(128,128,128);stop-opacity:1"/><stop offset="1" style="stop-color:white;stop-opacity:1"/></linearGradient>
<image id="_Image3" width="168px" height="349px" xlink:href="data:image/png;base64,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
<radialGradient id="_Radial4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(96,0,0,95,423,916.5)"><stop offset="0" style="stop-color:rgb(18,18,18);stop-opacity:1"/><stop offset="1" style="stop-color:white;stop-opacity:1"/></radialGradient>
</defs>
</svg>