56 lines
1.4 KiB
HTML
56 lines
1.4 KiB
HTML
<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, black);
|
|
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>
|
|
<feFuncR type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
|
|
<feFuncG type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
|
|
<feFuncB type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
|
|
</feComponentTransfer>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div>
|
|
<div id="gradient"></div>
|
|
<div id="x" class="x"></div>
|
|
<div id="plus" class="plus"></div>
|
|
</div>
|
|
</html>
|