style="margin-left:-31px;">02 800 61 333

 pattern
:doodle { @grid: 6x6 / 100vmin; } color: hsla( calc(360 - @i() * 4), 70%, 68%, @r(.99) ); @nth(1, 3, 5, 13, 15, 17, 25, 27, 29) { z-index: 100; ::after{ content: ""; opacity: .5; position: absolute; z-index: 100; top: calc(50%); left: calc(50%); width: calc(100%); height: calc(100%); background-image: linear-gradient( transparent calc(25% - 1px), #000 calc(25% - 1px), #000 calc(25% + 1px), transparent calc(25% + 1px), transparent calc(75% - 1px), #000 calc(75% - 1px), #000 calc(75% + 1px), transparent calc(75% + 1px)),linear-gradient(90deg, transparent calc(25% - 1px), #000 calc(25% - 1px), #000 calc(25% + 1px), transparent calc(25% + 1px), transparent calc(75% - 1px), #000 calc(75% - 1px), #000 calc(75% + 1px), transparent calc(75% + 1px) ); background-color: currentColor; transition: .8s ease all; transform: rotate(@p(0deg, 90deg, 180deg, -90deg)); } } @nth(1, 3, 5, 13, 15, 17, 25, 27, 29, 8, 10, 12, 20, 22, 24, 32, 34, 36) { ::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 100%, currentColor 22.2%, transparent 22.2%, transparent calc(22.2% + 2px), currentColor calc(22.2% + 2px), currentColor 44.4%, transparent 44.4%); transform: rotate(@p(0deg, 90deg, 180deg, -90deg)); transition: .8s ease all; } } @nth(2, 4, 6, 14, 16, 18, 26, 28, 30, 7, 9, 11, 19, 21, 23, 31, 33, 35) { ::after { content: ""; position: absolute; top: calc(25% - 2px); left: calc(25% - 2px); width: calc(50%); height: calc(50%); border: 2px solid #000; } ::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 50%, currentColor 50%); transition: .8s ease all; transform: rotate(@p(0deg, 90deg, 180deg, -90deg)); } }
 













 

 

.