Social_Connection_Chart_Component
자연에서 영감을 받은 유기적 디자인의 중간 복잡성 소셜 연결 차트 구성 요소로, 검은색, 흰색 및 단일 밝은 액센트 색상을 특징으로 합니다. 데이트 및 소셜 플랫폼을 위해 설계된 이 제품은 흐르는 선과 사용자 아바타로 연결을 시각적으로 보여줍니다. 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-50 flex items-center justify-center dark:bg-gray-900 overflow-hidden">
<div class="max-w-6xl w-full mx-auto p-6 md:p-8 rounded-3xl bg-white shadow-xl dark:bg-gray-800 transition-colors duration-300">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white transition-colors duration-300 tracking-tight leading-tight">
Your Connection Ecosystem
</h2>
<button class="px-4 py-2 rounded-full text-sm font-semibold bg-pink-500 text-white shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 transition-all duration-300 transform hover:scale-105">
Expand View
</button>
</div>
<p class="text-md md:text-lg mb-8 text-gray-600 dark:text-gray-300 transition-colors duration-300 leading-snug">
Visualize the organic flow of your social connections and discover new possibilities within your network.
</p>
<div class="relative w-full h-80 sm:h-96 md:h-[500px] lg:h-[600px] flex items-center justify-center p-4 border border-gray-200 rounded-2xl dark:border-gray-700 overflow-hidden bg-gradient-to-br from-gray-50 to-white dark:from-gray-850 dark:to-gray-800">
<!-- Main Node -->
<div class="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="You" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-pink-500 shadow-lg ring ring-pink-500 ring-opacity-50 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:ring-8" />
<span class="mt-2 text-sm md:text-base font-semibold text-gray-800 dark:text-white transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-2 whitespace-nowrap">You</span>
</div>
<!-- Connection Nodes (Organic Placement) -->
<div class="absolute z-10 w-full h-full">
<!-- Path 1 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 48 50 C 30 20, 10 30, 25 15" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute top-[10%] left-[18%] md:top-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Alice" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Alice</span>
</div>
<!-- Path 2 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 52 50 C 70 80, 85 70, 75 85" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute bottom-[10%] right-[18%] md:bottom-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Bob" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Bob</span>
</div>
<!-- Path 3 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 48 C 20 70, 30 90, 15 75" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute bottom-[10%] left-[18%] md:bottom-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Carol" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Carol</span>
</div>
<!-- Path 4 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 52 C 80 30, 70 10, 85 25" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute top-[10%] right-[18%] md:top-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="David" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">David</span>
</div>
<!-- Path 5 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 50 C 25 5, 20 50, 40 10" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
</svg>
<div class="absolute top-[5%] left-[30%] md:top-[2%] md:left-[35%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Eve" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Eve</span>
</div>
<!-- Path 6 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 50 C 75 95, 80 50, 60 90" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
</svg>
<div class="absolute bottom-[5%] right-[30%] md:bottom-[2%] md:right-[35%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/90.jpg" alt="Frank" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Frank</span>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Total Connections</h4>
<p class="text-3xl font-extrabold text-pink-500">236</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+12 since last week</p>
</div>
<div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Mutual Interests</h4>
<p class="text-3xl font-extrabold text-pink-500">78%</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Avg. across your network</p>
</div>
<div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">New Connections this Month</h4>
<p class="text-3xl font-extrabold text-pink-500">18</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Ready to mingle</p>
</div>
</div>
<div class="mt-8 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 rounded-full text-lg font-semibold bg-gray-900 text-white dark:bg-pink-500 dark:text-white shadow-lg hover:bg-gray-700 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:scale-105">
Explore New Matches
<svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3">
</path>
</svg>
</a>
</div>
</div>
</div>관련 구성 요소
Skeuomorphic_Vibrant_Blog_Viz
블로그/콘텐츠 소비를 위한 복잡한 스큐어모픽 데이터 시각화 구성 요소로, 생생한 색 구성표가 적용되어 응답성과 다크 모드를 위해 설계되었습니다.
Data Visualization Components 구성 요소
블로그를 위한 반응형 다크 모드 호환 데이터 시각화 구성 요소로, 보색과 보색 구성표와 복잡한 대화형 요소가 있는 레트로/빈티지 디자인을 특징으로 합니다.
다크 모드 데이터 시각화 구성 요소
어두운 단색 테마로 설계된 복잡하고 반응이 빠른 데이터 시각화 구성 요소입니다. 꺾은선형 차트, 막대 차트 및 데이터 카드를 포함한 여러 대화형 시각화 요소를 제공합니다. 호버 효과를 포함하고 Tailwind의 다크 모드 지원을 사용합니다. 블로그 및 콘텐츠 소비 플랫폼에 적합합니다.