43 lines
826 B
HTML
43 lines
826 B
HTML
<html>
|
|
<head>
|
|
<style>
|
|
svg {
|
|
width: 800px;
|
|
display: none;
|
|
}
|
|
|
|
.container {
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#test {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-image: repeating-conic-gradient(gold, orange 20deg);
|
|
filter: url(#posterize);
|
|
transform: scale(20);
|
|
transform-origin: 45% top;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<svg viewBox="0 0 700 100">
|
|
<defs>
|
|
<filter id="posterize" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
|
|
<feComponentTransfer>
|
|
<feFuncR type="discrete" tableValues="0 1"/>
|
|
<feFuncG type="discrete" tableValues="0 1"/>
|
|
<feFuncB type="discrete" tableValues="0 1"/>
|
|
</feComponentTransfer>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div class="container">
|
|
<div id="test"></div>
|
|
</div>
|
|
</html>
|