html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id = "text"><span id = "on">When</span><span id = "sl"> Sololearn</span> <span id = "we"> brings</span> <span id = "all"> all</span><span id = "come"> coder</span><span id ="tg"> together</span></p>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="500.000000pt" height="200.000000pt" viewBox="0 0 500.000000 500.000000"
preserveAspectRatio="xMidYMid meet">
<g id ="s" transform="translate(-350.000000,00.000000) scale(9.0000,9.0000) ">
<path fill="#6CB94F"> <animate attributeName="d" begin = "1500ms" dur="3000ms" stroke="freeze" fill = "freeze" repeatCount="22" values= "M-12.853 200 c0 11 -2 8 14 0c0 3 17 -8 0 0c0 0 4 3 0 0c0 0 22 0 -4 0z;M54.224.853c-3.088 1.005-6.312 3.838-5.904 7.036c0 3.655 3.633 6.488 7.22 7.676c-2.815-3.244-4.813-7.264-3.042-11.696c.818-1.874 1.726-3.016 1.726-3.016z" ></animate></path>
<path fill="#158E9B"> <animate attributeName="d" begin = "5000ms" dur="3000ms" stroke="freeze" fill = "freeze" repeatCount="22" values= "M11.549 8.758 c14 5 3 4 0 8.863c3.224 -2.422 7.63 -1.234 10.854-1.599c0 0 0 0 0 0c-1.09-1.873-1.544-3.29-1.544-3.29z;M47.549 8.758c-1.226 3.198-.046 7.218 2.361 8.863c3.224 2.422 7.63 1.234 10.854-1.599c-4.405.823-9.22 0-11.671-3.975c-1.09-1.873-1.544-3.29-1.544-3.29z"></animate></path>
<path fill="#2FB7E9"> <animate attributeName="d" begin = "5500ms" dur="3000ms" stroke="freeze" fill = "freeze" repeatCount="22" values= "M5 0.855 c2 20 13 -12 0 0c0 6 22 0 -4 0c0 0 14 0 -3 0c0 45 -2 0 0 0c0 0 -3 -8 0 -4z;M50.455 18.855 c0 2.741 6.267 3.883 9.491 2.65c2.18-.868 3.815-3.244 4.178-5.94c.227-1.37-.045-2.513-.227-3.883c-1.59 4.431-5.177 7.538-9.809 7.767c-2.134-.137-3.633-.594-3.633-.594z"/></path>
<path fill="#EB58A0"> <animate attributeName="d" begin = "3000ms" dur="3000ms" stroke="freeze" fill = "freeze" repeatCount="22" values= "M100.549 -30.758 c3 4 -2 0 -17 8.863c3.224 2.422 -7.63 1.234 10.854-1.599c0 8 9 0 1 0c-1.09-1.873-1.544-3.29-1.544-3.29z; M61.31 21.688c3.496-.868 7.083-4.112 7.083-7.722c0-2.421-2.497-6.762-7.22-7.675c3.224 3.243 5.222 8.498 2.452 12.564c-1.226 1.782-2.316 2.833-2.316 2.833z" ></animate></path>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
background-color:black;
}
svg { width: 100%;
}
#soop{animation-delay: 11s;
-webkit-animation: spin 8s linear 8;
-moz-animation: spin 8s linear 8;
animation: spin 8s linear 8;
width: 100%;
animation-delay: 11s;
-webkit-animation: spin 8s linear 8;
-moz-animation: spin 8s linear 8;
animation: spin 8s linear 8;
}
#on{
color : #6CB94F;
}
#sl{
color :#158E9B;
}
#we{
color:#2FB7E9
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run