Kleine Animationen mit JavaScript und Inkscape
Wenn es darum geht, kreativ zu werden und visuell ansprechende Webinhalte zu kreieren, sind meine Lieblingstools JavaScript und Inkscape. Wir verwenden dazu Pfade, Blur-Effekte und ein wenig JavaScript/HTML Code. Bist du bereit? Dann los!
Erste Schritte mit Inkscape
Inkscape, eine Open-Source-Vektorgrafiksoftware, bietet viele Optionen zur Erstellung und Bearbeitung von Vektorbildern. Wir beginnen damit, zwei Pfade in Inkscape zu erstellen. Dazu verwenden wir das Werkzeug “Zeichnen” (Bézier-Kurven), das sich in der linken Menüleiste befindet. Wir können die Linien so ziehen, dass sie eine beliebige Form darstellen. In meinem Beispiel zeichne ich eine Wolke und einen Mond. Das sind Pfad 1 und 2. Mit ein wenig Übung klappt das ganz gut.
Nun kommt der spannende Teil! Wir erstellen Pfad drei und vier.. Dazu klicken wir auf unseren Mond/die Wolke und erstellen jeweils ein Duplikat. Diese Pfade werden später unsere “glühenden” Neonpfade sein. Hierfür aktivieren wir die Option “Gaussian Blur” im Menü “Filtereffekte”. Wir justieren den Unschärfe-Grad nach Belieben, um die Illusion des Leuchtens zu erzeugen.
Jetzt müssen wir noch die Pfade benennen. Unter Objekte / Layer und Objekte können wir die Objekteigenschaften des jeweiligen Pfades öffnen und die ID ändern. Im Screenshot sehr ihr die IDs, die ich verwendet habe.
Animieren mit AnimeJS
Nachdem wir unsere SVG-Datei erstellt und abgespeichert haben, ist es an der Zeit, uns JavaScript zuzuwenden. AnimeJS ist eine leichte JavaScript-Bibliothek für Animationen, die wir verwenden werden, um unserem Neonlicht Leben einzuhauchen.
Erstellen wir zuerst eine neue HTML-Datei namens “index.html”. In dieser Datei fügen wir unseren SVG-Code ein und verlinken unsere JavaScript-Datei “app.js”. Es sieht folgendermaßen aus:
<html>
<head>
<link href="./styles.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="./app.js"></script>
</head>
<body>
<div class="logo-container">
<svg viewBox="0 0 78.97628 61.290352" version="1.1" id="svg1" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs1">
<filter style="color-interpolation-filters:sRGB" id="filter2" x="-0.047540328" y="-0.054999476"
width="1.095086" height="1.1096366">
<feGaussianBlur stdDeviation="0.36231912" id="feGaussianBlur2" />
</filter>
<filter style="color-interpolation-filters:sRGB" id="filter3" x="-0.03672924" y="-0.079651603"
width="1.0734852" height="1.1593029">
<feGaussianBlur stdDeviation="0.4728177" id="feGaussianBlur3" />
</filter>
</defs>
<g id="layer1" transform="translate(-56.638428,-15.651801)">
<path
style="fill:none;stroke:#000000;stroke-width:0.108749px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 82.475659,58.727271 c 3.382929,-0.936652 3.54843,-1.239782 5.895946,-0.504233 1.931185,0.605099 2.340206,0.639749 4.171365,-0.05701 1.83116,-0.696755 3.910632,-0.219353 5.156771,0.179268 1.24614,0.39862 2.640629,0.570913 4.532409,0.08814 1.89178,-0.482771 2.95921,-0.748162 4.5784,-0.11709 1.61919,0.631072 2.03967,0.678087 3.19679,0.205646 1.15713,-0.472441 1.8814,-1.609969 2.06541,-2.287463 0.184,-0.677495 0.48617,-2.264587 -0.18373,-3.059078 -0.6699,-0.794489 -1.46237,-1.673363 -2.77865,-1.839605 -1.31628,-0.166241 -1.07175,0.05325 -1.60786,-0.434143 -0.53611,-0.487387 -0.75752,-1.274475 -0.80318,-1.969912 -0.0457,-0.695435 -0.72645,-2.565874 -2.4948,-3.575412 -1.76836,-1.009538 -2.80501,-1.497987 -4.644663,-1.442572 -1.839657,0.05542 -3.65942,0.880043 -4.498566,1.694528 -0.839144,0.814486 -1.632861,2.719857 -2.301287,3.059774 -0.668427,0.339915 -1.656751,0.183421 -2.924425,0.330377 -1.267674,0.146955 -2.474511,1.041421 -3.004417,1.655456 -0.529907,0.614037 -0.928209,2.035762 -1.604293,2.254162 -0.676084,0.218401 -1.132766,-0.0074 -2.270612,0.06165 -1.137845,0.069 -2.029545,0.635517 -2.403661,1.346815 -0.374115,0.711299 -0.917263,1.712023 -0.372239,3.014123 0.480105,1.147002 1.657068,1.535873 2.295292,1.396573 z"
id="cloud" />
<path
style="fill:none;stroke:#000000;stroke-width:0.108749px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 86.69078,50.5518 c 0,0 -2.964474,-1.55664 -3.903463,-3.332204 -0.93899,-1.775564 -1.241076,-2.9971 -1.204048,-3.726318 0.03915,-0.771104 0.387808,-1.313915 1.40425,-0.62303 1.01644,0.690886 1.770533,1.971278 3.523962,2.420749 1.753431,0.449471 4.68007,-0.388972 5.521505,-1.041817 0.841435,-0.652844 2.83122,-2.352289 3.233291,-5.102996 0.313658,-2.145844 -0.835188,-3.91533 -0.971613,-4.423362 -0.175519,-0.653877 0.185169,-1.343167 1.412216,-0.72794 1.261337,0.63242 2.378612,1.784044 2.802929,2.25154 0.507063,0.558664 1.525961,1.80401 1.865851,2.852882 0.14033,0.433034 0.80417,2.677127 0.60224,4.755925"
id="moon" />
<path
style="fill:none;stroke:#000000;stroke-width:0.108749px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter2)"
d="m 86.69078,50.5518 c 0,0 -2.964474,-1.55664 -3.903463,-3.332204 -0.93899,-1.775564 -1.241076,-2.9971 -1.204048,-3.726318 0.03915,-0.771104 0.387808,-1.313915 1.40425,-0.62303 1.01644,0.690886 1.770533,1.971278 3.523962,2.420749 1.753431,0.449471 4.68007,-0.388972 5.521505,-1.041817 0.841435,-0.652844 2.83122,-2.352289 3.233291,-5.102996 0.313658,-2.145844 -0.835188,-3.91533 -0.971613,-4.423362 -0.175519,-0.653877 0.185169,-1.343167 1.412216,-0.72794 1.261337,0.63242 2.378612,1.784044 2.802929,2.25154 0.507063,0.558664 1.525961,1.80401 1.865851,2.852882 0.14033,0.433034 0.80417,2.677127 0.60224,4.755925"
id="moon_blur" />
<path
style="fill:none;stroke:#000000;stroke-width:0.108749px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter3)"
d="m 82.475659,58.727271 c 3.382929,-0.936652 3.54843,-1.239782 5.895946,-0.504233 1.931185,0.605099 2.340206,0.639749 4.171365,-0.05701 1.83116,-0.696755 3.910632,-0.219353 5.156771,0.179268 1.24614,0.39862 2.640629,0.570913 4.532409,0.08814 1.89178,-0.482771 2.95921,-0.748162 4.5784,-0.11709 1.61919,0.631072 2.03967,0.678087 3.19679,0.205646 1.15713,-0.472441 1.8814,-1.609969 2.06541,-2.287463 0.184,-0.677495 0.48617,-2.264587 -0.18373,-3.059078 -0.6699,-0.794489 -1.46237,-1.673363 -2.77865,-1.839605 -1.31628,-0.166241 -1.07175,0.05325 -1.60786,-0.434143 -0.53611,-0.487387 -0.75752,-1.274475 -0.80318,-1.969912 -0.0457,-0.695435 -0.72645,-2.565874 -2.4948,-3.575412 -1.76836,-1.009538 -2.80501,-1.497987 -4.644663,-1.442572 -1.839657,0.05542 -3.65942,0.880043 -4.498566,1.694528 -0.839144,0.814486 -1.632861,2.719857 -2.301287,3.059774 -0.668427,0.339915 -1.656751,0.183421 -2.924425,0.330377 -1.267674,0.146955 -2.474511,1.041421 -3.004417,1.655456 -0.529907,0.614037 -0.928209,2.035762 -1.604293,2.254162 -0.676084,0.218401 -1.132766,-0.0074 -2.270612,0.06165 -1.137845,0.069 -2.029545,0.635517 -2.403661,1.346815 -0.374115,0.711299 -0.917263,1.712023 -0.372239,3.014123 0.480105,1.147002 1.657068,1.535873 2.295292,1.396573 z"
id="cloud_blur" />
</g>
</svg>
</div>
</body>
</html>
Anschließend erstellen wir eine JavaScript-Datei namens “app.js”. In dieser Datei nutzen wir AnimeJS, um unseren Neonpfaden eine animierte Ausstrahlung zu geben.
window.onload = function () {
config = {
"moon_dark": "#4a1d00",
"moon_bright": "#ffc645",
"cloud_dark": "#002626",
"cloud_bright": "#0ffdff",
}
function turn_bright(id, delay, dark, bright) {
setTimeout(() => {
anime({
targets: id,
stroke: [bright, dark, bright],
strokeWidth: [0.3],
duration: 100,
delay: delay,
easing: 'linear',
});
anime({
targets: id + '_blur',
stroke: [bright, dark, bright, dark, dark, bright],
opacity: [0.2, 0, 0.2, 0, 0, 0.2],
strokeWidth: [2],
duration: 200,
delay: delay + 100,
easing: 'linear',
});
}, Math.random() * 3000);
}
turn_bright("#moon", 100, config.moon_dark, config.moon_bright);
turn_bright("#cloud", 100, config.cloud_dark, config.cloud_bright);
setInterval(() => {
turn_bright("#moon", 100, config.moon_dark, config.moon_bright);
} , 2000);
setInterval(() => {
turn_bright("#cloud", 100, config.cloud_dark, config.cloud_bright);
}, 1000);
}
In diesem Code fügen wir eine Farbverlaufsanimation zu unserem Pfad hinzu, die von voller zu halber Sättigung und wieder zurück wechselt, um das typische Flackern eines Neonlichts zu erzeugen. Die Animation dauert 2 Sekunden und wiederholt sich in einer Endlosschleife.
Zuletzt noch ein paar kleine Styles, damit das Logo mittig sitzt und der Hintergrund dunkel ist. Dazu erstellen wir eine styles.css Datei mit folgendem Inhalt.
body {
background-color: #161a1d;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
svg {
width: 100vw;
}
Und voilà! Nun haben wir eine einfache, aber eindrucksvolle Neonlicht-Animation, die vollständig in JavaScript und Inkscape erstellt wurde. Ich hoffe, diese Anleitung hat dir einen Einblick gegeben, wie man diese Tools verwenden kann, um spannende und dynamische Webinhalte zu erstellen. Lass deiner Kreativität freien Lauf und viel Spaß beim Ausprobieren!
Von Joni, Juli 2024
