I want to remove the static lines/arro3ws and add moving lines to make it like a flowchart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Visionaries</title>
<style>
/* Overall Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0; /* Light background */
color: #333333; /* Dark text */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.flowchart-container {
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff; /* White background for the container */
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Light shadow */
position: relative;
}
.flowchart-title {
font-size: 36px; /* Larger font size for the title */
color: #000000; /* Black color for the title */
margin-bottom: 40px;
font-weight: 700;
text-transform: uppercase; /* Uppercase text for emphasis */
font-family: 'Roboto', sans-serif; /* Stylish font for title */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for text */
}
.flowchart {
display: flex;
align-items: center;
gap: 40px;
position: relative;
justify-content: center;
flex-wrap: wrap; /* Allows wrapping in case of smaller screens */
}
.database-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
position: relative;
}
.step {
background: linear-gradient(135deg, #a8d5ba, #68c1a8); /* Greenish gradient background */
color: #333333; /* Dark text */
padding: 15px 20px;
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow */
width: 150px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
text-decoration: none;
transition: all 0.3s ease; /* Smooth transition for hover effects */
font-family: 'Arial', sans-serif; /* Creative font for steps */
cursor: pointer; /* Pointer cursor for clickable elements */
}
.step:hover {
background: linear-gradient(135deg, #68c1a8, #a8d5ba); /* Inverted gradient on hover */
transform: scale(1.05); /* Slightly enlarge on hover */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}
.step h3 {
margin: 10px 0;
font-size: 16px; /* Slightly larger font size */
font-weight: 600;
color: #333333; /* Dark text color */
}
.step p {
margin: 5px 0;
font-size: 12px; /* Slightly smaller font size */
color: #666666; /* Slightly lighter gray for text */
}
.step i {
font-size: 24px; /* Larger icon size */
margin-bottom: 10px;
color: #ffcc00; /* Yellow color for icons */
}
/* SVG lines */
.line {
stroke: #333;
stroke-width: 2;
fill: none;
stroke-dasharray: 5, 5;
transition: stroke-dasharray 0.3s ease; /* Smooth line transition */
}
.line.active {
stroke-dasharray: none; /* Remove dashes for moving effect */
animation: moveLine 2s infinite linear; /* Animate the line */
}
@keyframes moveLine {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 1000;
}
}
</style>
</head>
<body>
<div class="flowchart-container">
<div class="flowchart-title">Data Visionaries</div> <!-- Updated Title -->
<div class="flowchart">
<!-- Database Container -->
<div class="database-container">
<!-- Existing Databases -->
<div class="step" id="trading-dump">
<i class="fas fa-database"></i> <!-- Font Awesome Icon -->
<h3>Trading Dump</h3>
<p>Database</p>
</div>
<div class="step" id="advisory-dump">
<i class="fas fa-database"></i> <!-- Font Awesome Icon -->
<h3>Advisory Dump</h3>
<p>Database</p>
</div>
<!-- New Databases -->
<div class="step" id="batch-volume-vs">
<i class="fas fa-database"></i> <!-- Font Awesome Icon -->
<h3>Batch Volume VS</h3>
<p>Database</p>
</div>
<div class="step" id="user-enrolled">
<i class="fas fa-database"></i> <!-- Font Awesome Icon -->
<h3>User Enrolled</h3>
<p>Database</p>
</div>
<div class="step" id="stock-activities">
<i class="fas fa-database"></i> <!-- Font Awesome Icon -->
<h3>Stock Activities</h3>
<p>Database</p>
</div>
</div>
<!-- Python Script Step -->
<div class="step" id="process-py">
<i class="fas fa-code"></i> <!-- Font Awesome Icon -->
<h3>process.py</h3>
<p>Python Script</p>
<p>Random Forest Model</p>
</div>
<!-- Prediction Step -->
<div class="step" id="predicted-output">
<i class="fas fa-chart-line"></i> <!-- Font Awesome Icon -->
<h3>Predicted Output</h3>
<p>Result</p>
</div>
<!-- SVG Lines -->
<svg class="lines" width="100%" height="100%" style="position: absolute; top: 0; left: 0; pointer-events: none;">
<line id="line-trading-dump" class="line" x1="150" y1="50" x2="500" y2="50"></line>
<line id="line-advisory-dump" class="line" x1="150" y1="150" x2="500" y2="150"></line>
<line id="line-batch-volume-vs" class="line" x1="150" y1="250" x2="500" y2="250"></line>
<line id="line-user-enrolled" class="line" x1="150" y1="350" x2="500" y2="350"></line>
<line id="line-stock-activities" class="line" x1="150" y1="450" x2="500" y2="450"></line>
</svg>
</div>
</div>
<!-- Link to Font Awesome for icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script>
document.querySelectorAll('.line').forEach(line => {
line.addEventListener('click', () => {
line.classList.toggle('active'); // Toggle movement animation
});
});
</script>
</body>
</html>
how can i add moving arrow line to this?
I want to remove the static lines/arro3ws and add moving lines to make it like a flowchart
New contributor
surfshark amlan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2