Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Mart</title> <link rel='stylesheet' href='css/style.css'> </head> <body> <div class="logo"> <svg viewBox="0 0 435.6 141.4"> <path id="Letter_M" class="color1" d="M0.7,140.2l0.1-138L47,68.4L93.3,2.2V140h-8L10.9,34.3v40.1" /> <path id="Letter_A" class="color2" d="M118.6,141.2l55.2-139L224,140h-12l-18.4-51.5h-43.9l16.1-42.2" /> <path id="Letter_R" class="color3" d="M249.3,141.2V2.2h23.1c0,0,35-1.8,45,35.1c1,3.6,1.3,7.4,0.9,11.2c-1.4,16.4-11.2,30.8-25.9,38.1l30.1,53.4h-8l-34.1-57.4c0,0,18.1-2,28.1-24.1h-50.2V44.4" /> <path id="Letter_T" class="color4" d="M435.6,2.2h-87.8v10H392v128.2h8V47.3" /> </svg> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js'></script> <script src="js/index.js"></script> </body> </html>
*{ margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } html { overflow: hidden; } body{ display: flex; justify-content: center; align-items: center; flex-direction: column; opacity: 0; width: 100%; height: 100%; background-color: #111116; font-family: 'myFirstFont'; color: azure; font-size: 1em; letter-spacing: 1px; user-select: none; } body.ready { opacity: 1; } .logo { display: flex; justify-content: center; align-items: center; } .logo svg { width: 20vw; margin-bottom: 20px; } .logo path { fill: none; stroke-width: 1.5; } /* ##### Colors for the logo ##### */ .color1 {stroke: #3EB373;} .color2 {stroke: #BE2F39;} .color3 {stroke: #2283BC;} .color4 {stroke: #ED8E3F;}
var logoAnimation = (function () { var mart_letters = document.querySelectorAll('.logo path'); var logoTimeline = anime.timeline({ autoplay: false }); logoTimeline .add({ targets: mart_letters, strokeDashoffset: [anime.setDashoffset, 0], easing: 'easeInOutSine', duration: 1000, delay: function(el, i) { return i * 250 }, offset:0 }) function init() { document.body.classList.add('ready'); logoTimeline.play(); } return { init: init } })(); window.onload = function () { logoAnimation.init(); }