Custom Neon Lines Animation<\/title> \r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #custom-animation-screen {\r\n display: flex;\r\n justify-content: flex-start; \/* Inhalte an den linken Rand ausrichten *\/\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Hintergrund ist transparent *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Vertikale Neon-Linien *\/\r\n .custom-neon-lines-vertical {\r\n position: absolute;\r\n left: 25%; \/* Linien in der linken Bildschirmh\u00e4lfte platzieren *\/\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n height: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n .custom-neon-lines-vertical .custom-neon-line {\r\n width: 10px;\r\n height: 0;\r\n background-color: inherit;\r\n animation: custom-neon-line-vertical-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .custom-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .custom-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .custom-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .custom-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .custom-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animation *\/\r\n @keyframes custom-neon-line-vertical-animation {\r\n 0% { height: 0; transform: translateY(100vh); }\r\n 30% { height: 100%; transform: translateY(0); }\r\n 70% { height: 100%; transform: translateY(0); }\r\n 100% { height: 0; transform: translateY(-100vh); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"custom-animation-screen\">\r\n \r\n <div class=\"custom-neon-lines-vertical\">\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const verticalLines = document.querySelectorAll('.custom-neon-lines-vertical .custom-neon-line');\r\n\r\n \/\/ Vertikale Linien starten\r\n setTimeout(() => {\r\n verticalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`;\r\n });\r\n }, 500);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4fcdf22 e-flex e-con-boxed e-con e-parent\" data-id=\"4fcdf22\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8443a9a elementor-widget elementor-widget-html\" data-id=\"8443a9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Unique Neon Lines Animation<\/title>\r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #unique-animation-screen {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Hintergrund ist transparent *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Horizontale Neon-Linien *\/\r\n .unique-neon-lines-horizontal {\r\n position: absolute;\r\n top: 50%; \/* Positionierung in der Mitte des Bildschirms *\/\r\n left: 0;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1px; \/* Abstand zwischen Linien auf 1px gesetzt *\/\r\n }\r\n\r\n .unique-neon-lines-horizontal .unique-neon-line {\r\n height: 40px; \/* Dicke der Linien verdoppelt *\/\r\n width: 0; \/* Startbreite *\/\r\n background-color: inherit;\r\n animation: unique-neon-line-horizontal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .unique-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .unique-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .unique-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .unique-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .unique-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animation f\u00fcr horizontales Einlaufen *\/\r\n @keyframes unique-neon-line-horizontal-animation {\r\n 0% { width: 0; transform: translateX(-100vw); }\r\n 30% { width: 100%; transform: translateX(0); }\r\n 70% { width: 100%; transform: translateX(0); }\r\n 100% { width: 0; transform: translateX(100vw); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"unique-animation-screen\">\r\n \r\n <div class=\"unique-neon-lines-horizontal\">\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const horizontalLines = document.querySelectorAll('.unique-neon-lines-horizontal .unique-neon-line');\r\n\r\n \/\/ Linien starten nach 8 Sekunden Verz\u00f6gerung\r\n setTimeout(() => {\r\n horizontalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`; \/\/ Staffelung der Linien\r\n });\r\n }, 8000); \/\/ 8 Sekunden Verz\u00f6gerung f\u00fcr den Start\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-acc1b43 e-flex e-con-boxed e-con e-parent\" data-id=\"acc1b43\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5cf416b elementor-widget elementor-widget-html\" data-id=\"5cf416b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Diagonal Neon Lines Animation<\/title>\r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #custom-animation-screen {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Hintergrund ist transparent *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Diagonale Neon-Linien *\/\r\n .custom-neon-lines-diagonal {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px; \/* Abstand zwischen Linien *\/\r\n transform: rotate(45deg); \/* Diagonale Ausrichtung *\/\r\n }\r\n\r\n .custom-neon-lines-diagonal .custom-neon-line {\r\n height: 60px; \/* Dicke der Linien *\/\r\n width: 0; \/* Startbreite *\/\r\n background-color: inherit;\r\n animation: custom-neon-line-diagonal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .custom-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .custom-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .custom-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .custom-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .custom-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animation f\u00fcr diagonales Einlaufen *\/\r\n @keyframes custom-neon-line-diagonal-animation {\r\n 0% { width: 0; transform: translateX(-150vw); } \/* Starten au\u00dferhalb des oberen Bildschirms *\/\r\n 30% { width: 150vw; transform: translateX(0); } \/* Linien erreichen ihre volle Breite *\/\r\n 70% { width: 150vw; transform: translateX(0); } \/* Linien bleiben in Position *\/\r\n 100% { width: 200vw; transform: translateX(150vw); } \/* Linien laufen vollst\u00e4ndig nach unten aus *\/\r\n }\r\n\r\n \/* Anpassungen f\u00fcr kleine Bildschirme *\/\r\n @media (max-width: 768px) {\r\n .custom-neon-lines-diagonal .custom-neon-line {\r\n height: 40px; \/* Reduzierte H\u00f6he der Linien f\u00fcr schmale Bildschirme *\/\r\n }\r\n\r\n @keyframes custom-neon-line-diagonal-animation {\r\n 0% { width: 0; transform: translateX(-200vw); } \/* L\u00e4ngere Startposition *\/\r\n 30% { width: 200vw; transform: translateX(0); } \/* Angepasste L\u00e4nge *\/\r\n 70% { width: 200vw; transform: translateX(150vw); } \/* L\u00e4nge bleibt *\/\r\n 100% { width: 300vw; transform: translateX(250vw); } \/* L\u00e4ngere Endposition *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"custom-animation-screen\">\r\n \r\n <div class=\"custom-neon-lines-diagonal\">\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const diagonalLines = document.querySelectorAll('.custom-neon-lines-diagonal .custom-neon-line');\r\n\r\n \/\/ Linien starten nach 16 Sekunden Verz\u00f6gerung\r\n setTimeout(() => {\r\n diagonalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`; \/\/ Staffelung der Linien\r\n });\r\n }, 16000); \/\/ 16 Sekunden Verz\u00f6gerung f\u00fcr den Start\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-878cfb0 e-flex e-con-boxed e-con e-parent\" data-id=\"878cfb0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc073a elementor-widget elementor-widget-html\" data-id=\"1fc073a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Neon Line Animation<\/title>\r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #unique-animation-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent;\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Vertikale Linie *\/\r\n .vertical-line {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: 10px;\r\n height: 0;\r\n background-color: #F7D038; \/* Gelb *\/\r\n animation: vertical-line-grow 4s ease-in-out forwards, vertical-line-fade 4s ease-in-out 4s forwards;\r\n }\r\n\r\n \/* Horizontale Linie *\/\r\n .horizontal-line {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 10px;\r\n background-color: #F7D038; \/* Gelb *\/\r\n animation: horizontal-line-grow 4s ease-in-out 4s forwards, horizontal-line-fade 4s ease-in-out 8s forwards;\r\n }\r\n\r\n \/* Animation: Vertikale Linie w\u00e4chst *\/\r\n @keyframes vertical-line-grow {\r\n 0% {\r\n height: 0;\r\n }\r\n 100% {\r\n height: 50%;\r\n }\r\n }\r\n\r\n \/* Animation: Vertikale Linie verblasst *\/\r\n @keyframes vertical-line-fade {\r\n 0% {\r\n height: 50%;\r\n opacity: 1;\r\n }\r\n 100% {\r\n height: 50%;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* Animation: Horizontale Linie w\u00e4chst *\/\r\n @keyframes horizontal-line-grow {\r\n 0% {\r\n width: 0;\r\n }\r\n 100% {\r\n width: 50%;\r\n }\r\n }\r\n\r\n \/* Animation: Horizontale Linie verblasst *\/\r\n @keyframes horizontal-line-fade {\r\n 0% {\r\n width: 50%;\r\n opacity: 1;\r\n }\r\n 100% {\r\n width: 50%;\r\n opacity: 0;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"unique-animation-container\">\r\n \r\n <div class=\"vertical-line\"><\/div>\r\n \r\n <div class=\"horizontal-line\"><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c811d4f e-flex e-con-boxed e-con e-parent\" data-id=\"c811d4f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1a5f02 elementor-widget elementor-widget-html\" data-id=\"a1a5f02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Horizontale Neon-Linien (Transparent)<\/title>\r\n <style>\r\n \/* Allgemeiner Container mit transparentem Hintergrund *\/\r\n #custom-animation-screen {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Transparenter Hintergrund *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 10;\r\n }\r\n\r\n \/* Horizontale Neon-Linien von rechts nach links *\/\r\n .custom-neon-lines-horizontal {\r\n position: absolute;\r\n top: 10%; \/* Positionierung der Linien *\/\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px; \/* Abstand zwischen den Linien *\/\r\n z-index: 30;\r\n }\r\n\r\n .custom-neon-lines-horizontal .custom-neon-line {\r\n height: 20px; \/* St\u00e4rke der Linien *\/\r\n width: 0;\r\n background-color: inherit;\r\n animation: custom-neon-line-horizontal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused; \/* Start der Animation wird \u00fcber JavaScript gesteuert *\/\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .custom-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .custom-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .custom-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .custom-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .custom-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animationen f\u00fcr horizontale Linien von rechts nach links *\/\r\n @keyframes custom-neon-line-horizontal-animation {\r\n 0% { width: 0; transform: translateX(100vw); }\r\n 30% { width: 100%; transform: translateX(0); }\r\n 70% { width: 100%; transform: translateX(0); }\r\n 100% { width: 0; transform: translateX(-100vw); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"custom-animation-screen\">\r\n \r\n <div class=\"custom-neon-lines-horizontal\">\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const horizontalLines = document.querySelectorAll('.custom-neon-lines-horizontal .custom-neon-line');\r\n\r\n \/\/ Horizontale Linien (rechts nach links) starten\r\n setTimeout(() => {\r\n horizontalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`; \/\/ Gestaffelte Animation\r\n });\r\n }, 500); \/\/ Start nach 500 ms\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f909fc e-flex e-con-boxed e-con e-parent\" data-id=\"0f909fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0713a7 elementor-widget elementor-widget-html\" data-id=\"e0713a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Pixelweises Zeichnen<\/title>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.6.0\/lib\/p5.min.js\"><\/script>\r\n <style>\r\n body {\r\n margin: 0; padding: 0;\r\n background: #ccc; \/* nur als Beispiel *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<script>\r\nlet img;\r\nlet pixelSize = 0.5; \/\/ Faktor zur Vergr\u00f6\u00dferung (z.B. 4-fach)\r\n\r\nfunction preload() {\r\n \/\/ Bild laden (kann auch eine URL sein, z.B. \"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/d18d7da7-21dd-4a32-9000-f8aa51659dab-png.webp\")\r\n img = loadImage(\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/d18d7da7-21dd-4a32-9000-f8aa51659dab-png.webp\");\r\n}\r\n\r\nfunction setup() {\r\n \/\/ Canvas passend zur Bildgr\u00f6\u00dfe erstellen\r\n createCanvas(img.width * pixelSize, img.height * pixelSize);\r\n noSmooth(); \/\/ Keine Weichzeichnung \u2013 wichtig f\u00fcr den Pixel-Look\r\n noStroke(); \/\/ Wir zeichnen nur Farbfl\u00e4chen\r\n}\r\n\r\nfunction draw() {\r\n background(0);\r\n\r\n \/\/ Pixelarray laden\r\n img.loadPixels();\r\n\r\n \/\/ Schleife \u00fcber alle Pixel\r\n for (let y = 0; y < img.height; y++) {\r\n for (let x = 0; x < img.width; x++) {\r\n \/\/ Index im Pixel-Array\r\n let idx = 4 * (y * img.width + x);\r\n let r = img.pixels[idx + 0];\r\n let g = img.pixels[idx + 1];\r\n let b = img.pixels[idx + 2];\r\n \/\/ let a = img.pixels[idx + 3]; \/\/ Alpha, falls du es brauchst\r\n\r\n fill(r, g, b);\r\n rect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\r\n }\r\n }\r\n\r\n \/\/ Nach dem ersten Zeichnen kannst du noLoop() verwenden,\r\n \/\/ wenn sich das Bild nicht st\u00e4ndig aktualisieren soll:\r\n noLoop();\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30305df e-flex e-con-boxed e-con e-parent\" data-id=\"30305df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c3271e elementor-widget elementor-widget-html\" data-id=\"4c3271e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Pixelweises Zeichnen (unten rechts, responsive)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.6.0\/lib\/p5.min.js\"><\/script>\r\n <style>\r\n body {\r\n margin: 0; \r\n padding: 0;\r\n background: #ccc; \/* nur als Beispiel *\/\r\n height: 200vh; \/* extra H\u00f6he, um ggf. scrollen zu demonstrieren *\/\r\n }\r\n\r\n \/* Canvas: rechts unten andocken, \r\n bei Bedarf verkleinern, Seitenverh\u00e4ltnis beibehalten *\/\r\n canvas {\r\n position: absolute; \/* oder 'fixed', falls du beim Scrollen es immer sehen m\u00f6chtest *\/\r\n bottom: 0;\r\n right: 0;\r\n\r\n \/* Verhindert unsch\u00f6ne Skalierung:\r\n 'auto' stellt das Seitenverh\u00e4ltnis sicher,\r\n 'max-width' und 'max-height' begrenzen die Gr\u00f6\u00dfe am Smartphone\/kleinen Screens *\/\r\n width: auto !important;\r\n height: auto !important;\r\n max-width: 50%;\r\n max-height: 50%;\r\n\r\n \/* Pixelige Darstellung statt Weichzeichnen *\/\r\n image-rendering: pixelated;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<script>\r\nlet img;\r\nlet pixelSize = 0.5; \/\/ Faktor zur Vergr\u00f6\u00dferung\r\n\r\nfunction preload() {\r\n \/\/ Das Bild per URL laden\r\n img = loadImage(\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/DALL%C2%B7E-2025-01-12-19.26.59-A-pixel-art-of-a-slightly-dilapidated-house-with-neon-colored-lights-glowing-from-its-windows.-The-house-has-cracked-walls-and-an-old-weathered-roof.webp\");\r\n}\r\n\r\nfunction setup() {\r\n \/\/ Canvas mit (Breite * pixelSize) x (H\u00f6he * pixelSize)\r\n createCanvas(img.width * pixelSize, img.height * pixelSize);\r\n noSmooth(); \/\/ Keine Weichzeichnung\r\n noStroke(); \/\/ Keine Kontur\r\n}\r\n\r\nfunction draw() {\r\n background(0);\r\n\r\n img.loadPixels();\r\n\r\n \/\/ Zeichne das Bild Pixel f\u00fcr Pixel\r\n for (let y = 0; y < img.height; y++) {\r\n for (let x = 0; x < img.width; x++) {\r\n let idx = 4 * (y * img.width + x);\r\n let r = img.pixels[idx + 0];\r\n let g = img.pixels[idx + 1];\r\n let b = img.pixels[idx + 2];\r\n fill(r, g, b);\r\n rect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\r\n }\r\n }\r\n \r\n \/\/ Nur einmal zeichnen\r\n noLoop();\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3183509 e-flex e-con-boxed e-con e-parent\" data-id=\"3183509\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be86089 elementor-widget elementor-widget-html\" data-id=\"be86089\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Pixelweises Zeichnen2 (oben links, responsive)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.6.0\/lib\/p5.min.js\"><\/script>\r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background: #ccc; \/* nur als Beispiel *\/\r\n height: 200vh; \/* Extra H\u00f6he, damit man beim Scrollen den Effekt sieht *\/\r\n }\r\n canvas {\r\n position: absolute; \/* oben links anheften *\/\r\n top: 0;\r\n left: 0;\r\n\r\n \/* Responsives Verhalten:\r\n - Erh\u00e4lt Seitenverh\u00e4ltnis\r\n - Skaliert bis max. 50% der Bildschirmbreite\/-h\u00f6he *\/\r\n width: auto !important;\r\n height: auto !important;\r\n max-width: 50%;\r\n max-height: 50%;\r\n\r\n \/* Pixel-Look beibehalten *\/\r\n image-rendering: pixelated;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<script>\r\nlet img;\r\nlet pixelSize = 2; \/\/ Faktor zur Vergr\u00f6\u00dferung\r\n\r\nfunction preload() {\r\n \/\/ Bild per URL laden\r\n img = loadImage(\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/DALL%C2%B7E-2025-01-12-19.55.45-A-unique-pixel-art-illustration-of-the-moon-styled-after-1980s-classic-video-games-designed-with-blocky-low-resolution-aesthetics.-The-moon-is-furth.webp\");\r\n}\r\n\r\nfunction setup() {\r\n \/\/ Canvas mit (Breite * pixelSize) x (H\u00f6he * pixelSize)\r\n createCanvas(img.width * pixelSize, img.height * pixelSize);\r\n noSmooth(); \/\/ Keine Weichzeichnung\r\n noStroke(); \/\/ Keine Kontur\r\n}\r\n\r\nfunction draw() {\r\n background(0);\r\n\r\n \/\/ Pixelarray laden\r\n img.loadPixels();\r\n\r\n \/\/ Schleife \u00fcber alle Pixel\r\n for (let y = 0; y < img.height; y++) {\r\n for (let x = 0; x < img.width; x++) {\r\n let idx = 4 * (y * img.width + x);\r\n let r = img.pixels[idx + 0];\r\n let g = img.pixels[idx + 1];\r\n let b = img.pixels[idx + 2];\r\n fill(r, g, b);\r\n rect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\r\n }\r\n }\r\n\r\n \/\/ Nur einmal zeichnen\r\n noLoop();\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom Neon Lines Animation Unique Neon Lines Animation Diagonal Neon Lines Animation Neon Line Animation Horizontale Neon-Linien (Transparent) Pixelweises Zeichnen Pixelweises Zeichnen (unten rechts, responsive) Pixelweises Zeichnen2 (oben links, responsive)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"class_list":["post-13745","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/comments?post=13745"}],"version-history":[{"count":176,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13745\/revisions"}],"predecessor-version":[{"id":15379,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13745\/revisions\/15379"}],"wp:attachment":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/media?parent=13745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Custom Neon Lines Animation<\/title> \r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #custom-animation-screen {\r\n display: flex;\r\n justify-content: flex-start; \/* Inhalte an den linken Rand ausrichten *\/\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Hintergrund ist transparent *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Vertikale Neon-Linien *\/\r\n .custom-neon-lines-vertical {\r\n position: absolute;\r\n left: 25%; \/* Linien in der linken Bildschirmh\u00e4lfte platzieren *\/\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n height: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n .custom-neon-lines-vertical .custom-neon-line {\r\n width: 10px;\r\n height: 0;\r\n background-color: inherit;\r\n animation: custom-neon-line-vertical-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .custom-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .custom-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .custom-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .custom-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .custom-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animation *\/\r\n @keyframes custom-neon-line-vertical-animation {\r\n 0% { height: 0; transform: translateY(100vh); }\r\n 30% { height: 100%; transform: translateY(0); }\r\n 70% { height: 100%; transform: translateY(0); }\r\n 100% { height: 0; transform: translateY(-100vh); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"custom-animation-screen\">\r\n \r\n <div class=\"custom-neon-lines-vertical\">\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const verticalLines = document.querySelectorAll('.custom-neon-lines-vertical .custom-neon-line');\r\n\r\n \/\/ Vertikale Linien starten\r\n setTimeout(() => {\r\n verticalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`;\r\n });\r\n }, 500);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4fcdf22 e-flex e-con-boxed e-con e-parent\" data-id=\"4fcdf22\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8443a9a elementor-widget elementor-widget-html\" data-id=\"8443a9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Unique Neon Lines Animation<\/title>\r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #unique-animation-screen {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Hintergrund ist transparent *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Horizontale Neon-Linien *\/\r\n .unique-neon-lines-horizontal {\r\n position: absolute;\r\n top: 50%; \/* Positionierung in der Mitte des Bildschirms *\/\r\n left: 0;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1px; \/* Abstand zwischen Linien auf 1px gesetzt *\/\r\n }\r\n\r\n .unique-neon-lines-horizontal .unique-neon-line {\r\n height: 40px; \/* Dicke der Linien verdoppelt *\/\r\n width: 0; \/* Startbreite *\/\r\n background-color: inherit;\r\n animation: unique-neon-line-horizontal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .unique-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .unique-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .unique-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .unique-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .unique-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animation f\u00fcr horizontales Einlaufen *\/\r\n @keyframes unique-neon-line-horizontal-animation {\r\n 0% { width: 0; transform: translateX(-100vw); }\r\n 30% { width: 100%; transform: translateX(0); }\r\n 70% { width: 100%; transform: translateX(0); }\r\n 100% { width: 0; transform: translateX(100vw); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"unique-animation-screen\">\r\n \r\n <div class=\"unique-neon-lines-horizontal\">\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <div class=\"unique-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const horizontalLines = document.querySelectorAll('.unique-neon-lines-horizontal .unique-neon-line');\r\n\r\n \/\/ Linien starten nach 8 Sekunden Verz\u00f6gerung\r\n setTimeout(() => {\r\n horizontalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`; \/\/ Staffelung der Linien\r\n });\r\n }, 8000); \/\/ 8 Sekunden Verz\u00f6gerung f\u00fcr den Start\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-acc1b43 e-flex e-con-boxed e-con e-parent\" data-id=\"acc1b43\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5cf416b elementor-widget elementor-widget-html\" data-id=\"5cf416b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Diagonal Neon Lines Animation<\/title>\r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #custom-animation-screen {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Hintergrund ist transparent *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Diagonale Neon-Linien *\/\r\n .custom-neon-lines-diagonal {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px; \/* Abstand zwischen Linien *\/\r\n transform: rotate(45deg); \/* Diagonale Ausrichtung *\/\r\n }\r\n\r\n .custom-neon-lines-diagonal .custom-neon-line {\r\n height: 60px; \/* Dicke der Linien *\/\r\n width: 0; \/* Startbreite *\/\r\n background-color: inherit;\r\n animation: custom-neon-line-diagonal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .custom-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .custom-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .custom-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .custom-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .custom-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animation f\u00fcr diagonales Einlaufen *\/\r\n @keyframes custom-neon-line-diagonal-animation {\r\n 0% { width: 0; transform: translateX(-150vw); } \/* Starten au\u00dferhalb des oberen Bildschirms *\/\r\n 30% { width: 150vw; transform: translateX(0); } \/* Linien erreichen ihre volle Breite *\/\r\n 70% { width: 150vw; transform: translateX(0); } \/* Linien bleiben in Position *\/\r\n 100% { width: 200vw; transform: translateX(150vw); } \/* Linien laufen vollst\u00e4ndig nach unten aus *\/\r\n }\r\n\r\n \/* Anpassungen f\u00fcr kleine Bildschirme *\/\r\n @media (max-width: 768px) {\r\n .custom-neon-lines-diagonal .custom-neon-line {\r\n height: 40px; \/* Reduzierte H\u00f6he der Linien f\u00fcr schmale Bildschirme *\/\r\n }\r\n\r\n @keyframes custom-neon-line-diagonal-animation {\r\n 0% { width: 0; transform: translateX(-200vw); } \/* L\u00e4ngere Startposition *\/\r\n 30% { width: 200vw; transform: translateX(0); } \/* Angepasste L\u00e4nge *\/\r\n 70% { width: 200vw; transform: translateX(150vw); } \/* L\u00e4nge bleibt *\/\r\n 100% { width: 300vw; transform: translateX(250vw); } \/* L\u00e4ngere Endposition *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"custom-animation-screen\">\r\n \r\n <div class=\"custom-neon-lines-diagonal\">\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const diagonalLines = document.querySelectorAll('.custom-neon-lines-diagonal .custom-neon-line');\r\n\r\n \/\/ Linien starten nach 16 Sekunden Verz\u00f6gerung\r\n setTimeout(() => {\r\n diagonalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`; \/\/ Staffelung der Linien\r\n });\r\n }, 16000); \/\/ 16 Sekunden Verz\u00f6gerung f\u00fcr den Start\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-878cfb0 e-flex e-con-boxed e-con e-parent\" data-id=\"878cfb0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc073a elementor-widget elementor-widget-html\" data-id=\"1fc073a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Neon Line Animation<\/title>\r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #unique-animation-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent;\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n \/* Vertikale Linie *\/\r\n .vertical-line {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: 10px;\r\n height: 0;\r\n background-color: #F7D038; \/* Gelb *\/\r\n animation: vertical-line-grow 4s ease-in-out forwards, vertical-line-fade 4s ease-in-out 4s forwards;\r\n }\r\n\r\n \/* Horizontale Linie *\/\r\n .horizontal-line {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 10px;\r\n background-color: #F7D038; \/* Gelb *\/\r\n animation: horizontal-line-grow 4s ease-in-out 4s forwards, horizontal-line-fade 4s ease-in-out 8s forwards;\r\n }\r\n\r\n \/* Animation: Vertikale Linie w\u00e4chst *\/\r\n @keyframes vertical-line-grow {\r\n 0% {\r\n height: 0;\r\n }\r\n 100% {\r\n height: 50%;\r\n }\r\n }\r\n\r\n \/* Animation: Vertikale Linie verblasst *\/\r\n @keyframes vertical-line-fade {\r\n 0% {\r\n height: 50%;\r\n opacity: 1;\r\n }\r\n 100% {\r\n height: 50%;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* Animation: Horizontale Linie w\u00e4chst *\/\r\n @keyframes horizontal-line-grow {\r\n 0% {\r\n width: 0;\r\n }\r\n 100% {\r\n width: 50%;\r\n }\r\n }\r\n\r\n \/* Animation: Horizontale Linie verblasst *\/\r\n @keyframes horizontal-line-fade {\r\n 0% {\r\n width: 50%;\r\n opacity: 1;\r\n }\r\n 100% {\r\n width: 50%;\r\n opacity: 0;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"unique-animation-container\">\r\n \r\n <div class=\"vertical-line\"><\/div>\r\n \r\n <div class=\"horizontal-line\"><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c811d4f e-flex e-con-boxed e-con e-parent\" data-id=\"c811d4f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1a5f02 elementor-widget elementor-widget-html\" data-id=\"a1a5f02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Horizontale Neon-Linien (Transparent)<\/title>\r\n <style>\r\n \/* Allgemeiner Container mit transparentem Hintergrund *\/\r\n #custom-animation-screen {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent; \/* Transparenter Hintergrund *\/\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 10;\r\n }\r\n\r\n \/* Horizontale Neon-Linien von rechts nach links *\/\r\n .custom-neon-lines-horizontal {\r\n position: absolute;\r\n top: 10%; \/* Positionierung der Linien *\/\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px; \/* Abstand zwischen den Linien *\/\r\n z-index: 30;\r\n }\r\n\r\n .custom-neon-lines-horizontal .custom-neon-line {\r\n height: 20px; \/* St\u00e4rke der Linien *\/\r\n width: 0;\r\n background-color: inherit;\r\n animation: custom-neon-line-horizontal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused; \/* Start der Animation wird \u00fcber JavaScript gesteuert *\/\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .custom-neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .custom-neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .custom-neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .custom-neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .custom-neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animationen f\u00fcr horizontale Linien von rechts nach links *\/\r\n @keyframes custom-neon-line-horizontal-animation {\r\n 0% { width: 0; transform: translateX(100vw); }\r\n 30% { width: 100%; transform: translateX(0); }\r\n 70% { width: 100%; transform: translateX(0); }\r\n 100% { width: 0; transform: translateX(-100vw); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"custom-animation-screen\">\r\n \r\n <div class=\"custom-neon-lines-horizontal\">\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <div class=\"custom-neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const horizontalLines = document.querySelectorAll('.custom-neon-lines-horizontal .custom-neon-line');\r\n\r\n \/\/ Horizontale Linien (rechts nach links) starten\r\n setTimeout(() => {\r\n horizontalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`; \/\/ Gestaffelte Animation\r\n });\r\n }, 500); \/\/ Start nach 500 ms\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f909fc e-flex e-con-boxed e-con e-parent\" data-id=\"0f909fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0713a7 elementor-widget elementor-widget-html\" data-id=\"e0713a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Pixelweises Zeichnen<\/title>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.6.0\/lib\/p5.min.js\"><\/script>\r\n <style>\r\n body {\r\n margin: 0; padding: 0;\r\n background: #ccc; \/* nur als Beispiel *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<script>\r\nlet img;\r\nlet pixelSize = 0.5; \/\/ Faktor zur Vergr\u00f6\u00dferung (z.B. 4-fach)\r\n\r\nfunction preload() {\r\n \/\/ Bild laden (kann auch eine URL sein, z.B. \"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/d18d7da7-21dd-4a32-9000-f8aa51659dab-png.webp\")\r\n img = loadImage(\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/d18d7da7-21dd-4a32-9000-f8aa51659dab-png.webp\");\r\n}\r\n\r\nfunction setup() {\r\n \/\/ Canvas passend zur Bildgr\u00f6\u00dfe erstellen\r\n createCanvas(img.width * pixelSize, img.height * pixelSize);\r\n noSmooth(); \/\/ Keine Weichzeichnung \u2013 wichtig f\u00fcr den Pixel-Look\r\n noStroke(); \/\/ Wir zeichnen nur Farbfl\u00e4chen\r\n}\r\n\r\nfunction draw() {\r\n background(0);\r\n\r\n \/\/ Pixelarray laden\r\n img.loadPixels();\r\n\r\n \/\/ Schleife \u00fcber alle Pixel\r\n for (let y = 0; y < img.height; y++) {\r\n for (let x = 0; x < img.width; x++) {\r\n \/\/ Index im Pixel-Array\r\n let idx = 4 * (y * img.width + x);\r\n let r = img.pixels[idx + 0];\r\n let g = img.pixels[idx + 1];\r\n let b = img.pixels[idx + 2];\r\n \/\/ let a = img.pixels[idx + 3]; \/\/ Alpha, falls du es brauchst\r\n\r\n fill(r, g, b);\r\n rect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\r\n }\r\n }\r\n\r\n \/\/ Nach dem ersten Zeichnen kannst du noLoop() verwenden,\r\n \/\/ wenn sich das Bild nicht st\u00e4ndig aktualisieren soll:\r\n noLoop();\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30305df e-flex e-con-boxed e-con e-parent\" data-id=\"30305df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c3271e elementor-widget elementor-widget-html\" data-id=\"4c3271e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Pixelweises Zeichnen (unten rechts, responsive)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.6.0\/lib\/p5.min.js\"><\/script>\r\n <style>\r\n body {\r\n margin: 0; \r\n padding: 0;\r\n background: #ccc; \/* nur als Beispiel *\/\r\n height: 200vh; \/* extra H\u00f6he, um ggf. scrollen zu demonstrieren *\/\r\n }\r\n\r\n \/* Canvas: rechts unten andocken, \r\n bei Bedarf verkleinern, Seitenverh\u00e4ltnis beibehalten *\/\r\n canvas {\r\n position: absolute; \/* oder 'fixed', falls du beim Scrollen es immer sehen m\u00f6chtest *\/\r\n bottom: 0;\r\n right: 0;\r\n\r\n \/* Verhindert unsch\u00f6ne Skalierung:\r\n 'auto' stellt das Seitenverh\u00e4ltnis sicher,\r\n 'max-width' und 'max-height' begrenzen die Gr\u00f6\u00dfe am Smartphone\/kleinen Screens *\/\r\n width: auto !important;\r\n height: auto !important;\r\n max-width: 50%;\r\n max-height: 50%;\r\n\r\n \/* Pixelige Darstellung statt Weichzeichnen *\/\r\n image-rendering: pixelated;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<script>\r\nlet img;\r\nlet pixelSize = 0.5; \/\/ Faktor zur Vergr\u00f6\u00dferung\r\n\r\nfunction preload() {\r\n \/\/ Das Bild per URL laden\r\n img = loadImage(\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/DALL%C2%B7E-2025-01-12-19.26.59-A-pixel-art-of-a-slightly-dilapidated-house-with-neon-colored-lights-glowing-from-its-windows.-The-house-has-cracked-walls-and-an-old-weathered-roof.webp\");\r\n}\r\n\r\nfunction setup() {\r\n \/\/ Canvas mit (Breite * pixelSize) x (H\u00f6he * pixelSize)\r\n createCanvas(img.width * pixelSize, img.height * pixelSize);\r\n noSmooth(); \/\/ Keine Weichzeichnung\r\n noStroke(); \/\/ Keine Kontur\r\n}\r\n\r\nfunction draw() {\r\n background(0);\r\n\r\n img.loadPixels();\r\n\r\n \/\/ Zeichne das Bild Pixel f\u00fcr Pixel\r\n for (let y = 0; y < img.height; y++) {\r\n for (let x = 0; x < img.width; x++) {\r\n let idx = 4 * (y * img.width + x);\r\n let r = img.pixels[idx + 0];\r\n let g = img.pixels[idx + 1];\r\n let b = img.pixels[idx + 2];\r\n fill(r, g, b);\r\n rect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\r\n }\r\n }\r\n \r\n \/\/ Nur einmal zeichnen\r\n noLoop();\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3183509 e-flex e-con-boxed e-con e-parent\" data-id=\"3183509\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be86089 elementor-widget elementor-widget-html\" data-id=\"be86089\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Pixelweises Zeichnen2 (oben links, responsive)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.6.0\/lib\/p5.min.js\"><\/script>\r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background: #ccc; \/* nur als Beispiel *\/\r\n height: 200vh; \/* Extra H\u00f6he, damit man beim Scrollen den Effekt sieht *\/\r\n }\r\n canvas {\r\n position: absolute; \/* oben links anheften *\/\r\n top: 0;\r\n left: 0;\r\n\r\n \/* Responsives Verhalten:\r\n - Erh\u00e4lt Seitenverh\u00e4ltnis\r\n - Skaliert bis max. 50% der Bildschirmbreite\/-h\u00f6he *\/\r\n width: auto !important;\r\n height: auto !important;\r\n max-width: 50%;\r\n max-height: 50%;\r\n\r\n \/* Pixel-Look beibehalten *\/\r\n image-rendering: pixelated;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<script>\r\nlet img;\r\nlet pixelSize = 2; \/\/ Faktor zur Vergr\u00f6\u00dferung\r\n\r\nfunction preload() {\r\n \/\/ Bild per URL laden\r\n img = loadImage(\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/DALL%C2%B7E-2025-01-12-19.55.45-A-unique-pixel-art-illustration-of-the-moon-styled-after-1980s-classic-video-games-designed-with-blocky-low-resolution-aesthetics.-The-moon-is-furth.webp\");\r\n}\r\n\r\nfunction setup() {\r\n \/\/ Canvas mit (Breite * pixelSize) x (H\u00f6he * pixelSize)\r\n createCanvas(img.width * pixelSize, img.height * pixelSize);\r\n noSmooth(); \/\/ Keine Weichzeichnung\r\n noStroke(); \/\/ Keine Kontur\r\n}\r\n\r\nfunction draw() {\r\n background(0);\r\n\r\n \/\/ Pixelarray laden\r\n img.loadPixels();\r\n\r\n \/\/ Schleife \u00fcber alle Pixel\r\n for (let y = 0; y < img.height; y++) {\r\n for (let x = 0; x < img.width; x++) {\r\n let idx = 4 * (y * img.width + x);\r\n let r = img.pixels[idx + 0];\r\n let g = img.pixels[idx + 1];\r\n let b = img.pixels[idx + 2];\r\n fill(r, g, b);\r\n rect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\r\n }\r\n }\r\n\r\n \/\/ Nur einmal zeichnen\r\n noLoop();\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom Neon Lines Animation Unique Neon Lines Animation Diagonal Neon Lines Animation Neon Line Animation Horizontale Neon-Linien (Transparent) Pixelweises Zeichnen Pixelweises Zeichnen (unten rechts, responsive) Pixelweises Zeichnen2 (oben links, responsive)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"class_list":["post-13745","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/comments?post=13745"}],"version-history":[{"count":176,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13745\/revisions"}],"predecessor-version":[{"id":15379,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13745\/revisions\/15379"}],"wp:attachment":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/media?parent=13745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}