{"id":948,"date":"2026-05-09T11:38:41","date_gmt":"2026-05-09T11:38:41","guid":{"rendered":"https:\/\/gebrexiabher.net\/?p=948"},"modified":"2026-05-09T11:38:42","modified_gmt":"2026-05-09T11:38:42","slug":"animated-svg-detour-stumbled-upon","status":"publish","type":"post","link":"https:\/\/gebrexiabher.net\/index.php\/2026\/05\/09\/animated-svg-detour-stumbled-upon\/","title":{"rendered":"animated svg detour &#8211; stumbled upon"},"content":{"rendered":"\n<div style=\"width: 100%; overflow: hidden; line-height: 0;\">\n  <svg width=\"100%\" height=\"250\" viewBox=\"0 0 1000 250\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <style>\n      .ocean-wave {\n        fill: none;\n        stroke-width: 4; \/* Thicker for better visibility *\/\n        stroke-linecap: round;\n        \/* Direct path animation for fluid movement *\/\n        animation-iteration-count: infinite;\n        animation-timing-function: ease-in-out;\n        animation-direction: alternate;\n      }\n\n      .w1 {\n        stroke: #007bff;\n        opacity: 0.8;\n        animation-name: wave-move-1;\n        animation-duration: 4s;\n      }\n\n      .w2 {\n        stroke: #00d4ff;\n        opacity: 0.5;\n        animation-name: wave-move-2;\n        animation-duration: 6s;\n      }\n\n      .w3 {\n        stroke: #6a11cb;\n        opacity: 0.3;\n        animation-name: wave-move-3;\n        animation-duration: 8s;\n      }\n\n      \/* These keyframes change the actual shape of the line *\/\n      @keyframes wave-move-1 {\n        from { d: path(\"M-50,120 C200,40 800,200 1050,120\"); }\n        to   { d: path(\"M-50,120 C200,200 800,40 1050,120\"); }\n      }\n\n      @keyframes wave-move-2 {\n        from { d: path(\"M-50,130 C250,60 750,210 1050,130\"); }\n        to   { d: path(\"M-50,130 C250,210 750,60 1050,130\"); }\n      }\n\n      @keyframes wave-move-3 {\n        from { d: path(\"M-50,140 C300,80 700,220 1050,140\"); }\n        to   { d: path(\"M-50,140 C300,220 700,80 1050,140\"); }\n      }\n    <\/style>\n\n    <path class=\"ocean-wave w1\" d=\"M-50,120 C200,40 800,200 1050,120\" \/>\n    <path class=\"ocean-wave w2\" d=\"M-50,130 C250,60 750,210 1050,130\" \/>\n    <path class=\"ocean-wave w3\" d=\"M-50,140 C300,80 700,220 1050,140\" \/>\n  <\/svg>\n<\/div>\n\n\n\n<p>this didn&#8217;t take a minute for gemini AI to cook it up. the trick is getting the custom html into the page&#8230;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>this didn&#8217;t take a minute for gemini AI to cook it up. the trick is getting the custom html into the page&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-948","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/posts\/948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/comments?post=948"}],"version-history":[{"count":4,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/posts\/948\/revisions"}],"predecessor-version":[{"id":953,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/posts\/948\/revisions\/953"}],"wp:attachment":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/media?parent=948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/categories?post=948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/tags?post=948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}