Паттерн из шестиугольников с полутонами
Stack Overflow на русском Asked on December 9, 2021
Я искал в Google, но не нашёл ответов или статей на этот вопрос.
Я хочу создать сетку из шестиугольников, но она мне нужна в виде полутонов, поэтому мне может понадобиться более одного шестиугольника в шаблоне.
Ниже приведен код, который генерирует шаблон шестиугольников, но не в виде полутонов. Мне нужно, чтобы полутоновый рисунок шел горизонтально.
У меня есть эта ссылка шаблона полутонов от Adobe, но сетка слишком мала, и она идет вертикально, но я хочу его горизонтально.
Как сделать, чтобы рисунок шестиугольников проходил горизонтально в виде полутонов?
html, body {
height: 100%;
margin: 0;
padding: 0;
background: black;
}
svg {
background: rgb(125, 155, 132);
}
polygon {
fill: rgb(125, 155, 132);
stroke-width: 1;
stroke: #000;
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<pattern id="hexagons" width="50" height="43.4"
patternUnits="userSpaceOnUse"
patternTransform="scale(2)">
<polygon
points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2"
id="hex" shape-rendering="geometricPrecision" />
<use xlink:href="#hex" x="25" />
<use xlink:href="#hex" x="-25" />
<use xlink:href="#hex" x="12.5" y="-21.7" />
<use xlink:href="#hex" x="-12.5" y="-21.7" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />
</svg>Свободный перевод вопроса svg hexagon halftone pattern от участника @ONYX.
2 Answers
Поскольку радиусы шестиугольников являются переменной y, вы не можете использовать здесь паттерны.
Основная идея заключается в следующем:
- фон svg белый;
- Шестиугольник закрашен в чёрный цвет
fill="black" - Чтобы нарисовать шестиугольники, вам нужно вычислить центр описанного круга. Вы делаете это, используя значение радиуса описанной окружности R. Это создает гексагональную решетку.
- Внутри гексагональной решетки необходимо изменить радиус описанной
окружности для шестиугольников в зависимости от
yследующим образом:let r = R * Math.sin (angle), где угол зависит отyзначение рассчитывается так:let angle = map (x, 0, H, 0, Math.PI);Это означает, чтоxпринимает значение от0до200(H), а угол будет иметь значение между0иMath.PI.
Пожалуйста прочтите комментарии в коде
const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink"
// переменные, используемые для рисования шестиугольника
let R = 5;// радиус описанной окружности
let h = R * Math.sin(Math.PI / 3);//половина высоты шестиугольника
let offset = 1.5 * R;//используется для смещения каждой второй строки шестиугольников
let W = 200,H=200;//svg's viewBox = "0 0 200 200"
//нарисовать гексагональную решетку
let i = 0;
for(let y = 0; y<H; y+=h){
i++
let o = (i%2 == 0) ? offset : 0;
for(let x = o; x<W; x+=3*R){
hex(x,y)
}
}
// функция, используемая для рисования шестиугольника
// радиус шестиугольника зависит от значения х
function hex(x,y) {
// радиус нарисованного шестиугольника зависит от значения `х`
let angle = map(x, 0, H, 0, Math.PI);
let r = R * Math.sin(angle) - .5
let points = ""
for (var a = 0; a < 6; a++) {
let o = {}
o.x = x + r * Math.cos(a * Math.PI / 3);
o.y = y + r * Math.sin(a * Math.PI / 3);
points+= `${o.x}, ${o.y} `
}
let hexagon = drawSVGelmt({points:points},"polygon", svg)
}
// функция, используемая для рисования нового элемента SVG
function drawSVGelmt(o,tag, parent) {
let elmt = document.createElementNS(SVG_NS, tag);
for (let name in o) {
if (o.hasOwnProperty(name)) {
elmt.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(elmt);
return elmt;
}
function map(n, a, b, _a, _b) {
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}svg{background:white; border:1px solid;width:90vh;}
polygon{fill:black}<svg id="svg" viewBox = "0 0 200 200" >
</svg>UPDATE
Автор вопроса комментирует:
Это то, что я хочу, но я пытаюсь создать шаблон, чтобы затем использовать этот шаблон как маску для изображения.
и позже:
в основном то, что вы сделали, работает, но мне нужно повторить шаблон по всей странице, потому что изображение будет иметь ширину 100% и высоту около 800 пикселей
В этом случае вы можете поместить все шестиугольники в группу и использовать clipPath, чтобы обрезать группу следующим образом:
var SVG_NS = 'http://www.w3.org/2000/svg';
var SVG_XLINK = "http://www.w3.org/1999/xlink"
let H = 800,W=500
var R = 5;
//var l = R;
var h = R * Math.sin(Math.PI / 3);
var offset = 1.5 * R;
let i = 0;
for(let y = 0; y<H; y+=h){
i++
let o = (i%2 == 0) ? offset : 0;
for(let x = o; x<W; x+=3*R){
hex(x,y)
}
}
function hex(x,y) {
let angle = map(x, 0, W, 0, Math.PI);
let r = R * Math.sin(angle) - .5
let points = ""
for (var a = 0; a < 6; a++) {
let o = {}
o.x = x + r * Math.cos(a * Math.PI / 3);
o.y = y + r * Math.sin(a * Math.PI / 3);
points+= `${o.x}, ${o.y} `
}
let hexagon = drawSVGelmt({points:points},"polygon", svg)
}
function drawSVGelmt(o,tag, parent) {
let elmt = document.createElementNS(SVG_NS, tag);
for (let name in o) {
if (o.hasOwnProperty(name)) {
elmt.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(elmt);
return elmt;
}
function map(n, a, b, _a, _b) {
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}svg{background:white; border:1px solid;}
polygon{fill:black}<svg viewBox = "0 0 500 800" >
<clipPath id="clip">
<polygon points="250,0 100,100 0 300 100,600 200,800 400,600 500,500 400,200 250,0"/>
</clipPath>
<g id="svg" style="clip-path: url(#clip)"></g>
</svg>Свободный перевод ответа svg hexagon halftone pattern от участника @enxaneta.
Answered by Alexandr_TT on December 9, 2021
Вот идея, объединяющая SVG и множественный фон. Хитрость заключается в том, чтобы иметь разные SVG в каждом ряду, где каждый раз, когда вы увеличиваете stroke, и затем вы используете некоторый радиальный фон.
Я использовал некоторые переменные CSS, чтобы легко настроить форму:
body {
height: calc(10.35*var(--s));
margin: 0;
--s:9.65vh;
--p:calc(var(--s)*0.667);
--x:calc(var(--s)*1.35);
position:relative;
}
body:before,
body:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:50.1%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="5" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="10" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="15" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="80%"/><stop stop-color="black" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="70%"/><stop stop-color="black" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="50%"/><stop stop-color="black" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="30%"/><stop stop-color="black" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>');
background-size:auto var(--s);
background-position:
0 calc(0*var(--p)),
var(--x) calc(1*var(--p)),
0 calc(2*var(--p)),
var(--x) calc(3*var(--p)),
0 calc(4*var(--p)),
var(--x) calc(5*var(--p)),
0 calc(6*var(--p)),
var(--x) calc(7*var(--p));
background-repeat:repeat-x;
}
body:after {
transform:scaleY(-1);
transform-origin:bottom;
}Мы можем изменить окраску, изменив цвета SVG:
body {
height: calc(10.35*var(--s));
margin: 0;
--s:9.65vh;
--p:calc(var(--s)*0.667);
--x:calc(var(--s)*1.35);
position:relative;
}
body:before,
body:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:50.1%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>');
background-size:auto var(--s);
background-position:
0 calc(0*var(--p)),
var(--x) calc(1*var(--p)),
0 calc(2*var(--p)),
var(--x) calc(3*var(--p)),
0 calc(4*var(--p)),
var(--x) calc(5*var(--p)),
0 calc(6*var(--p)),
var(--x) calc(7*var(--p));
background-repeat:repeat-x;
}
body:after {
transform:scaleY(-1);
transform-origin:bottom;
}А также инвертировать шаблон, изменив background-position
body {
height: calc(10.35*var(--s));
margin: 0;
--s:9.65vh;
--p:calc(var(--s)*0.667);
--x:calc(var(--s)*1.35);
position:relative;
}
body:before,
body:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:50.1%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>');
background-size:auto var(--s);
background-position:
var(--x) calc(7*var(--p)),
0 calc(6*var(--p)),
var(--x) calc(5*var(--p)),
0 calc(4*var(--p)),
var(--x) calc(3*var(--p)),
0 calc(2*var(--p)),
var(--x) calc(1*var(--p)),
0 calc(0*var(--p));
background-repeat:repeat-x;
}
body:after {
transform:scaleY(-1);
transform-origin:bottom;
}Для горизонтального шаблона мы делаем то же самое с учетом repeat-y и инвертируем почти все значения:
body {
width: calc(10.35*var(--s));
height:150vh;
margin:0;
--s:9.65vw;
--p:calc(var(--s)*0.667);
--x:calc(var(--s)*1.35);
position:relative;
overflow:hidden;
}
body:before,
body:after{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:50.1%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="5" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="10" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="15" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="80%"/><stop stop-color="black" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="70%"/><stop stop-color="black" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="50%"/><stop stop-color="black" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="30%"/><stop stop-color="black" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>');
background-size:var(--s) auto ;
background-position:
calc(7*var(--p)) var(--x),
calc(6*var(--p)) 0,
calc(5*var(--p)) var(--x),
calc(4*var(--p)) 0,
calc(3*var(--p)) var(--x),
calc(2*var(--p)) 0,
calc(1*var(--p)) var(--x),
calc(0*var(--p)) 0;
background-repeat:repeat-y;
}
body:after {
transform:scaleX(-1);
transform-origin:right;
}Другой паттерн:
body {
width: calc(10.35*var(--s));
height:150vh;
margin:0;
--s:9.35vw;
--p:calc(var(--s)*0.667);
--x:calc(var(--s)*1.35);
position:relative;
}
body:before,
body:after{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:50.1%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>');
background-size:var(--s) auto ;
background-position:
calc(7*var(--p)) var(--x),
calc(6*var(--p)) 0,
calc(5*var(--p)) var(--x),
calc(4*var(--p)) 0,
calc(3*var(--p)) var(--x),
calc(2*var(--p)) 0,
calc(1*var(--p)) var(--x),
calc(0*var(--p)) 0;
background-repeat:repeat-y;
}
body:after {
transform:scaleX(-1);
transform-origin:right;
}И еще один пример паттерна - светлый по центру, тёмный по краям:
body {
width: calc(10.35*var(--s));
height:150vh;
margin:0;
--s:9.35vw;
--p:calc(var(--s)*0.667);
--x:calc(var(--s)*1.35);
position:relative;
}
body:before,
body:after{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:50.1%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>');
background-size:var(--s) auto ;
background-position:
calc(0*var(--p)) var(--x),
calc(1*var(--p)) 0,
calc(2*var(--p)) var(--x),
calc(3*var(--p)) 0,
calc(4*var(--p)) var(--x),
calc(5*var(--p)) 0,
calc(6*var(--p)) var(--x),
calc(7*var(--p)) 0;
background-repeat:repeat-y;
}
body:after {
transform:scaleX(-1);
transform-origin:right;
}Свободный перевод ответа svg hexagon halftone pattern от участника @Temani Afif.
Answered by Alexandr_TT on December 9, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- haakon.io on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Joshua Engel on Why fry rice before boiling?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?