{"id":3563,"date":"2025-10-07T12:09:33","date_gmt":"2025-10-07T09:09:33","guid":{"rendered":"https:\/\/shedov.top\/ru\/?p=3563"},"modified":"2026-01-12T00:23:25","modified_gmt":"2026-01-11T21:23:25","slug":"animirovannoe-serdce-sdelannoe-na-svg-i-chistom-css","status":"publish","type":"post","link":"https:\/\/shedov.top\/ru\/animirovannoe-serdce-sdelannoe-na-svg-i-chistom-css\/","title":{"rendered":"\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u0435\u0440\u0434\u0446\u0435 \u0441 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u043c \u0431\u0438\u0435\u043d\u0438\u0435\u043c \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0435 \u043d\u0430 SVG \u0438 \u0447\u0438\u0441\u0442\u043e\u043c CSS"},"content":{"rendered":" \n\n<div class=\"blog_post_image_wrap\">\n<div class=\"blog_post_image blog_post_image_cover\"><a href=\"https:\/\/animated-heart-svg-css.vercel.app\/\" target=\"_blank\" rel=\"noopener\"> <img decoding=\"async\" src=\"https:\/\/shedov.top\/wp-content\/images\/animated-heart-css.gif\" alt=\"\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u0435\u0440\u0434\u0446\u0435 \u0441 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u043c \u0431\u0438\u0435\u043d\u0438\u0435\u043c \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0435 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c CSS\" \/> <\/a><\/div>\n<\/div>\n\n \n<p style=\"margin-top: 25px;\">\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0434\u0446\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f <strong>HTML<\/strong>, <strong>CSS<\/strong> \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 <strong>SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/strong>.<\/p>\n \n\n<h2 style=\"text-align:center; margin-bottom: 9px;\">\u041f\u0443\u043b\u044c\u0441\u0430\u0446\u0438\u044f<\/h2>\n\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \"\u0431\u0438\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0434\u0446\u0430\" (\u043f\u0443\u043b\u044c\u0441\u0430\u0446\u0438\u044f), \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0447\u0438\u0441\u0442\u043e\u0433\u043e CSS.<\/p>\n\n<p><strong>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f:<\/strong> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code class=\"inline-code\">animation<\/code>.<\/p>\n<p><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong> \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code class=\"inline-code\">&lt;svg class=\"heart\"&gt;<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0430 <code class=\"inline-code\">@keyframes<\/code>: <code class=\"inline-code\">heartbeatSlow<\/code> (\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u0431\u0438\u0435\u043d\u0438\u0435, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u0438 <code class=\"inline-code\">heartbeatFast<\/code> (\u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0431\u0438\u0435\u043d\u0438\u0435, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438). \u042d\u0442\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code class=\"inline-code\">transform: scale(...)<\/code>, \u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f) SVG-\u0441\u0435\u0440\u0434\u0446\u0430 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044f \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u043f\u0443\u043b\u044c\u0441.<\/p> \n<p><strong>\u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 (<code class=\"inline-code\">:hover<\/code>):<\/strong> \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 (<code class=\"inline-code\">.heart:hover<\/code>), CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f <code class=\"inline-code\">heartbeatSlow<\/code>, \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 <code class=\"inline-code\">heartbeatFast<\/code>, \u0434\u0435\u043b\u0430\u044f \u043f\u0443\u043b\u044c\u0441 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u044d\u043d\u0435\u0440\u0433\u0438\u0447\u043d\u0435\u0435.<\/p> \n \n\n<h2 style=\"text-align:center; margin-bottom: 9px;\">\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442<\/h2>\n\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0434\u0446\u0430, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 SVG-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 SMIL (Synchronized Multimedia Integration Language).<\/p>\n \n<p><strong>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f:<\/strong> \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code class=\"inline-code\">&lt;animate&gt;<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 SVG.<\/p>\n<p><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong><\/p>\n<p>\u2014 \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 <code class=\"inline-code\">&lt;linearGradient id=\"heartGradient\"&gt;<\/code>.<\/p> \n\n<p>\u2014 \u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0442\u043e\u043f\u0430 (<code class=\"inline-code\">&lt;stop&gt;<\/code>) \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0435\u0433 <code class=\"inline-code\">&lt;animate&gt;<\/code>, \u044d\u0442\u043e\u0442 \u0442\u0435\u0433 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code class=\"inline-code\">stop-color<\/code> \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <code class=\"inline-code\">#db4f4f \u2192 #ff0000 \u2192 #db4f4f<\/code>) \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 1.8 \u0441\u0435\u043a\u0443\u043d\u0434\u044b (<code class=\"inline-code\">dur=\"1.8s\"<\/code>).<\/p> \n<p><strong>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/strong> \u0441\u0435\u0440\u0434\u0446\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0443\u043b\u044c\u0441\u0438\u0440\u0443\u0435\u0442, \u043d\u043e \u0438 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 \u043e\u0442\u0442\u0435\u043d\u043e\u043a, \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0441\u044c \u044f\u0440\u0447\u0435 (\u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0441\u043d\u044b\u043c) \u043d\u0430 \u043f\u0438\u043a\u0435 \"\u0443\u0434\u0430\u0440\u0430\", \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043c\u0430.<\/p>\n \n\n<h2 style=\"text-align:center; margin-bottom: 9px;\">\u0421\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438<\/h2>\n\n<p>\u042d\u0444\u0444\u0435\u043a\u0442 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u0441\u0434\u0435\u043b\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0444\u0438\u043b\u044c\u0442\u0440\u0430.<\/p>\n\n<p><strong>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f:<\/strong> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code class=\"inline-code\">filter: drop-shadow(...)<\/code>.<\/p>\n<p><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 <code class=\"inline-code\">.heart<\/code>, \u0435\u0441\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435  (<code class=\"inline-code\">drop-shadow(0 0 5px rgba(255, 0, 0, 0.8))<\/code>). \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 (<code class=\"inline-code\">.heart:hover<\/code>), \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u043f\u043b\u0430\u0432\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u2014 <code class=\"inline-code\">drop-shadow(0 0 15px rgba(255, 0, 0, 0.8))<\/code>.<\/p>\n \n<h2 class=\"wp-block-heading has-text-align-center\">index.html<\/h2>\n\n<pre class=\"wp-block-code lang-html line-numbers\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n  &lt;meta name=\"robots\" content=\"noindex, nofollow\" \/>\n  &lt;meta charset=\"UTF-8\" \/>\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  &lt;title>Animated heart with realistic heartbeat and hover effect, built with pure CSS&lt;\/title>\n  &lt;link rel=\"icon\" type=\"image\/png\" href=\"favicon.png\">\n  &lt;link rel=\"stylesheet\" href=\".\/style.css\" \/>\n&lt;\/head>\n\n&lt;body>\n  &lt;div class=\"wrap\">\n    &lt;div class=\"heart_wrap\" aria-hidden=\"true\">\n      &lt;svg class=\"heart\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        &lt;defs>\n          &lt;linearGradient id=\"heartGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            &lt;stop offset=\"0%\" stop-color=\"#db4f4f\">\n              &lt;animate attributeName=\"stop-color\" values=\"#db4f4f;#ff0000;#db4f4f\" dur=\"1.8s\"\n                repeatCount=\"indefinite\" \/>\n            &lt;\/stop>\n            &lt;stop offset=\"100%\" stop-color=\"#cc0000\">\n              &lt;animate attributeName=\"stop-color\" values=\"#cc0000;#ff3030;#cc0000\" dur=\"1.8s\"\n                repeatCount=\"indefinite\" \/>\n            &lt;\/stop>\n          &lt;\/linearGradient>\n        &lt;\/defs>\n        &lt;path\n          d=\"M26.996 12.898c-.064-2.207-1.084-4.021-2.527-5.13-1.856-1.428-4.415-1.69-6.542-.132-.702.516-1.359 1.23-1.927 2.168-.568-.938-1.224-1.652-1.927-2.167-2.127-1.559-4.685-1.297-6.542.132-1.444 1.109-2.463 2.923-2.527 5.13-.035 1.172.145 2.48.788 3.803 1.01 2.077 5.755 6.695 10.171 10.683l.035.038.002-.002.002.002.036-.038c4.415-3.987 9.159-8.605 10.17-10.683.644-1.323.822-2.632.788-3.804z\"\n          fill=\"url(#heartGradient)\" \/>\n      &lt;\/svg>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n \n\n<h2 class=\"wp-block-heading has-text-align-center\">style.css<\/h2>\n\n<pre class=\"wp-block-code lang-css line-numbers\"><code>* {\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  background: #000000;\n}\n\n.wrap {\n  display: grid;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n}\n\n.heart_wrap {\n  width: 190px;\n  height: 190px;\n}\n\n.heart {\n  animation: heartbeatSlow 1.3s infinite ease-in-out;\n  transform-origin: 50% 50%;\n  transition: all 0.3s ease-in-out;\n  filter: drop-shadow(0 0 0px rgba(255, 0, 0, 0));\n  cursor: pointer;\n}\n\n.heart:hover {\n  animation: heartbeatFast 0.85s infinite cubic-bezier(0.55, 0.05, 0.4, 0.95);\n  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8));\n}\n\n\/* slow heartbeat *\/\n@keyframes heartbeatSlow {\n  0% {\n    transform: scale(1);\n  }\n\n  14% {\n    transform: scale(1.16);\n  }\n\n  28% {\n    transform: scale(1);\n  }\n\n  42% {\n    transform: scale(1.1);\n  }\n\n  70% {\n    transform: scale(1);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n\/* fast heartbeat *\/\n@keyframes heartbeatFast {\n  0% {\n    transform: scale(1);\n  }\n\n  15% {\n    transform: scale(1.12);\n  }\n\n  30% {\n    transform: scale(1.25);\n  }\n\n  45% {\n    transform: scale(1.1);\n  }\n\n  60% {\n    transform: scale(1.22);\n  }\n\n  80% {\n    transform: scale(1.05);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n<\/code><\/pre>\n<div class=\"blog_post_links_with_code\">\n<p><a style=\"color: var(--live_text_color);\" href=\"https:\/\/animated-heart-svg-css.vercel.app\/\" target=\"_blank\" rel=\"noopener\">LIVE<\/a>&nbsp;&nbsp;&nbsp;<a href=\"https:\/\/codepen.io\/AndrewShedov\/pen\/PwZmYYR\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>&nbsp;&nbsp;&nbsp;<a href=\"https:\/\/github.com\/AndrewShedov\/animated-heart--svg-css\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<\/div>\n\n<div class=\"browserstack_testing__announcement___wrap\">\n         <div class=\"browserstack_testing__announcement\">\n            <div class=\"browserstack_testing__announcement___top\">\n               <p>\u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0432 <\/p>\n            <\/div>\n            <div class=\"browserstack_testing__announcement___bottom\">\n               <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 -1.5 31 33\">\n               <g fill=\"none\" fill-rule=\"evenodd\"> <\/g>\n               <g>\n                  <path d=\"m31.0344828 15.5172414c0 8.5701882-6.9470532 15.5172414-15.5172414 15.5172414-8.56989423 0-15.5172414-6.9470532-15.5172414-15.5172414 0-8.56989423 6.94734717-15.5172414 15.5172414-15.5172414 8.5701882 0 15.5172414 6.94734717 15.5172414 15.5172414\" fill=\"#ecb360\"><\/path>\n                  <path d=\"m26.8965517 13.9655172c0 7.7128847-6.0213369 13.9655173-13.4482758 13.9655173-7.42722227 0-13.4482759-6.2526326-13.4482759-13.9655173 0-7.71288459 6.02105363-13.9655172 13.4482759-13.9655172 7.4269389 0 13.4482758 6.25263261 13.4482758 13.9655172\" fill=\"#d76835\"><\/path>\n                  <path d=\"m27.9310345 12.4136422c0 6.8560652-5.3263006 12.413944-11.8969855 12.413944-6.5698174 0-11.89611797-5.5578788-11.89611797-12.413944 0-6.85576335 5.32630057-12.4136422 11.89611797-12.4136422 6.5706849 0 11.8969855 5.55787885 11.8969855 12.4136422\" fill=\"#d33a41\"><\/path>\n                  <path d=\"m26.8965517 13.4484262c0 6.2843054-4.8632703 11.37916-10.8622124 11.37916-5.9989422 0-10.86192551-5.0948546-10.86192551-11.37916 0-6.28490677 4.86298331-11.37946068 10.86192551-11.37946068 5.9989421 0 10.8622124 5.09455391 10.8622124 11.37946068\" fill=\"#b6cb46\"><\/path>\n                  <path d=\"m25.862069 14.4826111c0 5.7133106-4.6316645 10.3449751-10.3449751 10.3449751-5.71301565 0-10.34468011-4.6316645-10.34468011-10.3449751 0-5.71331065 4.63166446-10.34468007 10.34468011-10.34468007 5.7133106 0 10.3449751 4.63136942 10.3449751 10.34468007\" fill=\"#66ad4a\"><\/path>\n                  <path d=\"m21.7241379 12.4137931c0 4.5706247-3.7052373 8.2758621-8.275862 8.2758621-4.57090515 0-8.27586211-3.7052374-8.27586211-8.2758621 0-4.57062469 3.70495696-8.27586207 8.27586211-8.27586207 4.5706247 0 8.275862 3.70523738 8.275862 8.27586207\" fill=\"#aed7dc\"><\/path>\n                  <path d=\"m22.7586207 11.3793103c0 3.9991764-3.2419755 7.2413794-7.2415259 7.2413794-3.9995505 0-7.24123273-3.242203-7.24123273-7.2413794 0-3.99946945 3.24168223-7.24137927 7.24123273-7.24137927 3.9995504 0 7.2415259 3.24190982 7.2415259 7.24137927\" fill=\"#5bb1cf\"><\/path>\n                  <path d=\"m22.7586207 11.8963967c0 3.7136422-2.7788402 6.724293-6.2068966 6.724293s-6.2068965-3.0106508-6.2068965-6.724293c0-3.71333217 2.7788401-6.72398291 6.2068965-6.72398291s6.2068966 3.01065074 6.2068966 6.72398291\" fill=\"#25a8c3\"><\/path>\n                  <path d=\"m20.6896552 12.9308813c0 3.1423524-2.315869 5.6898084-5.1725531 5.6898084-2.8564055 0-5.1722745-2.547456-5.1722745-5.6898084 0-3.14235241 2.315869-5.68950199 5.1722745-5.68950199 2.8566841 0 5.1725531 2.54714958 5.1725531 5.68950199\"><\/path>\n                  <path d=\"m15.5171021 18.6206897c-2.8564055 0-5.1722745-2.547456-5.1722745-5.6898084 0-3.14235241 2.315869-5.68950199 5.1722745-5.68950199 2.8566841 0 5.1725531 2.54714958 5.1725531 5.68950199 0 3.1423524-2.315869 5.6898084-5.1725531 5.6898084z\" fill=\"#1b1a18\"><\/path>\n                  <path d=\"m18.3395432 11.2904163c-.4920811.8231975-1.4595626 1.299291-2.16129 1.062668-.7017274-.2363383-.8715674-1.0956984-.3798654-1.9191807.4920811-.82348231 1.4595626-1.29929107 2.16129-1.06295279s.8715674 1.09569839.3798654 1.91946549\" fill=\"#fffffe\"><\/path>\n               <\/g>\n               <\/svg>\n               <p>BrowserStack<\/p>\n            <\/div>\n            <a href=\"https:\/\/www.browserstack.com\/\" target=\"blank\" rel=\"noopener\" aria-label=\"\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 browserstack\">\n            <\/a>\n         <\/div>\n      <\/div>\n ","protected":false},"excerpt":{"rendered":"\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0434\u0446\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f HTML, CSS \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u0443\u043b\u044c\u0441\u0430\u0446\u0438\u044f \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \"\u0431\u0438\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0434\u0446\u0430\" (\u043f\u0443\u043b\u044c\u0441\u0430\u0446\u0438\u044f), \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0447\u0438\u0441\u0442\u043e\u0433\u043e CSS. \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e animation. \u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442: \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 &lt;svg class=\"heart\"&gt; \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0430 @keyframes: heartbeatSlow (\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u0431\u0438\u0435\u043d\u0438\u0435, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u0438 heartbeatFast (\u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0431\u0438\u0435\u043d\u0438\u0435, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438). \u042d\u0442\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e transform: scale(...), \u0434\u043b\u044f [&hellip;]","protected":false},"author":1,"featured_media":3637,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10,13,54],"tags":[],"class_list":["post-3563","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-animation","category-animation-css","category--svg"],"_links":{"self":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts\/3563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/comments?post=3563"}],"version-history":[{"count":85,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts\/3563\/revisions"}],"predecessor-version":[{"id":4372,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts\/3563\/revisions\/4372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/media\/3637"}],"wp:attachment":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/media?parent=3563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/categories?post=3563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/tags?post=3563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}