Card by Smit-Prajapati made with CSS

#e8e8e8

1.card {
2  width: 200px;
3  height: 300px;
4  position: relative;
5  background-image: linear-gradient(230deg, rgba(93, 93, 93, 0.03) 0%, rgba(93, 93, 93, 0.03) 50%, rgba(78, 78, 78, 0.03) 50%, rgba(78, 78, 78, 0.03) 100%), linear-gradient(107deg, rgba(55, 55, 55, 0.01) 0%, rgba(55, 55, 55, 0.01) 50%, rgba(170, 170, 170, 0.01) 50%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(278deg, rgba(16, 16, 16, 0.03) 0%, rgba(16, 16, 16, 0.03) 50%, rgba(24, 24, 24, 0.03) 50%, rgba(24, 24, 24, 0.03) 100%), linear-gradient(205deg, rgba(116, 116, 116, 0.03) 0%, rgba(116, 116, 116, 0.03) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(150deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.03) 50%, rgba(80, 80, 80, 0.03) 50%, rgba(80, 80, 80, 0.03) 100%), linear-gradient(198deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(278deg, rgba(89, 89, 89, 0.03) 0%, rgba(89, 89, 89, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(217deg, rgba(28, 28, 28, 0.03) 0%, rgba(28, 28, 28, 0.03) 50%, rgba(202, 202, 202, 0.03) 50%, rgba(202, 202, 202, 0.03) 100%), linear-gradient(129deg, rgba(23, 23, 23, 0.03) 0%, rgba(23, 23, 23, 0.03) 50%, rgba(244, 244, 244, 0.03) 50%, rgba(244, 244, 244, 0.03) 100%), linear-gradient(135deg, rgb(1, 132, 255), rgb(198, 5, 91));
6  display: grid;
7  place-content: center;
8  border-radius: 20px;
9  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
10}
11
12.size-5 {
13  width: 5px;
14  border-radius: 2px;
15}
16
17.size-10 {
18  width: 10px;
19  border-radius: 4px;
20}
21
22.size-15 {
23  width: 15px;
24  border-radius: 5px;
25}
26
27.size-20 {
28  width: 20px;
29  border-radius: 7px;
30}
31
32.dot-container-main {
33  width: 95px;
34  height: 110px;
35  position: relative;
36}
37
38.dot {
39  position: absolute;
40  aspect-ratio: 1;
41  background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.34) 100%);
42  border-top: 1px solid rgb(255, 255, 255);
43  border-right: 1px solid white;
44  transition: left 1s ease-in-out, top 1s ease-in-out, transform 0.2s ease-in-out;
45}
46
47.dot:hover {
48  transform: scale(1.8);
49}
50
51.dot1 {
52  left: -40px;
53  top: -80px;
54}
55
56.dot52 {
57  left: 10px;
58  top: -75px;
59}
60
61.dot4 {
62  left: 40px;
63  top: -50px;
64}
65
66.dot3 {
67  left: -20px;
68  top: -70px;
69}
70
71.dot72 {
72  left: 50px;
73  top: -85px;
74}
75
76.dot2 {
77  left: 110px;
78  top: -30px;
79}
80
81.dot53 {
82  left: 125px;
83  top: -80px;
84}
85
86.dot5 {
87  left: 100px;
88  top: -20px;
89}
90
91.dot73 {
92  left: -25px;
93  top: -50px;
94}
95
96.dot6 {
97  left: 30px;
98  top: -45px;
99}
100
101.dot7 {
102  left: 80px;
103  top: -60px;
104}
105
106.dot55 {
107  left: 60px;
108  top: -30px;
109}
110
111.dot8 {
112  left: 70px;
113  top: -35px;
114}
115
116.dot54 {
117  left: 120px;
118  top: -20px;
119}
120
121.dot56 {
122  left: 85px;
123  top: -5px;
124}
125
126.dot10 {
127  left: 80px;
128  top: -20px;
129}
130
131.dot12 {
132  left: -40px;
133  top: -25px;
134}
135
136.dot9 {
137  left: 0px;
138  top: -50px;
139}
140
141.dot76 {
142  left: 10px;
143  top: -20px;
144}
145
146.dot11 {
147  left: 110px;
148  top: 0px;
149}
150
151.dot59 {
152  left: 110px;
153  top: 30px;
154}
155
156.dot14 {
157  left: 100px;
158  top: 10px;
159}
160
161.dot58 {
162  left: -20px;
163  top: 0px;
164}
165
166.dot13 {
167  left: 50px;
168  top: -10px;
169}
170
171.dot15 {
172  left: 70px;
173  top: 0px;
174}
175
176.dot57 {
177  left: 30px;
178  top: 15px;
179}
180
181.dot17 {
182  left: 80px;
183  top: 10px;
184}
185
186.dot19 {
187  left: 95px;
188  top: 30px;
189}
190
191.dot23 {
192  left: 130px;
193  top: 45px;
194}
195
196.dot61 {
197  left: 75px;
198  top: 20px;
199}
200
201.dot28 {
202  left: 100px;
203  top: 40px;
204}
205
206.dot18 {
207  left: -35px;
208  top: 0px;
209}
210
211.dot16 {
212  left: 0px;
213  top: 20px;
214}
215
216.dot20 {
217  left: -30px;
218  top: 10px;
219}
220
221.dot24 {
222  left: -30px;
223  top: 30px;
224}
225
226.dot21 {
227  left: 50px;
228  top: 10px;
229}
230
231.dot65 {
232  left: 30px;
233  top: 30px;
234}
235
236.dot60 {
237  left: -15px;
238  top: 20px;
239}
240
241.dot25 {
242  left: -5px;
243  top: 40px;
244}
245
246.dot30 {
247  left: 20px;
248  top: 40px;
249}
250
251.dot32 {
252  left: 0px;
253  top: 60px;
254}
255
256.dot78 {
257  left: -35px;
258  top: 170px;
259}
260
261.dot50 {
262  left: 120px;
263  top: 180px;
264}
265
266.dot79 {
267  left: 60px;
268  top: 170px;
269}
270
271.dot69 {
272  left: 100px;
273  top: 135px;
274}
275
276.dot68 {
277  left: 110px;
278  top: 100px;
279}
280
281.dot47 {
282  left: 0px;
283  top: 175px;
284}
285
286.dot71 {
287  left: 20px;
288  top: 160px;
289}
290
291.dot83 {
292  left: 100px;
293  top: 170px;
294}
295
296.dot45 {
297  left: 10px;
298  top: 160px;
299}
300
301.dot67 {
302  left: 40px;
303  top: 140px;
304}
305
306.dot49 {
307  left: 45px;
308  top: 190px;
309}
310
311.dot48 {
312  left: 20px;
313  top: 180px;
314}
315
316.dot46 {
317  left: 100px;
318  top: 120px;
319}
320
321.dot70 {
322  left: 80px;
323  top: 145px;
324}
325
326.dot75 {
327  left: -20px;
328  top: 140px;
329}
330
331.dot82 {
332  left: 60px;
333  top: 160px;
334}
335
336.dot43 {
337  left: 50px;
338  top: 170px;
339}
340
341.dot44 {
342  left: 60px;
343  top: 130px;
344}
345
346.dot77 {
347  left: 110px;
348  top: 70px;
349}
350
351.dot42 {
352  left: 90px;
353  top: 110px;
354}
355
356.dot81 {
357  left: 90px;
358  top: 140px;
359}
360
361.dot62 {
362  left: 100px;
363  top: 55px;
364}
365
366.dot31 {
367  left: 85px;
368  top: 80px;
369}
370
371.dot33 {
372  left: -30px;
373  top: 130px;
374}
375
376.dot80 {
377  left: 70px;
378  top: 120px;
379}
380
381.dot39 {
382  left: 30px;
383  top: 115px;
384}
385
386.dot63 {
387  left: -30px;
388  top: 55px;
389}
390
391.dot41 {
392  left: 50px;
393  top: 110px;
394}
395
396.dot40 {
397  left: 40px;
398  top: 120px;
399}
400
401.dot66 {
402  left: 70px;
403  top: 95px;
404}
405
406.dot37 {
407  left: 10px;
408  top: 130px;
409}
410
411.dot51 {
412  left: -5px;
413  top: 105px;
414}
415
416.dot29 {
417  left: -15px;
418  top: 90px;
419}
420
421.dot38 {
422  left: 10px;
423  top: 90px;
424}
425
426.dot35 {
427  left: 50px;
428  top: 90px;
429}
430
431.dot64 {
432  left: 80px;
433  top: 45px;
434}
435
436.dot34 {
437  left: 70px;
438  top: 70px;
439}
440
441.dot36 {
442  left: 65px;
443  top: 80px;
444}
445
446.dot74 {
447  left: 30px;
448  top: 70px;
449}
450
451.dot26 {
452  left: 45px;
453  top: 60px;
454}
455
456.dot22 {
457  left: 60px;
458  top: 35px;
459}
460
461.dot27 {
462  left: 50px;
463  top: 70px;
464}
465
466.card:hover {
467  transform: scale(1.1);
468}
469
470.card:hover .text {
471  opacity: 1;
472}
473
474.card:hover .dot1 {
475  left: 0px;
476  top: 0px;
477}
478
479.card:hover .dot2 {
480  left: 90px;
481  top: 0px;
482}
483
484.card:hover .dot3 {
485  left: 5px;
486  top: 5px;
487}
488
489.card:hover .dot4 {
490  left: 45px;
491  top: 5px;
492}
493
494.card:hover .dot5 {
495  left: 85px;
496  top: 5px;
497}
498
499.card:hover .dot6 {
500  left: 15px;
501  top: 10px;
502}
503
504.card:hover .dot7 {
505  left: 75px;
506  top: 10px;
507}
508
509.card:hover .dot8 {
510  left: 55px;
511  top: 15px;
512}
513
514.card:hover .dot9 {
515  left: 15px;
516  top: 20px;
517}
518
519.card:hover .dot10 {
520  left: 60px;
521  top: 20px;
522}
523
524.card:hover .dot11 {
525  left: 90px;
526  top: 20px;
527}
528
529.card:hover .dot12 {
530  left: 0px;
531  top: 25px;
532}
533
534.card:hover .dot13 {
535  left: 75px;
536  top: 25px;
537}
538
539.card:hover .dot14 {
540  left: 85px;
541  top: 25px;
542}
543
544.card:hover .dot15 {
545  left: 80px;
546  top: 30px;
547}
548
549.card:hover .dot16 {
550  left: 15px;
551  top: 35px;
552}
553
554.card:hover .dot17 {
555  left: 75px;
556  top: 35px;
557}
558
559.card:hover .dot18 {
560  left: 0px;
561  top: 40px;
562}
563
564.card:hover .dot19 {
565  left: 85px;
566  top: 40px;
567}
568
569.card:hover .dot20 {
570  left: 5px;
571  top: 45px;
572}
573
574.card:hover .dot21 {
575  left: 50px;
576  top: 45px;
577}
578
579.card:hover .dot22 {
580  left: 60px;
581  top: 45px;
582}
583
584.card:hover .dot23 {
585  left: 90px;
586  top: 45px;
587}
588
589.card:hover .dot24 {
590  left: 0px;
591  top: 50px;
592}
593
594.card:hover .dot25 {
595  left: 15px;
596  top: 50px;
597}
598
599.card:hover .dot26 {
600  left: 45px;
601  top: 50px;
602}
603
604.card:hover .dot27 {
605  left: 55px;
606  top: 50px;
607}
608
609.card:hover .dot28 {
610  left: 80px;
611  top: 50px;
612}
613
614.card:hover .dot29 {
615  left: 10px;
616  top: 55px;
617}
618
619.card:hover .dot30 {
620  left: 20px;
621  top: 55px;
622}
623
624.card:hover .dot31 {
625  left: 75px;
626  top: 55px;
627}
628
629.card:hover .dot32 {
630  left: 25px;
631  top: 60px;
632}
633
634.card:hover .dot33 {
635  left: 5px;
636  top: 65px;
637}
638
639.card:hover .dot34 {
640  left: 55px;
641  top: 65px;
642}
643
644.card:hover .dot35 {
645  left: 30px;
646  top: 70px;
647}
648
649.card:hover .dot36 {
650  left: 50px;
651  top: 70px;
652}
653
654.card:hover .dot37 {
655  left: 25px;
656  top: 75px;
657}
658
659.card:hover .dot38 {
660  left: 35px;
661  top: 75px;
662}
663
664.card:hover .dot39 {
665  left: 30px;
666  top: 90px;
667}
668
669.card:hover .dot40 {
670  left: 40px;
671  top: 90px;
672}
673
674.card:hover .dot41 {
675  left: 50px;
676  top: 90px;
677}
678
679.card:hover .dot42 {
680  left: 80px;
681  top: 90px;
682}
683
684.card:hover .dot43 {
685  left: 35px;
686  top: 95px;
687}
688
689.card:hover .dot44 {
690  left: 55px;
691  top: 95px;
692}
693
694.card:hover .dot45 {
695  left: 25px;
696  top: 100px;
697}
698
699.card:hover .dot46 {
700  left: 50px;
701  top: 100px;
702}
703
704.card:hover .dot47 {
705  left: 20px;
706  top: 105px;
707}
708
709.card:hover .dot48 {
710  left: 45px;
711  top: 105px;
712}
713
714.card:hover .dot49 {
715  left: 55px;
716  top: 105px;
717}
718
719.card:hover .dot50 {
720  left: 90px;
721  top: 105px;
722}
723
724.card:hover .dot51 {
725  left: 15px;
726  top: 60px;
727}
728
729.card:hover .dot52 {
730  left: 10px;
731  top: 0px;
732}
733
734.card:hover .dot53 {
735  left: 75px;
736  top: 0px;
737}
738
739.card:hover .dot54 {
740  left: 85px;
741  top: 10px;
742}
743
744.card:hover .dot55 {
745  left: 45px;
746  top: 15px;
747}
748
749.card:hover .dot56 {
750  left: 75px;
751  top: 15px;
752}
753
754.card:hover .dot57 {
755  left: 10px;
756  top: 25px;
757}
758
759.card:hover .dot58 {
760  left: 0px;
761  top: 30px;
762}
763
764.card:hover .dot59 {
765  left: 85px;
766  top: 30px;
767}
768
769.card:hover .dot60 {
770  left: 10px;
771  top: 40px;
772}
773
774.card:hover .dot61 {
775  left: 75px;
776  top: 40px;
777}
778
779.card:hover .dot62 {
780  left: 85px;
781  top: 50px;
782}
783
784.card:hover .dot63 {
785  left: 0px;
786  top: 55px;
787}
788
789.card:hover .dot64 {
790  left: 55px;
791  top: 55px;
792}
793
794.card:hover .dot65 {
795  left: 30px;
796  top: 60px;
797}
798
799.card:hover .dot66 {
800  left: 40px;
801  top: 70px;
802}
803
804.card:hover .dot67 {
805  left: 20px;
806  top: 90px;
807}
808
809.card:hover .dot68 {
810  left: 85px;
811  top: 90px;
812}
813
814.card:hover .dot69 {
815  left: 80px;
816  top: 100px;
817}
818
819.card:hover .dot70 {
820  left: 40px;
821  top: 95px;
822}
823
824.card:hover .dot71 {
825  left: 30px;
826  top: 100px;
827}
828
829.card:hover .dot72 {
830  left: 50px;
831  top: 0px;
832}
833
834.card:hover .dot73 {
835  left: 0px;
836  top: 10px;
837}
838
839.card:hover .dot74 {
840  left: 40px;
841  top: 55px;
842}
843
844.card:hover .dot75 {
845  left: 10px;
846  top: 65px;
847}
848
849.card:hover .dot76 {
850  left: 45px;
851  top: 25px;
852}
853
854.card:hover .dot77 {
855  left: 75px;
856  top: 60px;
857}
858
859.card:hover .dot78 {
860  left: 0px;
861  top: 90px;
862}
863
864.card:hover .dot79 {
865  left: 60px;
866  top: 95px;
867}
868
869.card:hover .dot80 {
870  left: 60px;
871  top: 90px;
872}
873
874.card:hover .dot81 {
875  left: 70px;
876  top: 90px;
877}
878
879.card:hover .dot82 {
880  left: 75px;
881  top: 95px;
882}
883
884.card:hover .dot83 {
885  left: 75px;
886  top: 105px;
887}
888
889.size-20 {
890  display: grid;
891  place-content: center;
892  border: 1px solid rgb(255, 255, 255);
893}
894
895.size-20::before {
896  content: "";
897  width: 100%;
898  height: 100%;
899  position: absolute;
900  border-radius: inherit;
901  background: black;
902  opacity: 0;
903  transition: all 0.2s ease-in-out;
904}
905
906.size-20 .svg {
907  fill: rgba(255, 255, 255, 0);
908  height: 10px;
909  width: 10px;
910  transition: all 0.2s ease-in-out;
911}
912
913.size-20:hover {
914  transform: scale(1.5);
915  border: none;
916}
917
918.size-20:hover::before {
919  opacity: 1;
920}
921
922.size-20:hover .svg {
923  fill: white;
924  z-index: 99;
925}
926
927.text {
928  position: absolute;
929  bottom: 20px;
930  left: 50%;
931  transform: translateX(-50%);
932  font-size: 10px;
933  letter-spacing: 5px;
934  color: white;
935  opacity: 0;
936  transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
937}

.card {
  width: 200px;
  height: 300px;
  position: relative;
  background-image: linear-gradient(230deg, rgba(93, 93, 93, 0.03) 0%, rgba(93, 93, 93, 0.03) 50%, rgba(78, 78, 78, 0.03) 50%, rgba(78, 78, 78, 0.03) 100%), linear-gradient(107deg, rgba(55, 55, 55, 0.01) 0%, rgba(55, 55, 55, 0.01) 50%, rgba(170, 170, 170, 0.01) 50%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(278deg, rgba(16, 16, 16, 0.03) 0%, rgba(16, 16, 16, 0.03) 50%, rgba(24, 24, 24, 0.03) 50%, rgba(24, 24, 24, 0.03) 100%), linear-gradient(205deg, rgba(116, 116, 116, 0.03) 0%, rgba(116, 116, 116, 0.03) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(150deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.03) 50%, rgba(80, 80, 80, 0.03) 50%, rgba(80, 80, 80, 0.03) 100%), linear-gradient(198deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(278deg, rgba(89, 89, 89, 0.03) 0%, rgba(89, 89, 89, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(217deg, rgba(28, 28, 28, 0.03) 0%, rgba(28, 28, 28, 0.03) 50%, rgba(202, 202, 202, 0.03) 50%, rgba(202, 202, 202, 0.03) 100%), linear-gradient(129deg, rgba(23, 23, 23, 0.03) 0%, rgba(23, 23, 23, 0.03) 50%, rgba(244, 244, 244, 0.03) 50%, rgba(244, 244, 244, 0.03) 100%), linear-gradient(135deg, rgb(1, 132, 255), rgb(198, 5, 91));
  display: grid;
  place-content: center;
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.size-5 {
  width: 5px;
  border-radius: 2px;
}

.size-10 {
  width: 10px;
  border-radius: 4px;
}

.size-15 {
  width: 15px;
  border-radius: 5px;
}

.size-20 {
  width: 20px;
  border-radius: 7px;
}

.dot-container-main {
  width: 95px;
  height: 110px;
  position: relative;
}

.dot {
  position: absolute;
  aspect-ratio: 1;
  background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.34) 100%);
  border-top: 1px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  transition: left 1s ease-in-out, top 1s ease-in-out, transform 0.2s ease-in-out;
}

.dot:hover {
  transform: scale(1.8);
}

.dot1 {
  left: -40px;
  top: -80px;
}

.dot52 {
  left: 10px;
  top: -75px;
}

.dot4 {
  left: 40px;
  top: -50px;
}

.dot3 {
  left: -20px;
  top: -70px;
}

.dot72 {
  left: 50px;
  top: -85px;
}

.dot2 {
  left: 110px;
  top: -30px;
}

.dot53 {
  left: 125px;
  top: -80px;
}

.dot5 {
  left: 100px;
  top: -20px;
}

.dot73 {
  left: -25px;
  top: -50px;
}

.dot6 {
  left: 30px;
  top: -45px;
}

.dot7 {
  left: 80px;
  top: -60px;
}

.dot55 {
  left: 60px;
  top: -30px;
}

.dot8 {
  left: 70px;
  top: -35px;
}

.dot54 {
  left: 120px;
  top: -20px;
}

.dot56 {
  left: 85px;
  top: -5px;
}

.dot10 {
  left: 80px;
  top: -20px;
}

.dot12 {
  left: -40px;
  top: -25px;
}

.dot9 {
  left: 0px;
  top: -50px;
}

.dot76 {
  left: 10px;
  top: -20px;
}

.dot11 {
  left: 110px;
  top: 0px;
}

.dot59 {
  left: 110px;
  top: 30px;
}

.dot14 {
  left: 100px;
  top: 10px;
}

.dot58 {
  left: -20px;
  top: 0px;
}

.dot13 {
  left: 50px;
  top: -10px;
}

.dot15 {
  left: 70px;
  top: 0px;
}

.dot57 {
  left: 30px;
  top: 15px;
}

.dot17 {
  left: 80px;
  top: 10px;
}

.dot19 {
  left: 95px;
  top: 30px;
}

.dot23 {
  left: 130px;
  top: 45px;
}

.dot61 {
  left: 75px;
  top: 20px;
}

.dot28 {
  left: 100px;
  top: 40px;
}

.dot18 {
  left: -35px;
  top: 0px;
}

.dot16 {
  left: 0px;
  top: 20px;
}

.dot20 {
  left: -30px;
  top: 10px;
}

.dot24 {
  left: -30px;
  top: 30px;
}

.dot21 {
  left: 50px;
  top: 10px;
}

.dot65 {
  left: 30px;
  top: 30px;
}

.dot60 {
  left: -15px;
  top: 20px;
}

.dot25 {
  left: -5px;
  top: 40px;
}

.dot30 {
  left: 20px;
  top: 40px;
}

.dot32 {
  left: 0px;
  top: 60px;
}

.dot78 {
  left: -35px;
  top: 170px;
}

.dot50 {
  left: 120px;
  top: 180px;
}

.dot79 {
  left: 60px;
  top: 170px;
}

.dot69 {
  left: 100px;
  top: 135px;
}

.dot68 {
  left: 110px;
  top: 100px;
}

.dot47 {
  left: 0px;
  top: 175px;
}

.dot71 {
  left: 20px;
  top: 160px;
}

.dot83 {
  left: 100px;
  top: 170px;
}

.dot45 {
  left: 10px;
  top: 160px;
}

.dot67 {
  left: 40px;
  top: 140px;
}

.dot49 {
  left: 45px;
  top: 190px;
}

.dot48 {
  left: 20px;
  top: 180px;
}

.dot46 {
  left: 100px;
  top: 120px;
}

.dot70 {
  left: 80px;
  top: 145px;
}

.dot75 {
  left: -20px;
  top: 140px;
}

.dot82 {
  left: 60px;
  top: 160px;
}

.dot43 {
  left: 50px;
  top: 170px;
}

.dot44 {
  left: 60px;
  top: 130px;
}

.dot77 {
  left: 110px;
  top: 70px;
}

.dot42 {
  left: 90px;
  top: 110px;
}

.dot81 {
  left: 90px;
  top: 140px;
}

.dot62 {
  left: 100px;
  top: 55px;
}

.dot31 {
  left: 85px;
  top: 80px;
}

.dot33 {
  left: -30px;
  top: 130px;
}

.dot80 {
  left: 70px;
  top: 120px;
}

.dot39 {
  left: 30px;
  top: 115px;
}

.dot63 {
  left: -30px;
  top: 55px;
}

.dot41 {
  left: 50px;
  top: 110px;
}

.dot40 {
  left: 40px;
  top: 120px;
}

.dot66 {
  left: 70px;
  top: 95px;
}

.dot37 {
  left: 10px;
  top: 130px;
}

.dot51 {
  left: -5px;
  top: 105px;
}

.dot29 {
  left: -15px;
  top: 90px;
}

.dot38 {
  left: 10px;
  top: 90px;
}

.dot35 {
  left: 50px;
  top: 90px;
}

.dot64 {
  left: 80px;
  top: 45px;
}

.dot34 {
  left: 70px;
  top: 70px;
}

.dot36 {
  left: 65px;
  top: 80px;
}

.dot74 {
  left: 30px;
  top: 70px;
}

.dot26 {
  left: 45px;
  top: 60px;
}

.dot22 {
  left: 60px;
  top: 35px;
}

.dot27 {
  left: 50px;
  top: 70px;
}

.card:hover {
  transform: scale(1.1);
}

.card:hover .text {
  opacity: 1;
}

.card:hover .dot1 {
  left: 0px;
  top: 0px;
}

.card:hover .dot2 {
  left: 90px;
  top: 0px;
}

.card:hover .dot3 {
  left: 5px;
  top: 5px;
}

.card:hover .dot4 {
  left: 45px;
  top: 5px;
}

.card:hover .dot5 {
  left: 85px;
  top: 5px;
}

.card:hover .dot6 {
  left: 15px;
  top: 10px;
}

.card:hover .dot7 {
  left: 75px;
  top: 10px;
}

.card:hover .dot8 {
  left: 55px;
  top: 15px;
}

.card:hover .dot9 {
  left: 15px;
  top: 20px;
}

.card:hover .dot10 {
  left: 60px;
  top: 20px;
}

.card:hover .dot11 {
  left: 90px;
  top: 20px;
}

.card:hover .dot12 {
  left: 0px;
  top: 25px;
}

.card:hover .dot13 {
  left: 75px;
  top: 25px;
}

.card:hover .dot14 {
  left: 85px;
  top: 25px;
}

.card:hover .dot15 {
  left: 80px;
  top: 30px;
}

.card:hover .dot16 {
  left: 15px;
  top: 35px;
}

.card:hover .dot17 {
  left: 75px;
  top: 35px;
}

.card:hover .dot18 {
  left: 0px;
  top: 40px;
}

.card:hover .dot19 {
  left: 85px;
  top: 40px;
}

.card:hover .dot20 {
  left: 5px;
  top: 45px;
}

.card:hover .dot21 {
  left: 50px;
  top: 45px;
}

.card:hover .dot22 {
  left: 60px;
  top: 45px;
}

.card:hover .dot23 {
  left: 90px;
  top: 45px;
}

.card:hover .dot24 {
  left: 0px;
  top: 50px;
}

.card:hover .dot25 {
  left: 15px;
  top: 50px;
}

.card:hover .dot26 {
  left: 45px;
  top: 50px;
}

.card:hover .dot27 {
  left: 55px;
  top: 50px;
}

.card:hover .dot28 {
  left: 80px;
  top: 50px;
}

.card:hover .dot29 {
  left: 10px;
  top: 55px;
}

.card:hover .dot30 {
  left: 20px;
  top: 55px;
}

.card:hover .dot31 {
  left: 75px;
  top: 55px;
}

.card:hover .dot32 {
  left: 25px;
  top: 60px;
}

.card:hover .dot33 {
  left: 5px;
  top: 65px;
}

.card:hover .dot34 {
  left: 55px;
  top: 65px;
}

.card:hover .dot35 {
  left: 30px;
  top: 70px;
}

.card:hover .dot36 {
  left: 50px;
  top: 70px;
}

.card:hover .dot37 {
  left: 25px;
  top: 75px;
}

.card:hover .dot38 {
  left: 35px;
  top: 75px;
}

.card:hover .dot39 {
  left: 30px;
  top: 90px;
}

.card:hover .dot40 {
  left: 40px;
  top: 90px;
}

.card:hover .dot41 {
  left: 50px;
  top: 90px;
}

.card:hover .dot42 {
  left: 80px;
  top: 90px;
}

.card:hover .dot43 {
  left: 35px;
  top: 95px;
}

.card:hover .dot44 {
  left: 55px;
  top: 95px;
}

.card:hover .dot45 {
  left: 25px;
  top: 100px;
}

.card:hover .dot46 {
  left: 50px;
  top: 100px;
}

.card:hover .dot47 {
  left: 20px;
  top: 105px;
}

.card:hover .dot48 {
  left: 45px;
  top: 105px;
}

.card:hover .dot49 {
  left: 55px;
  top: 105px;
}

.card:hover .dot50 {
  left: 90px;
  top: 105px;
}

.card:hover .dot51 {
  left: 15px;
  top: 60px;
}

.card:hover .dot52 {
  left: 10px;
  top: 0px;
}

.card:hover .dot53 {
  left: 75px;
  top: 0px;
}

.card:hover .dot54 {
  left: 85px;
  top: 10px;
}

.card:hover .dot55 {
  left: 45px;
  top: 15px;
}

.card:hover .dot56 {
  left: 75px;
  top: 15px;
}

.card:hover .dot57 {
  left: 10px;
  top: 25px;
}

.card:hover .dot58 {
  left: 0px;
  top: 30px;
}

.card:hover .dot59 {
  left: 85px;
  top: 30px;
}

.card:hover .dot60 {
  left: 10px;
  top: 40px;
}

.card:hover .dot61 {
  left: 75px;
  top: 40px;
}

.card:hover .dot62 {
  left: 85px;
  top: 50px;
}

.card:hover .dot63 {
  left: 0px;
  top: 55px;
}

.card:hover .dot64 {
  left: 55px;
  top: 55px;
}

.card:hover .dot65 {
  left: 30px;
  top: 60px;
}

.card:hover .dot66 {
  left: 40px;
  top: 70px;
}

.card:hover .dot67 {
  left: 20px;
  top: 90px;
}

.card:hover .dot68 {
  left: 85px;
  top: 90px;
}

.card:hover .dot69 {
  left: 80px;
  top: 100px;
}

.card:hover .dot70 {
  left: 40px;
  top: 95px;
}

.card:hover .dot71 {
  left: 30px;
  top: 100px;
}

.card:hover .dot72 {
  left: 50px;
  top: 0px;
}

.card:hover .dot73 {
  left: 0px;
  top: 10px;
}

.card:hover .dot74 {
  left: 40px;
  top: 55px;
}

.card:hover .dot75 {
  left: 10px;
  top: 65px;
}

.card:hover .dot76 {
  left: 45px;
  top: 25px;
}

.card:hover .dot77 {
  left: 75px;
  top: 60px;
}

.card:hover .dot78 {
  left: 0px;
  top: 90px;
}

.card:hover .dot79 {
  left: 60px;
  top: 95px;
}

.card:hover .dot80 {
  left: 60px;
  top: 90px;
}

.card:hover .dot81 {
  left: 70px;
  top: 90px;
}

.card:hover .dot82 {
  left: 75px;
  top: 95px;
}

.card:hover .dot83 {
  left: 75px;
  top: 105px;
}

.size-20 {
  display: grid;
  place-content: center;
  border: 1px solid rgb(255, 255, 255);
}

.size-20::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: inherit;
  background: black;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.size-20 .svg {
  fill: rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  transition: all 0.2s ease-in-out;
}

.size-20:hover {
  transform: scale(1.5);
  border: none;
}

.size-20:hover::before {
  opacity: 1;
}

.size-20:hover .svg {
  fill: white;
  z-index: 99;
}

.text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 5px;
  color: white;
  opacity: 0;
  transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

Toggle prefixes

4.8K views

Comments

Nagalapuramhareeswar 24. September at 13:58

24. September at 13:58

great work sir well done hatsoff for your work

Smit-Prajapati 25. September at 7:45

25. September at 7:45

@Nagalapuramhareeswar Thanks 🤝

PirateKing55 11. August at 17:46

11. August at 17:46

this looks absolutely fantastic, how can i customize it for my own logo?

Smit-Prajapati 12. August at 1:53

12. August at 1:53

@PirateKing55 I used Adobe XD to design the logo layout and calculate the precise positions for all the divs and created an Excel sheet where I documented size and position values(top,left). So you have to calculate position for every div for your logo.

sehandu 5. August at 17:53

5. August at 17:53

what a beautiful design

Smit-Prajapati 6. August at 1:41

6. August at 1:41

@sehandu Thanks 🤝

No variations yet

MIT License

Copyright - 2023 Smit-Prajapati (Smit Prajapati) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.