Use CSS animations instead of SMIL

assets/css/scss/app.scss

@@ -4,4 +4,5 @@
 @import "base/variables";
 @import "base/bootstrap";
 
+@import "layout/logo";
 @import "layout/content";

assets/css/scss/base/_bootstrap.scss

@@ -8,9 +8,19 @@ html {
     height: 100vh;
 }
 body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     height: 100vh;
     overflow: hidden;
+
+    &:after {
+        content: '';
+        box-sizing: border-box;
+        height: 100vh;
+        width: 100vw;
+        position: fixed;
+        border: (3 * $unit) solid white;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 99;
+    }
 }

assets/css/scss/base/_variables.scss

@@ -1,4 +1,7 @@
 @charset "UTF-8";
 
 $light: #fff;
-$dark:  #222;
+$dark: #222;
+
+$unit: 14px;
+$linkPadding: 10px;

assets/css/scss/layout/_content.scss

@@ -1,2 +1,72 @@
 @charset "UTF-8";
 
+%section {
+    position: absolute;
+    width: 50vw;
+    height: 100vh;
+    z-index: 2;
+
+    h2 {
+        position: absolute;
+        bottom: 3 * $unit;
+        width: calc(50vw - #{12 * $unit});
+        text-align: center;
+        margin: 0;
+        font-size: 3 * $unit;
+        font-weight: normal;
+        text-transform: uppercase;
+    }
+
+    ul {
+        padding: 0;
+        list-style: none;
+
+        li {
+            line-height: 3 * $unit - 2 * $linkPadding;
+            margin-bottom: $unit;
+            width: 50vw;
+
+            a {
+                display: block;
+                color: inherit;
+                padding: $linkPadding;
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+.posts {
+    @extend %section;
+    bottom: 0;
+    left: 0;
+    color: $dark;
+
+    h2 {
+        left: 6 * $unit;
+        transform: rotate(-90deg);
+        transform-origin: top left;
+    }
+    li {
+        background: $dark;
+        color: $light;
+        text-align: right;
+    }
+}
+.works {
+    @extend %section;
+    top: 0;
+    right: 0;
+    color: $light;
+
+    h2 {
+        right: 6 * $unit;
+        transform: rotate(90deg);
+        transform-origin: top right;
+    }
+    li {
+        background: $light;
+        color: $dark;
+        text-align: left;
+    }
+}

assets/css/scss/layout/_logo.scss

@@ -0,0 +1,87 @@
+.logo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    overflow: visible !important;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+}
+.logo__layer--dark {
+    animation: opacify 0.7s 0.7s forwards;
+}
+.logo__maskrect {
+    animation: showBackground 1.5s 1s forwards;
+    transform-origin: 100px 105px;
+}
+.logo__dot--1 {
+    animation: rectToDot1 .4s 2.5s forwards;
+}
+.logo__dot--2 {
+    animation: rectToDot2 .4s 2.5s forwards;
+}
+.logo__dot--3 {
+    animation: rectToDot3 .4s 2.5s forwards;
+}
+.logo__dot--4 {
+    animation: rectToDot4 .4s 2.5s forwards;
+}
+
+@keyframes opacify {
+    to {
+        fill-opacity: 1;
+    }
+}
+@keyframes showBackground {
+    30% {
+        height: 8000px;
+        y: -2077px;
+        width: 1px;
+    }
+    50% {
+        height: 8000px;
+        y: -2077px;
+        width: 4000px;
+        transform: rotate(0deg);
+    }
+    100% {
+        height: 8000px;
+        y: -2077px;
+        width: 4000px;
+        transform: rotate(-28.71deg);
+    }
+}
+@keyframes rectToDot1 {
+    to {
+        rx: 42px;
+        ry: 42px;
+        width: 42px;
+        x: 100px;
+    }
+}
+@keyframes rectToDot2 {
+    to {
+        rx: 42px;
+        ry: 42px;
+        width: 42px;
+        x: 158px;
+    }
+}
+@keyframes rectToDot3 {
+    to {
+        rx: 42px;
+        ry: 42px;
+        width: 42px;
+    }
+}
+@keyframes rectToDot4 {
+    from {
+        fill-opacity: 1;
+    }
+    to {
+        rx: 42px;
+        ry: 42px;
+        width: 42px;
+        x: 58px;
+        fill-opacity: 1;
+    }
+}

assets/js/app.js

@@ -0,0 +1,73 @@
+/*var loadedPosts,
+	loadedWorks,
+	posts = document.querySelector('.posts > ul'),
+	works = document.querySelector('.works > ul');
+
+// Fetch blog posts
+function fetchPosts(offset, soft) {
+	offset = typeof offset !== 'undefined' ? offset : 0;
+	soft = typeof soft !== 'undefined' ? soft : false;
+	if(!loadedPosts) {
+		loadPosts(offset, true);
+	} else {
+		var n = Math.min(offset + 10, loadedPosts.length);
+		for (var i = offset; i < n; i++) {
+			var post = loadedPosts[i],
+			dompost = document.createElement('li'),
+			domlink = document.createElement('a');
+			domlink.innerHTML = post.title;
+			domlink.setAttribute('href', 'http://blog.smarchal.com' + post.url);
+			dompost.appendChild(domlink);
+			posts.appendChild(dompost);
+		}
+	}
+}
+function loadPosts(offset, soft) {
+	var request = new XMLHttpRequest();
+	request.open('GET', 'http://blog.smarchal.com/posts.json', true);
+	request.onload = function() {
+		if (request.status >= 200 && request.status < 400) {
+			loadedPosts = JSON.parse(request.responseText)['posts'];
+			fetchPosts(offset, soft);
+		}
+	};
+	request.send();
+}
+
+// Fetch works
+function fetchWorks(offset, soft) {
+	offset = typeof offset !== 'undefined' ? offset : 0;
+	soft = typeof soft !== 'undefined' ? soft : false;
+	if(!loadedWorks) {
+		loadWorks(offset, true);
+	} else {
+		var n = Math.min(offset + 10, loadedWorks.length);
+		for (var i = offset; i < n; i++) {
+			var work = loadedWorks[i],
+			domwork = document.createElement('li'),
+			domlink = document.createElement('a');
+			domlink.innerHTML = work.title;
+			domlink.setAttribute('href', work.url);
+			domwork.appendChild(domlink);
+			works.appendChild(domwork);
+		}
+	}
+}
+function loadWorks(offset, soft) {
+	var request = new XMLHttpRequest();
+	request.open('GET', 'http://blog.smarchal.com/posts.json', true);
+	request.onload = function() {
+		if (request.status >= 200 && request.status < 400) {
+			loadedWorks = JSON.parse(request.responseText)['posts'];
+			fetchWorks(offset, soft);
+		}
+	};
+	request.send();
+}
+
+// Init
+function init() {
+	fetchPosts();
+	fetchWorks();
+}
+window.addEventListener('DOMContentLoaded', init, false);*/