Map SVG Animation
Infinity Carousal
July 23, 2022
Floating Icon section
July 24, 2022
CSS
.ns_map_container {
width: 100%;
position: relative;
z-index: 1;
}
.ns_map_location_container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#ns_map_container .ns_map_location {
list-style: none;
padding-left: 0;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
font-size: 2vw;
color: #f70000;
margin:0;
}
.ns_map_item_1 {
position: absolute;
top: 65.5%;
left: 20.3%;
}
.ns_map_item_2 {
position: absolute;
top: 36.7%;
left: 59.5%;
}
.ns_map_item_3 {
position: absolute;
top: 29.3%;
left: 75.2%;
}
.ns_map_item_4 {
position: absolute;
top: 70%;
left: 47.9%;
}
.ns_svg_container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ns_map_animation_line_1 {
animation: map-animation-line-1 2.25s linear;
animation-delay: .225s;
animation-fill-mode: both;
animation-iteration-count: infinite;
stroke-dashoffset: 730;
stroke-dasharray: 730;
}
.ns_map_animation_line {
fill: none;
stroke: #176839;
stroke-width: 4px;
stroke-linecap: round;
}
@keyframes map-animation-line-1 {
0% {
stroke-dashoffset: 730.75787px;
}
32% {
stroke-dashoffset: 1461.51575px;
}
48% {
stroke-dashoffset: 1461.51575px;
}
80% {
stroke-dashoffset: 2192.27362px;
}
100% {
stroke-dashoffset: 2192.27362px;
}
}
.ns_map_animation_line_2 {
animation: map-animation-line-2 2.25s linear;
animation-delay: .45s;
animation-fill-mode: both;
animation-iteration-count: infinite;
stroke-dashoffset: 1142.77173;
stroke-dasharray: 1142.77173;
}
@keyframes map-animation-line-2 {
0% {
stroke-dashoffset: 3428.31519px;
}
32% {
stroke-dashoffset: 2285.54346px;
}
48% {
stroke-dashoffset: 2285.54346px;
}
80% {
stroke-dashoffset: 1142.77173px;
}
100% {
stroke-dashoffset: 1142.77173px;
}
}
.ns_map_animation_line_3 {
animation: map-animation-line-3 2.25s linear;
animation-delay: .675s;
animation-fill-mode: both;
animation-iteration-count: infinite;
stroke-dashoffset: 514.70129;
stroke-dasharray: 514.70129;
}
@keyframes map-animation-line-3 {
0% {
stroke-dashoffset: 1544.10388px;
}
32% {
stroke-dashoffset: 1029.40259px;
}
48% {
stroke-dashoffset: 1029.40259px;
}
80% {
stroke-dashoffset: 514.70129px;
}
100% {
stroke-dashoffset: 514.70129px;
}
}
.ns_map_animation_line_4 {
animation: map-animation-line-4 2.25s linear;
animation-delay: .9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
stroke-dashoffset: 873.80542;
stroke-dasharray: 873.80542;
}
@keyframes map-animation-line-4 {
0% {
stroke-dashoffset: 2621.41626px;
}
32% {
stroke-dashoffset: 1747.61084px;
}
48% {
stroke-dashoffset: 1747.61084px;
}
80% {
stroke-dashoffset: 873.80542px;
}
100% {
stroke-dashoffset: 873.80542px;
}
}
.ns_map_animation_line_5 {
animation: map-animation-line-5 2.25s linear;
animation-delay: 1.125s;
animation-fill-mode: both;
animation-iteration-count: infinite;
stroke-dashoffset: 453.27414;
stroke-dasharray: 453.27414;
}
@keyframes map-animation-line-5 {
0% {
stroke-dashoffset: 453.27414px;
}
32% {
stroke-dashoffset: 906.54828px;
}
48% {
stroke-dashoffset: 906.54828px;
}
80% {
stroke-dashoffset: 1359.82242px;
}
100% {
stroke-dashoffset: 1359.82242px;
}
}
HTML
<!-- CDN for Font Awesome incase icon not available --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" type="text/css" href="style.css"> <div class="ns_map_container" id="ns_map_container"> <div class="ns_map_image"> <img src="map.jpg" width="100%" alt="map"> </div> <div class="ns_map_location_container"> <ul class="ns_map_location"> <li class="ns_map_item ns_map_item_1"><i class="fas fa-map-marker-alt"></i></li> <li class="ns_map_item ns_map_item_2"><i class="fas fa-map-marker-alt"></i></li> <li class="ns_map_item ns_map_item_3"><i class="fas fa-map-marker-alt"></i></li> <li class="ns_map_item ns_map_item_4"><i class="fas fa-map-marker-alt"></i></li> </ul> </div> <div class="ns_svg_container"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2560 1121" class="map-animation__lines"> <path class="ns_map_animation_line ns_map_animation_line_1" d="M539.381,790.562s155.286-71.484,360.553-54.6c194.736,16.02,345.506,102.514,345.506,102.514"></path> <path class="ns_map_animation_line ns_map_animation_line_2" d="M539.148,790.555S678.979,539.3,987.068,446.676c281.862-84.737,557.382,15.834,557.382,15.834"></path> <path class="ns_map_animation_line ns_map_animation_line_3" d="M1544.49,462.524s-44.81-16.782-117.77,40.158c-107.2,83.659-181.15,335.871-181.15,335.871"></path> <path class="ns_map_animation_line ns_map_animation_line_4" d="M1245.47,838.473s124.62-225.036,328.08-346.454c208.23-124.262,370.42-113.059,370.42-113.059"></path> <path class="ns_map_animation_line ns_map_animation_line_5" d="M1544.51,462.513S1687.22,325.38,1817.66,325.38c84.77,0,126.3,53.605,126.3,53.605"></path> </svg> </div> </div>
