SVG \u00c7izim Animasyonlu Hero<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;700;900&display=swap\" rel=\"stylesheet\">\n<style>\n \/* Font tan\u0131m\u0131 *\/\n body {\n font-family: 'Inter', sans-serif;\n }\n \/* SVG ve \u00c7izim Animasyonu *\/\n .drawing-svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 0; \/* \u0130\u00e7eri\u011fin arkas\u0131nda *\/\n stroke-linecap: round; \/* \u00c7izgi u\u00e7lar\u0131 yuvarlak *\/\n stroke-linejoin: round; \/* \u00c7izgi birle\u015fimleri yuvarlak *\/\n }\n .drawing-svg path,\n .drawing-svg polyline,\n .drawing-svg polygon {\n fill: none; \/* \u015eekillerin i\u00e7ini bo\u015f b\u0131rak *\/\n stroke-width: 1.5px; \/* \u00c7izgi kal\u0131nl\u0131\u011f\u0131 *\/\n \/* Ba\u015flang\u0131\u00e7ta \u00e7izgi g\u00f6r\u00fcnmez (JS ile ayarlanacak) *\/\n \/* stroke-dasharray ve stroke-dashoffset JS ile ayarlan\u0131r *\/\n }<\/p>\n<p> \/* \u00c7izim animasyonu *\/\n @keyframes draw {\n to {\n stroke-dashoffset: 0; \/* \u00c7izgiyi tamamen g\u00f6r\u00fcn\u00fcr yap *\/\n }\n }<\/p>\n<p> \/* Animasyonu tetiklemek i\u00e7in class (JS ile eklenecek) *\/\n .animate-draw {\n animation: draw 4s ease-out forwards; \/* Animasyon s\u00fcresi ve \u015fekli *\/\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-gray-900\"> <\/p>\n<section class=\"relative w-full min-h-screen flex items-center justify-center overflow-hidden text-white p-8\">\n<p> <svg class=\"drawing-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid slice\">\n <polyline id=\"geoPath1\" class=\"stroke-cyan-400\/70\" points=\"10,10 90,10 90,90 10,90 10,10\"><\/polyline> <path id=\"geoPath2\" class=\"stroke-pink-500\/70\" d=\"M 50,10 L 90,50 L 50,90 L 10,50 Z\"><\/path> <polyline id=\"geoPath3\" class=\"stroke-yellow-300\/70\" points=\"10,10 90,90\"><\/polyline> <polyline id=\"geoPath4\" class=\"stroke-lime-400\/70\" points=\"90,10 10,90\"><\/polyline> <polygon id=\"geoPath5\" class=\"stroke-indigo-400\/70\" points=\"50,30 60,50 50,70 40,50\"><\/polygon> <\/svg><\/p>\n<div class=\"relative z-10 text-center max-w-3xl mx-auto\">\n<h1 class=\"text-5xl sm:text-6xl md:text-7xl font-black mb-6 leading-tight drop-shadow-lg\">\n \u00c7izgisel Yarat\u0131c\u0131l\u0131k<br \/>\n <\/h1>\n<p class=\"text-lg md:text-xl text-gray-200 mb-10 font-light drop-shadow-sm\">\n Geometrik formlar\u0131n ad\u0131m ad\u0131m hayat buldu\u011fu dinamik ve estetik tasar\u0131mlar.\n <\/p>\n<p> <a href=\"#cizgiler\"\n class=\"inline-block border border-cyan-400\/50 hover:border-cyan-300 bg-cyan-900\/20 hover:bg-cyan-800\/30 text-cyan-100 font-semibold py-3 px-10 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-gray-900\"><br \/>\n \u00c7izgileri Takip Et<br \/>\n <\/a>\n <\/div>\n<\/section>\n<p> <script>\n \/\/ JavaScript ile SVG \u00c7izim Animasyonunu Ba\u015flatma\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Animasyon uygulanacak t\u00fcm SVG yollar\u0131n\u0131 se\u00e7\n const paths = document.querySelectorAll('.drawing-svg path, .drawing-svg polyline, .drawing-svg polygon');<\/p>\n<p> paths.forEach((path, index) => {\n \/\/ Her bir yolun toplam uzunlu\u011funu al\n const length = path.getTotalLength();<\/p>\n<p> \/\/ Ba\u015flang\u0131\u00e7ta \u00e7izgiyi gizle (dasharray ve dashoffset'i uzunlu\u011fa ayarla)\n path.style.strokeDasharray = length;\n path.style.strokeDashoffset = length;<\/p>\n<p> \/\/ Animasyonu tetiklemek i\u00e7in class'\u0131 k\u00fc\u00e7\u00fck bir gecikmeyle ekle\n \/\/ Farkl\u0131 gecikmelerle kademeli \u00e7izim efekti olu\u015ftur\n setTimeout(() => {\n path.classList.add('animate-draw');\n }, index * 300); \/\/ Her \u00e7izgi aras\u0131nda 300ms gecikme\n });\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1327","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1327"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1327"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1327"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1327,"date":"2025-04-12T23:49:42","date_gmt":"2025-04-12T20:49:42","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?landing_page=svg-cizim-animasyonlu-hero"},"modified":"2025-04-12T23:49:42","modified_gmt":"2025-04-12T20:49:42","slug":"svg-cizim-animasyonlu-hero","status":"publish","type":"landing_page","link":"https:\/\/mudosdigital.com\/tr\/store\/svg-cizim-animasyonlu-hero\/","title":{"rendered":"SVG \u00c7izim Animasyonlu Hero"},"content":{"rendered":"

\n
\n
\n
\n
\n SVG \u00c7izim Animasyonlu Hero<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;700;900&display=swap\" rel=\"stylesheet\">\n<style>\n \/* Font tan\u0131m\u0131 *\/\n body {\n font-family: 'Inter', sans-serif;\n }\n \/* SVG ve \u00c7izim Animasyonu *\/\n .drawing-svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 0; \/* \u0130\u00e7eri\u011fin arkas\u0131nda *\/\n stroke-linecap: round; \/* \u00c7izgi u\u00e7lar\u0131 yuvarlak *\/\n stroke-linejoin: round; \/* \u00c7izgi birle\u015fimleri yuvarlak *\/\n }\n .drawing-svg path,\n .drawing-svg polyline,\n .drawing-svg polygon {\n fill: none; \/* \u015eekillerin i\u00e7ini bo\u015f b\u0131rak *\/\n stroke-width: 1.5px; \/* \u00c7izgi kal\u0131nl\u0131\u011f\u0131 *\/\n \/* Ba\u015flang\u0131\u00e7ta \u00e7izgi g\u00f6r\u00fcnmez (JS ile ayarlanacak) *\/\n \/* stroke-dasharray ve stroke-dashoffset JS ile ayarlan\u0131r *\/\n }<\/p>\n<p> \/* \u00c7izim animasyonu *\/\n @keyframes draw {\n to {\n stroke-dashoffset: 0; \/* \u00c7izgiyi tamamen g\u00f6r\u00fcn\u00fcr yap *\/\n }\n }<\/p>\n<p> \/* Animasyonu tetiklemek i\u00e7in class (JS ile eklenecek) *\/\n .animate-draw {\n animation: draw 4s ease-out forwards; \/* Animasyon s\u00fcresi ve \u015fekli *\/\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-gray-900\"> <\/p>\n<section class=\"relative w-full min-h-screen flex items-center justify-center overflow-hidden text-white p-8\">\n<p> <svg class=\"drawing-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid slice\">\n <polyline id=\"geoPath1\" class=\"stroke-cyan-400\/70\" points=\"10,10 90,10 90,90 10,90 10,10\"><\/polyline> <path id=\"geoPath2\" class=\"stroke-pink-500\/70\" d=\"M 50,10 L 90,50 L 50,90 L 10,50 Z\"><\/path> <polyline id=\"geoPath3\" class=\"stroke-yellow-300\/70\" points=\"10,10 90,90\"><\/polyline> <polyline id=\"geoPath4\" class=\"stroke-lime-400\/70\" points=\"90,10 10,90\"><\/polyline> <polygon id=\"geoPath5\" class=\"stroke-indigo-400\/70\" points=\"50,30 60,50 50,70 40,50\"><\/polygon> <\/svg><\/p>\n<div class=\"relative z-10 text-center max-w-3xl mx-auto\">\n<h1 class=\"text-5xl sm:text-6xl md:text-7xl font-black mb-6 leading-tight drop-shadow-lg\">\n \u00c7izgisel Yarat\u0131c\u0131l\u0131k<br \/>\n <\/h1>\n<p class=\"text-lg md:text-xl text-gray-200 mb-10 font-light drop-shadow-sm\">\n Geometrik formlar\u0131n ad\u0131m ad\u0131m hayat buldu\u011fu dinamik ve estetik tasar\u0131mlar.\n <\/p>\n<p> <a href=\"#cizgiler\"\n class=\"inline-block border border-cyan-400\/50 hover:border-cyan-300 bg-cyan-900\/20 hover:bg-cyan-800\/30 text-cyan-100 font-semibold py-3 px-10 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-gray-900\"><br \/>\n \u00c7izgileri Takip Et<br \/>\n <\/a>\n <\/div>\n<\/section>\n<p> <script>\n \/\/ JavaScript ile SVG \u00c7izim Animasyonunu Ba\u015flatma\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Animasyon uygulanacak t\u00fcm SVG yollar\u0131n\u0131 se\u00e7\n const paths = document.querySelectorAll('.drawing-svg path, .drawing-svg polyline, .drawing-svg polygon');<\/p>\n<p> paths.forEach((path, index) => {\n \/\/ Her bir yolun toplam uzunlu\u011funu al\n const length = path.getTotalLength();<\/p>\n<p> \/\/ Ba\u015flang\u0131\u00e7ta \u00e7izgiyi gizle (dasharray ve dashoffset'i uzunlu\u011fa ayarla)\n path.style.strokeDasharray = length;\n path.style.strokeDashoffset = length;<\/p>\n<p> \/\/ Animasyonu tetiklemek i\u00e7in class'\u0131 k\u00fc\u00e7\u00fck bir gecikmeyle ekle\n \/\/ Farkl\u0131 gecikmelerle kademeli \u00e7izim efekti olu\u015ftur\n setTimeout(() => {\n path.classList.add('animate-draw');\n }, index * 300); \/\/ Her \u00e7izgi aras\u0131nda 300ms gecikme\n });\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1327","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1327"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1327"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1327"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}