Website Header SVG Animation

Developer
Jimmy Van Der Sleen
Size
3,991 Kb
Views
4,048
  1. Website Header SVG Animation Previews
  2. Website Header SVG Animation HTML Codes
  3. Website Header SVG Animation CSS Codes

How do I make an website header svg animation?

What is a website header svg animation? How do you make a website header svg animation? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.

Website Header SVG Animation Previews
IQ Test

Website Header SVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Website Header SVG Animation</title> <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="head-text"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 638.3 72.9" style="enable-background:new 0 0 638.3 72.9;" xml:space="preserve"> <g id="n2"> <path d="M638.3,1.4v57.5h-5.5l-17.7-47.9v47.9h-4.7V1.4h5.5l17.7,47.9V1.4H638.3z"/> </g> <g id="e3"> <path d="M585.9,6.1v21.7h12.6v4.7h-12.6v21.7h12.6v4.7h-17.2V1.4h17.2v4.7H585.9z"/> </g> <g id="e2"> <path d="M556.7,6.1v21.7h12.6v4.7h-12.6v21.7h12.6v4.7h-17.2V1.4h17.2v4.7H556.7z"/> </g> <g id="l"> <path d="M543,54.2v4.7h-19.3V1.4h4.7v52.8H543z"/> </g> <g id="s"> <path d="M493.8,12.5c0,3.9,3.2,9.4,9.5,16.5c6.2,5.7,9.3,11.9,9.3,18.6c0,4.1-1.2,7.3-3.6,9.4s-5.4,3.2-8.9,3.2c-3,0-5.7-1-8.1-3 c-2.3-2-3.9-4.4-4.8-7.3l4.7-1.5c1.3,4,4.1,6.2,8.2,6.4c4.8,0,7.3-2.5,7.3-7.6c0-4.5-3.3-10.1-10-16.7c-5.9-6-8.9-11.9-8.9-17.9 c0.1-7.5,4-11.7,11.6-12.6c3.3,0,6,0.9,8,2.8c2.1,1.9,3.1,3.9,3.1,6l-4.9,1c-0.1-3.3-2.3-5-6.5-5C495.8,5.7,493.8,8.2,493.8,12.5z" /> </g> <g id="r"> <path d="M439.9,58.9l-6.7-26.4h-7.6v26.4H421V1.4h12.3c4,0,7,1.2,9.1,3.7c2.1,2.5,3.2,5.1,3.2,7.8v8.2c-0.2,2.9-1.1,5.3-2.7,7.2 c-1.6,1.9-3.3,3.1-5,3.5l7.8,27H439.9z M425.7,27.8h7.6c2.1,0,3.9-0.7,5.4-2.2c1.5-1.5,2.2-3.3,2.2-5.4v-6.5c0-2.1-0.7-3.9-2.2-5.4 c-1.5-1.5-3.3-2.2-5.4-2.2h-7.6V27.8z"/> </g> <g id="e1"> <path d="M396.4,6.1v21.7H409v4.7h-12.6v21.7H409v4.7h-17.2V1.4H409v4.7H396.4z"/> </g> <g id="d"> <path d="M367.5,1.2c4,0,7,1.2,9.2,3.6c2.1,2.4,3.2,5.3,3.2,8.8v33.8c0,3.9-1.1,6.7-3.4,8.6c-2.3,1.9-5.2,2.8-9,2.8h-12V1.2H367.5z M375.1,13.4c0-1.9-0.7-3.7-2.1-5.3c-1.4-1.6-3.3-2.4-5.5-2.4h-7.3v48.2h7.3c2.1,0,3.8-0.5,5.3-1.5c1.5-1,2.3-2.7,2.3-5.1V13.4z"/> </g> <g id="n1"> <path d="M310.7,1.4v57.5h-5.5l-17.7-47.9v47.9h-4.7V1.4h5.5L306,49.4V1.4H310.7z"/> </g> <g id="a"> <path d="M268.3,58.9l-2.7-14.1h-12.9L250,58.9h-4.6l11-57.7h5.5l11,57.7H268.3z M264.5,40.1l-5.3-32.2l-5.3,32.2H264.5z"/> </g> <g id="v"> <path d="M238.2,1.5l-10.9,57.4h-5.6L210.8,1.5h4.6l9.1,48.2l9.1-48.2H238.2z"/> </g> <g id="y"> <path d="M170.5,1.4L161.4,35v23.9h-4.7V35l-9.1-33.6h4.4l7.1,27.9l7.1-27.9H170.5z"/> </g> <g id="m1"> <path d="M82,1.4v57.5h-4.7V13.4l-14,45.4h-6.2L43.1,13.5v45.4h-4.7V1.4h6.3l15.6,52.1L75.7,1.4H82z"/> </g> <g id="m2"> <path d="M137.6,1.4v57.5h-4.7V13.4l-14,45.4h-6.2L98.7,13.5v45.4H94V1.4h6.3l15.6,52.1l15.5-52.1H137.6z"/> </g> <g id="i"> <path d="M21.7,1.4h4.7v57.5h-4.7V1.4z"/> </g> <g id="j"> <path d="M9.6,1.3v60.4c0,7.5-3.2,11.2-9.6,11.2v-4.7c3.3,0,5-2.5,5-7.5V1.3H9.6z"/> </g> </svg> <p>developer . designer . creator</p> </div> <div class="links"></div> <div class="rechts"></div>
</header>
<div class="filler"></div>
</body>
</html>

