{"id":369381,"date":"2024-05-21T04:02:09","date_gmt":"2024-05-21T04:02:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=369381"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T04:02:09","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=369381","title":{"rendered":"<span>\u0427\u0430\u0441\u044b \u043d\u0430 \u0441\u0438\u043d\u0443\u0441\u0430\u0445 \u0438 \u043a\u043e\u0441\u0438\u043d\u0443\u0441\u0430\u0445 \u0432 CSS<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u00a0\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043a\u043e\u0441\u043d\u0451\u043c\u0441\u044f \u043a\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/sin\" rel=\"nofollow noopener noreferrer\"><code>sin()<\/code><\/a> \u0438\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/cos\" rel=\"nofollow noopener noreferrer\"><code>cos()<\/code><\/a>. \u0415\u0441\u0442\u044c \u0438\u00a0\u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u00a0\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/tan\" rel=\"nofollow noopener noreferrer\"><code>tan()<\/code><\/a>, \u0437\u0430\u0447\u0435\u043c\u00a0\u0436\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u00a0\u0441\u0438\u043d\u0443\u0441\u0435 \u0438\u00a0\u043a\u043e\u0441\u0438\u043d\u0443\u0441\u0435? \u041e\u043d\u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u00a0\u043a\u0440\u0430\u044e \u043a\u0440\u0443\u0433\u0430. \u041e\u0431\u00a0\u044d\u0442\u043e\u043c \u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u00a0CSS-Tricks, \u043a\u043e\u0433\u0434\u0430 \u041a\u0440\u0438\u0441 <a href=\"https:\/\/css-tricks.com\/set-text-on-a-circle\/\" rel=\"nofollow noopener noreferrer\">\u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0441\u044f<\/a> \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a\u00a0\u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044e \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u00a0\u043a\u0440\u0443\u0433\u0443 \u0441\u00a0\u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c\u0438 Sass. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0448\u0435\u0441\u0442\u044c \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 [\u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d 8\u00a0\u043c\u0430\u0440\u0442\u0430 2023\u00a0\u0433\u043e\u0434\u0430], \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u00a0\u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u0447\u0438\u0441\u0435\u043b \u043f\u043e-\u043d\u043e\u0432\u043e\u043c\u0443.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/codepen.io\/stoumann\/pen\/wvxOQKo\" rel=\"nofollow noopener noreferrer\">\u0412\u043e\u0442<\/a>\u00a0\u043e \u0447\u0451\u043c \u044f \u0433\u043e\u0432\u043e\u0440\u044e:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/65ded427aeb5569d7b42509e\" data-style=\"\" id=\"65ded427aeb5569d7b42509e\" width=\"\"><\/div>\n<\/div>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041d\u0435\u00a0\u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430\u00a0\u0442\u0435\u043a\u0441\u0442, \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0449\u0438\u0439 \u043a\u0440\u0443\u0433\u043b\u0443\u044e \u0444\u043e\u0440\u043c\u0443, \u043d\u043e\u00a0\u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0440\u0430\u0437\u043c\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0432\u0434\u043e\u043b\u044c \u043a\u0440\u0443\u0433\u0430 \u0432\u00a0\u0432\u0438\u0434\u0435 \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0430. \u0412\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;div class=\"clock\">   &lt;div class=\"clock-face\">     &lt;time datetime=\"12:00\">12&lt;\/time>     &lt;time datetime=\"1:00\">1&lt;\/time>     &lt;time datetime=\"2:00\">2&lt;\/time>     &lt;time datetime=\"3:00\">3&lt;\/time>     &lt;time datetime=\"4:00\">4&lt;\/time>     &lt;time datetime=\"5:00\">5&lt;\/time>     &lt;time datetime=\"6:00\">6&lt;\/time>     &lt;time datetime=\"7:00\">7&lt;\/time>     &lt;time datetime=\"8:00\">8&lt;\/time>     &lt;time datetime=\"9:00\">9&lt;\/time>     &lt;time datetime=\"10:00\">10&lt;\/time>     &lt;time datetime=\"11:00\">11&lt;\/time>   &lt;\/div> &lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u043d\u0438\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u044b\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u00a0<code>.clock-face<\/code>. \u042f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<code>&lt;time><\/code>\u00a0\u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c\u00a0<code>datetime<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.clock {   --_ow: clamp(5rem, 60vw, 40rem);   --_w: 88cqi;   aspect-ratio: 1;   background-color: tomato;   border-radius: 50%;   container-type: inline;   display: grid;   height: var(--_ow);   place-content: center;   position: relative;   width var(--_ow); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u00a0\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0451 \u043e\u0444\u043e\u0440\u043c\u0438\u043b, \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0438\u00a0\u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043c\u044b\u00a0\u0434\u0435\u043b\u0430\u0435\u043c. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>width<\/code> \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u00a0<a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/\" rel=\"nofollow noopener noreferrer\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439<\/a>. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u044b\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/r_\/-q\/8m\/r_-q8mhnutlcx6whwpmduzakvak.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/r_\/-q\/8m\/r_-q8mhnutlcx6whwpmduzakvak.png\"\/><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430\u00a0\u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0432\u00a0\u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0430, \u043f\u0440\u0430\u0432\u0434\u0430? \u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438, \u0440\u0430\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0435\u0451\u00a0\u0448\u0438\u0440\u0438\u043d\u044b, \u0432\u0432\u0435\u0434\u0451\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>--_r<\/code>. \u0418\u00a0\u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 CSS, <code>calc()<\/code>, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438<code>--_w<\/code> \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0435\u0451\u00a0\u0440\u0430\u0434\u0438\u0443\u0441 <code>--_r<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.clock {   --_w: 300px;   --_r: calc(var(--_w) \/ 2);   \/* \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438. \u0412\u00a0\u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 360\u00a0\u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432. \u041d\u0430\u00a0\u0447\u0430\u0441\u0430\u0445 12\u00a0\u043c\u0435\u0442\u043e\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0446\u0438\u0444\u0440\u044b \u043d\u0443\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u0436\u0434\u044b\u0435 30\u00a0\u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 (<code>360\/12<\/code>). \u0412\u00a0\u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0435 \u043a\u0440\u0443\u0433 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u00a03\u00a0\u0447\u0430\u0441\u043e\u0432 \u043d\u0430\u00a0\u0447\u0430\u0441\u0430\u0445, \u0442\u0430\u043a \u0447\u0442\u043e \u00ab\u043f\u043e\u043b\u0434\u0435\u043d\u044c\u00bb\u00a0\u2014 \u044d\u0442\u043e \u221290 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u043e\u0442\u00a0\u044d\u0442\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: 360 \u2212 90 = 270\u00a0\u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u00a0\u2014 <code>--_d<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043d\u0430\u00a0\u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0435. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0443\u0433, \u0431\u0443\u0434\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u00a030\u00a0\u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.clock time:nth-child(1) { --_d: 270deg; } .clock time:nth-child(2) { --_d: 300deg; } .clock time:nth-child(3) { --_d: 330deg; } .clock time:nth-child(4) { --_d: 0deg; } .clock time:nth-child(5) { --_d: 30deg; } .clock time:nth-child(6) { --_d: 60deg; } .clock time:nth-child(7) { --_d: 90deg; } .clock time:nth-child(8) { --_d: 120deg; } .clock time:nth-child(9) { --_d: 150deg; } .clock time:nth-child(10) { --_d: 180deg; } .clock time:nth-child(11) { --_d: 210deg; } .clock time:nth-child(12) { --_d: 240deg; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u0430\u0447\u043a\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438\u00a0<code>sin()<\/code>\u00a0\u0438\u00a0<code>cos()<\/code>! \u0421 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b X \u0438 Y \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b X \u0438\u043c\u0435\u0435\u0442 \u0432\u0438\u0434\u00a0<code>radius + (radius * cos(degree))<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0451 \u0432 \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u00a0<code>--_x<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b Y \u0438\u043c\u0435\u0435\u0442 \u0432\u0438\u0434\u00a0<code>radius + (radius * sin(degree))<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0445\u043e\u0437\u044f\u0439\u043d\u0438\u0447\u0430\u0435\u043c \u0441\u00a0\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0447\u0438\u0441\u0435\u043b. \u041f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0438\u043c\u00a0\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0438\u00a0\u0432\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u00a0\u043d\u0430\u0448\u0438\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.clock-face time {   --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));   --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));   --_sz: 12cqi;   display: grid;   height: var(--_sz);   left: var(--_x);   place-content: center;   position: absolute;   top: var(--_y);   width: var(--_sz); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430\u00a0\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>--_sz<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b\u00a0\u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0434\u043b\u044f <code>width<\/code> \u0438\u00a0<code>height<\/code>. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0443\u00a0\u043d\u0430\u0441 \u0435\u0441\u0442\u044c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/5l\/a6\/h4\/5la6h4akxjik-pecysjrzfkfsyo.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/5l\/a6\/h4\/5la6h4akxjik-pecysjrzfkfsyo.png\"\/><\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0451\u043b\u0435\u043d\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430\u00a0\u0447\u0430\u0441\u044b! \u0420\u0430\u0434\u0438\u0443\u0441 \u043f\u0440\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0441\u044f \u0432\u00a0\u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u043c \u043c\u0435\u0441\u0442\u0435. \u0414\u043e\u00a0\u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0447\u0438\u0441\u043b\u0430 (<code>--_sz<\/code>) \u043c\u043e\u0436\u043d\u043e <em>\u0432\u044b\u0447\u0435\u0441\u0442\u044c<\/em> \u0438\u0437\u00a0\u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 (<code>--_w<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">--_r: calc((var(--_w) - var(--_sz)) \/ 2);<\/code><\/pre>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/rn\/jk\/hh\/rnjkhh-boxe3m_qo5gadosr3bua.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/rn\/jk\/hh\/rnjkhh-boxe3m_qo5gadosr3bua.png\"\/><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435! \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0446\u0432\u0435\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u0443\u0433 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u0435\u0435:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/oz\/jd\/io\/ozjdioauv1egtkpltb1kr33syxi.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/oz\/jd\/io\/ozjdioauv1egtkpltb1kr33syxi.png\"\/><\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u044f\u043c\u043e \u0437\u0434\u0435\u0441\u044c. \u041c\u044b\u00a0\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u00a0\u043a\u0440\u0443\u0433\u0443, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e? \u041d\u043e\u00a0\u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0447\u0430\u0441\u044b \u0431\u0435\u0437 \u0441\u0442\u0440\u0435\u043b\u043e\u043a, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u044b, \u043c\u0438\u043d\u0443\u0442\u044b \u0438\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u044b?<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u00a0\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0435\u0449\u0451 \u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;div class=\"clock\">   &lt;!-- \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u0433\u043e\u0432 &lt;time> -->   &lt;span class=\"arm seconds\">&lt;\/span>   &lt;span class=\"arm minutes\">&lt;\/span>   &lt;span class=\"arm hours\">&lt;\/span>   &lt;span class=\"arm center\">&lt;\/span> &lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u00a0\u043e\u0431\u0449\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0441\u0442\u0440\u0435\u043b\u043e\u043a. \u0421\u043d\u043e\u0432\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u00a0\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.arm {   background-color: var(--_abg);   border-radius: calc(var(--_aw) * 2);   display: block;   height: var(--_ah);   left: calc((var(--_w) - var(--_aw)) \/ 2);   position: absolute;   top: calc((var(--_w) \/ 2) - var(--_ah));   transform: rotate(0deg);   transform-origin: bottom;   width: var(--_aw); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0434\u043d\u0443 \u0438\u00a0\u0442\u0443\u00a0\u0436\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">@keyframes turn {   to {     transform: rotate(1turn);   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438\u00a0\u2014 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u00a0\u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0431\u043e\u0440\u043e\u0442. \u0427\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0435 \u043d\u0430\u00a0\u043d\u0435\u0433\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f 12\u00a0\u0447\u0430\u0441\u043e\u0432. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e CSS <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\" rel=\"nofollow noopener noreferrer\"><code>animation-duration<\/code><\/a> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u00a0\u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u0438\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043d\u0430\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445. \u0417\u0434\u0435\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0432\u043d\u043e 43\u202f200\u00a0\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u043c\u00a0\u2014 \u044d\u0442\u043e 60\u00a0\u0441\u0435\u043a\u0443\u043d\u0434 * 60\u00a0\u043c\u0438\u043d\u0443\u0442 * 12\u00a0\u0447\u0430\u0441\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">animation: turn 43200s infinite;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u0438\u043d\u0443\u0442\u043d\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0435 \u043d\u0430\u00a0\u043e\u0431\u043e\u0440\u043e\u0442 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u00a0\u0447\u0430\u0441. \u041d\u043e\u00a0\u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 <a href=\"https:\/\/css-tricks.com\/using-multi-step-animations-transitions\/\" rel=\"nofollow noopener noreferrer\">\u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0443\u043f\u0435\u043d\u0447\u0430\u0442\u043e\u0439<\/a>, \u0442\u043e\u00a0\u0435\u0441\u0442\u044c \u0447\u0442\u043e\u0431\u044b \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0431\u044b\u043b\u043e \u0441\u0442\u0443\u043f\u0435\u043d\u0447\u0430\u0442\u044b\u043c, \u0430\u00a0\u043d\u0435\u00a0\u043b\u0438\u043d\u0435\u0439\u043d\u044b\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f 60\u00a0\u0448\u0430\u0433\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u043e\u00a0\u043e\u0434\u043d\u043e\u043c\u0443 \u043d\u0430\u00a0\u043a\u0430\u0436\u0434\u0443\u044e \u043c\u0438\u043d\u0443\u0442\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">animation: turn 3600s steps(60, end) infinite;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0435\u043a\u0443\u043d\u0434\u043d\u0430\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0432\u043d\u043e,\u00a0\u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u043e\u0440\u043e\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 60\u00a0\u0441\u0435\u043a\u0443\u043d\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">animation: turn 60s linear infinite;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><em>\u0422\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438 \u043a\u043e\u0434 \u0432\u044b\u0448\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438: \u0430\u0432\u0442\u043e\u0440 \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u043a\u043e\u0434, \u043d\u043e \u043d\u0435 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u043b \u0442\u0435\u043a\u0441\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430.<\/em><\/p><\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u00a0\u043e\u0431\u0449\u0438\u0445 \u0441\u0442\u0438\u043b\u044f\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.seconds {   --_abg: hsl(0, 5%, 40%);   --_ah: 145px;   --_aw: 2px;   animation: turn 60s steps(60, end) infinite; } .minutes {   --_abg: #333;   --_ah: 145px;   --_aw: 6px;   animation: turn 3600s steps(60, end) infinite; } .hours {   --_abg: #333;   --_ah: 110px;   --_aw: 6px;   animation: turn 43200s linear infinite; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410\u00a0\u0435\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043d\u0430\u0447\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0441\u00a0\u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438? \u0422\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e JavaScript:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const time = new Date(); const hour = -3600 * (time.getHours() % 12); const mins = -60 * time.getMinutes(); app.style.setProperty('--_dm', `${mins}s`); app.style.setProperty('--_dh', `${(hour+mins)}s`);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u00a0\u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0443 \u044f\u00a0\u0434\u043e\u0431\u0430\u0432\u0438\u043b <code>id=\"app\"<\/code> \u0438\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0434\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>animation-delay<\/code>, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u041c\u0435\u0439\u0442 \u041c\u0430\u0440\u0448\u0430\u043b\u043a\u043e \u0441\u00a0<a href=\"https:\/\/css-tricks.com\/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time\/\" rel=\"nofollow noopener noreferrer\">\u0447\u0430\u0441\u0430\u043c\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u00a0CSS<\/a>. \u041c\u0435\u0442\u043e\u0434 <code>getHours()<\/code> JavaScipt-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Date<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 24-\u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u00a012-\u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Remainder\" rel=\"nofollow noopener noreferrer\">\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043e\u0441\u0442\u0430\u0442\u043a\u0430 %<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0418\u00a0\u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>animation-delay<\/code> \u0432\u00a0CSS:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.minutes {   animation-delay: var(--_dm, 0s);   \/* \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ }  .hours {   animation-delay: var(--_dh, 0s);   \/* \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438\u00a0<code>@supports<\/code>\u00a0\u0438 \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438<code>sin()<\/code>\u00a0\u0438\u00a0<code>cos()<\/code>. (\u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0422\u0435\u043c\u0430\u043d\u0438 \u0410\u0444\u0438\u0444!):<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">@supports not (left: calc(1px * cos(45deg))) {   time {     left: 50% !important;     top: 50% !important;     transform: translate(-50%,-50%) rotate(var(--_d)) translate(var(--_r)) rotate(calc(-1*var(--_d)))   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0443\u0430\u043b\u044f! \u041d\u0430\u0448\u0438 \u0447\u0430\u0441\u044b \u0433\u043e\u0442\u043e\u0432\u044b:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/65ded427aeb5569d7b42509e\" data-style=\"\" id=\"65ded427aeb5569d7b42509e\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h1 id=\"chto-eschyo-mozhno-sdelat\">\u0427\u0442\u043e \u0435\u0449\u0451 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c?<\/h1>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u043d\u043e\u0439 <code>&lt;time><\/code> \u043d\u0430\u00a0<code>&lt;img><\/code>, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430 <code>--_w<\/code> \u0438\u00a0\u0440\u0430\u0434\u0438\u0443\u0441\u0430 <code>--_r<\/code> \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e <a href=\"https:\/\/codepen.io\/stoumann\/pen\/abjQeZy\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c<\/a> \u0447\u0430\u0441\u044b \u0432\u00a0\u0433\u0430\u043b\u0435\u0440\u0435\u044e \u043a\u0440\u0443\u0433\u043b\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/65ded6d0ee339fd48bcd4780\" data-style=\"\" id=\"65ded6d0ee339fd48bcd4780\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0415\u0441\u043b\u0438 \u043a\u043e\u0434 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0439\u043b\u0435\u0440 \u0441\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u043c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sh\/r8\/in\/shr8inx2ihg92fx9moxremzy5dy.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/sh\/r8\/in\/shr8inx2ihg92fx9moxremzy5dy.png\"\/><\/p>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u042f\u00a0\u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b, \u0447\u0442\u043e \u0447\u0430\u0441\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0432\u00a0\u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0430. \u041c\u043e\u0436\u043d\u043e \u043e\u043f\u0435\u0440\u0435\u0442\u044c\u0441\u044f \u043d\u0430\u00a0\u044d\u0442\u043e \u0438\u00a0\u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0443\u0437\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u00a0\u0432\u0438\u0434\u0435\u043b \u043d\u0430\u00a0\u0434\u043d\u044f\u0445 \u043d\u0430\u00a0\u043f\u043b\u0430\u043a\u0430\u0442\u0435 (\u043a\u00a0\u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044f\u00a0\u0435\u0433\u043e \u043d\u0435\u00a0\u043a\u0443\u043f\u0438\u043b) \u0432\u00a0\u0445\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0435. \u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f\u00a0\u043f\u043e\u043c\u043d\u044e, \u043e\u043d\u00a0\u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u00ab\u041b\u0443\u043d\u0430\u00bb \u0438\u00a0\u0441\u043e\u0441\u0442\u043e\u044f\u043b \u0438\u0437\u00a0\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u0447\u0435\u043a, \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0449\u0438\u0445 \u043a\u0440\u0443\u0433:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/az\/i4\/ft\/azi4ftgdmsay9m_ay908jqzygpm.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/az\/i4\/ft\/azi4ftgdmsay9m_ay908jqzygpm.png\"\/><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u00a0\u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u0432\u0435\u0434\u044c \u043a\u0440\u0443\u0433\u0438 \u043d\u0435\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u0440\u044f\u0434\u043a\u0443. \u041d\u0435\u00a0\u043d\u0443\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u00a0\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u043d\u0435\u0434\u0440\u0438\u043c \u0432\u00a0\u043d\u0438\u0445 JavaScript \u0438\u00a0\u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 <code>&lt;input type=\"range\"><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b\u00a0\u043e\u0431\u0435\u0440\u043d\u0451\u043c \u0432\u00a0<code>&lt;form><\/code> \u0438\u00a0\u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>input<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;form id=\"controls\">   &lt;fieldset>     &lt;label>Number of rings       &lt;input type=\"range\" min=\"2\" max=\"12\" value=\"10\" id=\"rings\" \/>     &lt;\/label>     &lt;label>Dots per ring       &lt;input type=\"range\" min=\"5\" max=\"12\" value=\"7\" id=\"dots\" \/>     &lt;\/label>     &lt;label>Spread       &lt;input type=\"range\" min=\"10\" max=\"40\" value=\"40\" id=\"spread\" \/>     &lt;\/label>   &lt;\/fieldset> &lt;\/form><\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u00ab\u0432\u0432\u043e\u0434\u0430\u00bb. \u041c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u0430\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;li><\/code> \u0441\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0439 \u043a\u00a0\u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437\u00a0\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 <code>--_d<\/code>. \u042d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043c\u044b\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435. \u0410\u00a0\u0435\u0449\u0451 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u0430 (<code>--_r<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0442\u043e\u0447\u043a\u0438 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u043c\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u043d\u0434\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c (\u043d\u0443, \u043d\u0435\u00a0\u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e) HSL-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u00a0\u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0435\u0433\u043e \u043a\u0430\u043a \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u00a0\u2014 <code>--_bgc<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const update = () => {   let s = \"\";   for (let i = 1; i &lt;= rings.valueAsNumber; i++) {     const r = spread.valueAsNumber * i;     const theta = coords(dots.valueAsNumber * i);     for (let j = 0; j &lt; theta.length; j++) {       s += `&lt;li style=\"--_d:${theta[j]};--_r:${r}px;--_bgc:hsl(${random(         50,         25       )},${random(90, 50)}%,${random(90, 60)}%)\">&lt;\/li>`;     }   }   app.innerHTML = s; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>random()<\/code> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u00a0\u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0447\u0438\u0441\u0435\u043b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const random = (max, min = 0, f = true) => f ? Math.floor(Math.random() * (max - min) + min) : Math.random() * max;<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/65ded6d14c5bea9d8a0ae43d\" data-style=\"\" id=\"65ded6d14c5bea9d8a0ae43d\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p><a href=\"https:\/\/codepen.io\/stoumann\/pen\/oNMJvjO\" rel=\"nofollow noopener noreferrer\">\u0412\u043e\u0442 \u0438 \u0432\u0441\u0451<\/a>.\u00a0<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f JavaScript, \u0430\u00a0\u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043d\u0430\u00a0\u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435\u00a0\u043d\u0443\u0436\u043d\u0430: \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u0441\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u00a0\u043d\u0443\u0436\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>sin()<\/code> \u0438\u00a0<code>cos()<\/code>.<\/p>\n<p>  <\/p>\n<h1 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h1>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u00a0\u043a\u0440\u0443\u0433\u0443\u00a0\u2014 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0447\u0442\u043e \u043c\u044b\u00a0\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u0423\u0432\u0435\u0440\u0435\u043d, \u043c\u044b\u00a0\u0443\u0432\u0438\u0434\u0438\u043c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435, \u0441\u043b\u043e\u0436\u043d\u044b\u0435, \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/796639\/\"> https:\/\/habr.com\/ru\/articles\/796639\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u00a0\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043a\u043e\u0441\u043d\u0451\u043c\u0441\u044f \u043a\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/sin\" rel=\"nofollow noopener noreferrer\"><code>sin()<\/code><\/a> \u0438\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/cos\" rel=\"nofollow noopener noreferrer\"><code>cos()<\/code><\/a>. \u0415\u0441\u0442\u044c \u0438\u00a0\u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u00a0\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/tan\" rel=\"nofollow noopener noreferrer\"><code>tan()<\/code><\/a>, \u0437\u0430\u0447\u0435\u043c\u00a0\u0436\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u00a0\u0441\u0438\u043d\u0443\u0441\u0435 \u0438\u00a0\u043a\u043e\u0441\u0438\u043d\u0443\u0441\u0435? \u041e\u043d\u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u00a0\u043a\u0440\u0430\u044e \u043a\u0440\u0443\u0433\u0430. \u041e\u0431\u00a0\u044d\u0442\u043e\u043c \u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u00a0CSS-Tricks, \u043a\u043e\u0433\u0434\u0430 \u041a\u0440\u0438\u0441 <a href=\"https:\/\/css-tricks.com\/set-text-on-a-circle\/\" rel=\"nofollow noopener noreferrer\">\u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0441\u044f<\/a> \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a\u00a0\u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044e \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u00a0\u043a\u0440\u0443\u0433\u0443 \u0441\u00a0\u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c\u0438 Sass. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0448\u0435\u0441\u0442\u044c \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 [\u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d 8\u00a0\u043c\u0430\u0440\u0442\u0430 2023\u00a0\u0433\u043e\u0434\u0430], \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u00a0\u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u0447\u0438\u0441\u0435\u043b \u043f\u043e-\u043d\u043e\u0432\u043e\u043c\u0443.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/codepen.io\/stoumann\/pen\/wvxOQKo\" rel=\"nofollow noopener noreferrer\">\u0412\u043e\u0442<\/a>\u00a0\u043e \u0447\u0451\u043c \u044f \u0433\u043e\u0432\u043e\u0440\u044e:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/65ded427aeb5569d7b42509e\" data-style=\"\" id=\"65ded427aeb5569d7b42509e\" width=\"\"><\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-369381","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/369381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=369381"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/369381\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=369381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=369381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=369381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}