diff --git a/README.md b/README.md
index d05afe5..94a49eb 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
-<img src="static/logo-colored.svg" width=128 height=128 alt="logo" />
-
-# SDF-2D demo
+<h1>
+  <img src="static/logo-colored.svg" width="64" height="64" alt="SDF-2D logo" />
+  SDF-2D demo
+</h1>
 
 ![Deploy everything](https://github.com/schmelczerandras/sdf-2d-demo/workflows/Deploy%20everything/badge.svg)
 
diff --git a/package.json b/package.json
index ef8e644..4fd2c0f 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.3",
     "sass-loader": "^9.0.3",
-    "sdf-2d": "^0.3.0",
+    "sdf-2d": "^0.3.1",
     "source-map-loader": "^1.1.0",
     "svg-url-loader": "^6.0.0",
     "terser-webpack-plugin": "^2.3.8",
diff --git a/src/helper/mix.ts b/src/helper/mix.ts
deleted file mode 100644
index 16a76ed..0000000
--- a/src/helper/mix.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const mix = (from: number, to: number, q: number) => from + (to - from) * q;
diff --git a/src/helper/rgba.ts b/src/helper/rgba.ts
new file mode 100644
index 0000000..39aae1e
--- /dev/null
+++ b/src/helper/rgba.ts
@@ -0,0 +1,4 @@
+import { vec4 } from 'gl-matrix';
+
+export const rgba = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r, g, b, a);
diff --git a/src/helper/rgba255.ts b/src/helper/rgba255.ts
new file mode 100644
index 0000000..00b7f5a
--- /dev/null
+++ b/src/helper/rgba255.ts
@@ -0,0 +1,4 @@
+import { vec4 } from 'gl-matrix';
+
+export const rgba255 = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r / 255, g / 255, b / 255, a / 255);
diff --git a/src/index.html b/src/index.html
index 8e3d0f7..cf390e1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <title>SDF-2D demo</title>
 
-    <meta property="og:image:width" content="1438" />
-    <meta property="og:image:height" content="638" />
+    <meta property="og:image:width" content="1956" />
+    <meta property="og:image:height" content="937" />
     <meta property="og:url" content="https://sdf2d.schmelczer.dev" />
-    <meta property="og:image" content="https://sdf2d.schmelczer.dev/og-image.jpg" />
+    <meta property="og:image" content="https://sdf2d.schmelczer.dev/og-image.png" />
     <meta name="theme-color" content="#103783" />
     <meta
       name="description"
diff --git a/src/index.ts b/src/index.ts
index 7896910..432c8c8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,7 +4,7 @@ import '../static/favicons/favicon-16x16.png';
 import '../static/favicons/favicon-32x32.png';
 import '../static/favicons/favicon.ico';
 import '../static/logo-white.svg';
-import '../static/og-image.jpg';
+import '../static/og-image.png';
 import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
 import { BlobScene } from './scenes/blob/blob-scene';
diff --git a/src/scenes/blob/blob-scene.ts b/src/scenes/blob/blob-scene.ts
index 342ef5f..854448b 100644
--- a/src/scenes/blob/blob-scene.ts
+++ b/src/scenes/blob/blob-scene.ts
@@ -30,7 +30,7 @@ export class BlobScene implements Scene {
       ambientLight: rgb255(89, 25, 115),
       colorPalette: [
         rgb255(0, 0, 0),
-        rgb255(0, 0, 0),
+        rgb255(119, 143, 120),
         rgb255(119, 143, 120),
         rgb255(224, 96, 126),
       ],
diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts
index 1398b49..953d7f6 100644
--- a/src/scenes/rain/rain-scene.ts
+++ b/src/scenes/rain/rain-scene.ts
@@ -1,4 +1,4 @@
-import { vec2, vec3 } from 'gl-matrix';
+import { vec2 } from 'gl-matrix';
 import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
 import { rgb } from '../../helper/rgb';
@@ -34,13 +34,8 @@ export class RainScene implements Scene {
 
     this.renderer.setRuntimeSettings({
       ambientLight: rgb(0.2, 0.2, 0.2),
-      backgroundColor: vec3.fromValues(1, 1, 1),
-      colorPalette: [
-        rgb(1, 1, 1),
-        vec3.fromValues(0.3, 1, 1),
-        rgb(1, 1, 0),
-        rgb(0.3, 1, 1),
-      ],
+      backgroundColor: rgb(1, 1, 1),
+      colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)],
     });
 
     for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts
index 9aea2c6..2883c7e 100644
--- a/src/scenes/tunnel-scene.ts
+++ b/src/scenes/tunnel-scene.ts
@@ -5,6 +5,7 @@ import { last } from '../helper/last';
 import { prettyPrint } from '../helper/pretty-print';
 import { Random } from '../helper/random';
 import { rgb } from '../helper/rgb';
+import { rgba } from '../helper/rgba';
 import { Scene } from './scene';
 
 export class TunnelScene implements Scene {
@@ -78,7 +79,7 @@ export class TunnelScene implements Scene {
     this.renderer.setRuntimeSettings({
       isWorldInverted: true,
       ambientLight: rgb(0.35, 0.1, 0.45),
-      backgroundColor: rgb(1, 1, 1),
+      backgroundColor: rgba(1, 1, 1, 1),
       colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
     });
 
diff --git a/static/og-image.jpg b/static/og-image.jpg
deleted file mode 100644
index 93c8001..0000000
Binary files a/static/og-image.jpg and /dev/null differ
diff --git a/static/og-image.png b/static/og-image.png
new file mode 100644
index 0000000..029fe87
Binary files /dev/null and b/static/og-image.png differ