blob: 78df2763f468f2c703cdde973967c7a240b8ad0c [file] [log] [blame]
<html>
<head>
<style>
svg {
width: 800px;
display: none;
}
div {
width: 200px;
height: 200px;
}
#gradient {
position: absolute;
width: 200px;
height: 200px;
background-image: conic-gradient(blue -180deg, black 540deg);
filter: url(#posterize);
}
.x {
position: absolute;
-webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%);
}
#x {
background-color:black;
}
.plus {
position: absolute;
-webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
}
#plus {
background-color:black;
}
</style>
</head>
<body>
<svg viewBox="0 0 700 100">
<defs>
<filter id="posterize" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="discrete" tableValues="0 0.0625 0.125 0.1875 0.25 0.3125 0.375 0.4375 0.5 0.5625 0.625 0.6875 0.75 0.8125 0.875 0.9375"/>
<feFuncG type="discrete" tableValues="0 0.0625 0.125 0.1875 0.25 0.3125 0.375 0.4375 0.5 0.5625 0.625 0.6875 0.75 0.8125 0.875 0.9375"/>
<feFuncB type="discrete" tableValues="0 0.0625 0.125 0.1875 0.25 0.3125 0.375 0.4375 0.5 0.5625 0.625 0.6875 0.75 0.8125 0.875 0.9375"/>
</feComponentTransfer>
</filter>
</defs>
</svg>
<div>
<div id="gradient"></div>
<div id="x" class="x"></div>
<div id="plus" class="plus"></div>
</div>
</html>