{"id":944,"date":"2026-05-09T11:32:31","date_gmt":"2026-05-09T11:32:31","guid":{"rendered":"https:\/\/gebrexiabher.net\/?page_id=944"},"modified":"2026-05-10T15:11:08","modified_gmt":"2026-05-10T15:11:08","slug":"my-custom-html-code-svg-animated","status":"publish","type":"project","link":"https:\/\/gebrexiabher.net\/index.php\/project\/my-custom-html-code-svg-animated\/","title":{"rendered":"my custom HTML code svg animated"},"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 looks great !<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>this looks great !<\/p>\n","protected":false},"author":1,"featured_media":956,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"<!-- wp:html -->\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<!-- \/wp:html -->","_et_gb_content_width":"","footnotes":""},"project_category":[15,14],"project_tag":[],"class_list":["post-944","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-code","project_category-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/project\/944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/types\/project"}],"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=944"}],"version-history":[{"count":3,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/project\/944\/revisions"}],"predecessor-version":[{"id":947,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/project\/944\/revisions\/947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/media\/956"}],"wp:attachment":[{"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/media?parent=944"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/project_category?post=944"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/gebrexiabher.net\/index.php\/wp-json\/wp\/v2\/project_tag?post=944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}