Tor Network Visualization

An interactive, cyberpunk-styled visualization of how the Tor network protects user privacy through onion routing.

Live Demo

View the live demo: Tor Network Visualization

Overview

This project provides an educational, browser-based visualization of the Tor network's core privacy mechanism. Using a cyberpunk aesthetic with neon colors and sleek animations, it demonstrates how data packets travel through Tor's three-relay circuit system with layered encryption.

The animation walks users through each step of the Tor routing process, from initial encryption to final destination, making complex privacy concepts visually accessible.

Features

• Interactive Animation: Step-by-step visualization of how data packets traverse the Tor network
• Cyberpunk Aesthetic: Neon color scheme, grid backgrounds, and animated elements
• Educational Tooltips: Detailed information about each component of the Tor network
• Speed Controls: User can adjust animation speed to better understand the process
• Responsive Design: Works across desktop and mobile devices
• No Dependencies: Pure HTML, CSS, and vanilla JavaScript - no frameworks required

How It Works

The visualization demonstrates the following Tor network concepts:

1. Data Preparation: How the Tor Browser prepares data with multiple layers of encryption
2. Entry/Guard Node: The first relay that knows your IP but not your destination
3. Middle Node: The bridge relay that knows neither source nor destination
4. Exit Node: The final relay that connects to the destination but doesn't know the origin
5. Hidden Services: How .onion sites maintain end-to-end encryption within the Tor network
6. Return Path: How data returns through the same circuit securely

Usage

Simply open the HTML file in any modern web browser. No installation or setup required.

$ git clone https://github.com/DoingFedTime/TorAnimationHTML.git
$ cd tor-network-visualization
$ open index.html

Controls

• Play/Pause: Control the animation playback
• Restart: Reset the animation to the beginning
• Speed Slider: Adjust the animation speed (1x-5x)

Technical Implementation

• Animation: Uses CSS transitions and JavaScript for smooth, performant animations
• Visualization: Custom-built network visualization using absolute positioning and CSS transforms
• Tooltips: Contextual information appears on hover for educational purposes
• Responsive Design: Flexbox and responsive units ensure compatibility across device sizes

Educational Value

This visualization serves as a teaching tool for:

• Privacy enthusiasts learning about Tor's architecture
• Cybersecurity students studying anonymous communication
• General audiences interested in how online privacy works
• OPSEC and OSINT professionals teaching network security concepts

Customization

You can easily customize aspects of the visualization:

• Colors: Modify the CSS variables in the :root selector
• Timing: Adjust the baseStepDuration variable in the JavaScript
• Content: Update the descriptions in the getStepDescription() function

Browser Compatibility

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

About The Author

Created by Sam Bent, OSINT & OPSEC Specialist. Find more resources and content at:

• YouTube Channel

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by the important privacy work of the Tor Project

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request