Building Infinite Mandelbrot Set Zoom with Vanilla HTML CSS JS

CSS conic gradients. Custom properties. Zero JavaScript. I built a login page where the border rotates continuously—on hover, the card expands smoothly and the form appears. The animation runs entirely on CSS, no frameworks, no scripts. The effect relies on a custom property '--a' animated from 0deg to 360deg, applied to two overlapping 'repeating-conic-gradient' layers. On hover, the inner container transitions inset values, giving the illusion of a seamless reveal. Every detail gradient angle, transition curve, inset shift—was tuned to feel intentional, not just decorative. Video of the interaction is attached.   GitHub: https://lnkd.in/g9cZXF8F If you were to push a CSS property to its limit, which one would you choose and why? #CSS #FrontendDevelopment #WebDesign #HTMLCSS #CreativeCoding #WebDevelopment #Coding #Developer

🚀 Just Built an Interactive Image Editor using JavaScript & Canvas API! Excited to share my latest project where I explored real-time image processing directly in the browser. I implemented features like brightness, contrast, blur, grayscale, and custom presets like vintage, drama, and cyberpunk 🎨 🔧 What I used: • HTML, CSS, JavaScript • Canvas API for image manipulation • Dynamic sliders & preset system 🧠 What I learned: • How Canvas rendering works • Applying multiple filters dynamically • Handling image uploads & real-time updates • Improving UI/UX with presets 🌐 Live Demo (Vercel):https://lnkd.in/duafXkRB 💻 GitHub Repo:https://lnkd.in/djensb-R Would love your feedback! 🙌 Sheryians Coding School Sheryians Coding School Community Sarthak Sharma Ankur Prajapati Ritik Rajput Devendra Dhote #WebDevelopment #JavaScript #Frontend #Projects #Learning #BuildInPublic

Built a 3D loader with pure CSS. No JavaScript. No libraries. Most users view a loader as a necessary interruption. I view it as an opportunity to craft a meaningful experience. 6 faces 6 independent glow cycles 1 seamless 3D rotation 0 lines of JavaScript Under 5KB 60fps on mobile In an era dominated by heavy frameworks, pure CSS continues to demonstrate remarkable capability. Watch the loader in action in the video attached. Explore the code on GitHub: https://lnkd.in/gZ-wPsug Simple spinner or intentional animation — which approach better respects the user’s time? #CSSArt #WebDevelopment #Frontend #3DAnimation #PureCSS #CreativeCoding

I used to think CSS was just colors and fonts. Today, I built 9 animated shapes using pure HTML and CSS. No JavaScript. No libraries. Just code. What I learned: clip-path creates any geometric shape. border-radius can morph into a blob. box-shadow and text-shadow create glow effects. animation-delay staggers movement like a wave. One HTML file. Zero dependencies. The fundamentals are never boring when you see them move on screen. GitHub: https://lnkd.in/gei4mMiJ What CSS concept surprised you the most? Drop it in the comments. #HTML #CSS #Frontend #WebDevelopment #CSSAnimation #100DaysOfCode #Programming #WebDesign #CodeNewbie #LearningInPublic

I used to stare at sorting algorithm animations and think — why is this so hard to follow? So I built one myself. Meet AlgoView. It's an interactive algorithm visualizer I built entirely in vanilla JavaScript — no frameworks, just me, the DOM, and a lot of console.logs at 2am. What it does: - Visualizes 6 sorting algorithms in real time - Shows you a step-by-step explanation as it runs - Dual view — Canvas + Array so you see both at once - Performance metrics + complexity comparison built in -Sound effects & keyboard shortcuts (yes, really) -Works on mobile too Honestly, building this was one of those projects where I learned more than I expected. Getting the animation timing right, syncing the explanations with each step, making it actually feel smooth — way harder than it looks. But also way more satisfying when it finally worked. 😅 If you're learning DSA or just want to see what bubble sort actually looks like — go check it out. 🔗 Live: https://lnkd.in/gA8YcgTE 💻 Code: https://lnkd.in/ghYkeTW3 Drop a comment if you've built something similar — always curious how others approached it! #JavaScript #VanillaJS #WebDev #DSA #OpenSource #Frontend #BuildInPublic #Portfolio

While I’ve been enjoying making JS and 3D stuff (WebGL) lately, returning to pure CSS (mainly for performance) reminds me of the amazing interactive effects you can achieve without JavaScript. For this effect, the "main characters" making it all possible are CSS variables and the :has() pseudo-class. Design courtesy of Cherry Bomb Creative Co. I’m collaborating with them on a very special upcoming project—stay tuned for more in the coming weeks! #css #webdesign #creativecoding #csstricks #webanimation #interactive #csspseudoclass #csslayout #csseffects

Happy St. Patrick's Day! ☘️ I built a small interactive web experience for the occasion — a pot of gold you can actually click. What I practiced with this project: • CSS keyframe animations & physics-style coin arcs • Dynamic DOM manipulation with vanilla JS • SVG illustration entirely in code • Deployed via GitHub Pages in under 5 minutes Sometimes the best way to sharpen your skills is to build something fun and ship it. Try it here →[https://lnkd.in/g3jcGzcn] #WebDevelopment #JavaScript #FrontendDev #BuildInPublic #StPatricksDay #100DaysOfCode #OpenSource

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day36 🚀 Project: Animated Star Rating System 📌 What I built Today I built an Animated Star Rating UI using HTML, CSS, and JavaScript. Users can rate from 1 to 5 stars, see instant feedback messages based on their rating, and edit their rating after submitting. The interface includes smooth hover effects, glowing stars, and pop animations for a more interactive user experience. 🛠 Technologies Used HTML5 CSS3 (Animations, Transitions, Gradient UI) JavaScript (DOM Manipulation & Event Handling) ⚠ Challenge I faced Creating a dynamic rating system where stars react visually on hover and click while also displaying different feedback messages for each rating. ✅ How I solved it Used radio inputs with CSS selectors to control star highlighting and combined them with JavaScript DOM manipulation to toggle between the rating widget and the thank-you message. 💬 Open to feedback and suggestions 🚀 🔗 Project link in comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #HTML5 #CSS3 #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #UIDesign #StarRating

𝐏𝐫𝐨𝐣𝐞𝐜𝐭 𝐔𝐩𝐝𝐚𝐭𝐞: 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒 & 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧 After working on my JavaScript skills, I built a simple yet engaging project -an animated download button using HTML, CSS, and JavaScript. This project focuses on creating a smooth user experience. When the button is clicked, it triggers an animation that visually represents a download process. The button expands, a progress-like effect runs using CSS animations, and after a few seconds, it changes into a “Completed” state with an updated icon. Through this project, I practiced: • DOM manipulation in JavaScript • Event handling • Using setTimeout for timed actions • CSS animations and transitions • Creating interactive UI elements It’s a small project, but it helped me understand how frontend technologies work together to create dynamic and user-friendly interfaces. Below is the link of the project: https://lnkd.in/dGkNSnqW #WebDevelopment #JavaScript #CSS #HTML #CodingJourney #LearnToCode #Programming #DeveloperLife

I built a real-time GLSL shader playground in 200 lines of JavaScript. In my very first Medium article I go over how shaders work and how math is being used to make these visuals. Resulting in art that feels almost... alive. Please be aware it is super nerdy / technical so if you follow me because of my art director work this article may not be for you lol- but you can for sure play around with the interactive playground I built! (linked below) 3 files. 20KB. Zero dependencies.