Website Header SVG Animation - Script Codes CSS Codes

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Lato', sans-serif; font-weight: 400;
}
header { width: 100%; height: 100vh; background-color: #333; position: relative; background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?q=80&fm=jpg&s=79978a74e55792a7a5182ba0c0aa4e25); background-size: cover; background-position: center top;
}
header .head-text { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
header .head-text svg { width: 80%; max-width: 1200px; margin: 0 auto; display: block;
}
header .head-text #j, header .head-text #i, header .head-text #m1, header .head-text #m2, header .head-text #y, header .head-text #v, header .head-text #a, header .head-text #n1, header .head-text #d, header .head-text #e1, header .head-text #r, header .head-text #s, header .head-text #l, header .head-text #e2, header .head-text #e3, header .head-text #n2 { fill: transparent; stroke: #fff; stroke-dasharray: 643px; stroke-dashoffset: 643px; -webkit-animation: borderani 5s forwards, stokeFill 4s 1s forwards; animation: borderani 5s forwards, stokeFill 4s 1s forwards;
}
@-webkit-keyframes borderani { to { stroke-dashoffset: 0; }
}
@keyframes borderani { to { stroke-dashoffset: 0; }
}
@-webkit-keyframes stokeFill { to { fill: #fff; fill-opacity: 1; stroke: transparent; }
}
@keyframes stokeFill { to { fill: #fff; fill-opacity: 1; stroke: transparent; }
}
header .head-text p { color: #fff; text-align: center;
}
header .links { width: 0; height: 0; bottom: 0px; left: 0; border-top: 100px solid transparent; border-left: 50vw solid #fff; border-bottom: 0px solid transparent; position: absolute;
}
header .rechts { width: 0; height: 0; bottom: 0px; right: 0; border-top: 100px solid transparent; border-right: 50vw solid #fff; border-bottom: 0px solid transparent; position: absolute;
}
.filler { height: 1000px;
}
Website Header SVG Animation - Script Codes
Website Header SVG Animation - Script Codes
Home Page Home
Developer Jimmy Van Der Sleen
Username sjimster
Uploaded January 15, 2023
Rating 3
Size 3,991 Kb
Views 4,048
Do you need developer help for Website Header SVG Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jimmy Van Der Sleen (sjimster) Script Codes
Name
Toggle Hamburger Menu
Checkbox menu, pure CSS
List 3d scroll
3D picture carousel css
SCSS BEM Tabs system
Custom GoogleMaps
Glow menu
Simple image slider
SoundCloud API user
Css 3D Cube try-out
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!