Kolisty wykres

Jakiś czas temu na grupie facebookowej mój były kursant zadał pytanie jak zrobić okrągły wykres, po którym podąża jakaś kropka. Dość ciekawe zadanie, na które od razu wpadło mi kilka pomysłów. A czy uda się je zrealizować? Czas rzucić rękawice i stanąć do walki.

Wykres o którym mowa miał postać:

Zanim przejdziemy do walki, dodajmy temu wpisowi trochę nastroju: https://www.youtube.com/watch?v=VE8vKLEK6A8

Założenia: ma być ładnie, a samego wykresu powinienem móc używać na niejednokolorowym tle.

Runda pierwsza

Pierwszy sposób, który przyszedł mi do głowy, to zastosowanie conic gradient. To najprostsza z omawianych tutaj metod, mająca bardzo duże możliwości.

Idea jest prosta. Rysuję conic, w którym załączam dwa kolory. Jeden kolor kończy się równo w momencie, gdzie zaczyna się drugi.


.element {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(red 30deg, #eee 30deg);
}

Jeżeli mam teraz jednolite tło na stronie, wystarczy w środku wstawię koło, któremu dam tło z takim samym kolorem jak kolor strony.

Nasze założenie jednak było takie, by nasz wykres mógł być używany na niejednolitym tle. Oznacza to, że zamiast wstawiać w środku kółko, musimy wyciąć dziurę.

Wykorzystałem do tego mask-image. I spokojnie dało by to radę zrobić za pomocą pojedynczego elementu - gdyby maski w CSS działały jak należy. W każdym innym programie maskę tworzy się za pomocą czarnego i białego koloru. Czarny - ukryte, białe - pokaż.

W CSS ponownie wymyślono to na opak - czarny pokazuje, natomiast za pokazanie odpowiada kolor przezroczysty.

Gdyby to działało jak należy, za pomocą gradientu narysował bym białe kółko na czarnym tle, a potem odpowiednią część zamaskował za pomocą czarno-przezroczystego conic-gradient. W wyniku dostał bym kawałek białego łuku na czarnym tle.

https://codepen.io/kartofelek007/pen/xxEvgPq

Problem w tym, że tutaj ukrywana jest część, gdzie maska jest niewidzialna. A takim kolorem nie da się “zapaćkać” niepotrzebnej części. Pozostało więc rozbić to na 2 oddzielne elementy. Wewnętrzny tworzył kółko, natomiast zewnętrzny wycinał kawałek.

W poniższym linku 2 wersje. Do prawej dodałem tylko jeden element, który przycinam za pomocą image-mask i conic-gradient.

https://codepen.io/kartofelek007/pen/GRjbbmB

Runda druga

Tym razem skorzystałem z svg.

Pomysłem było zastosowanie właściwości stroke-dashoffset i stroke-dasharray opisanych na css-trick. Mega technika, ponieważ bardzo łatwo pozwala nam animować stroke-dashoffset - nawet za pomocą transition. Jedyna rzecz, która musimy tutaj zrobić to wyliczyć długość pojedyńczego przerwania na takim obrysie.

https://codepen.io/kartofelek007/pen/JjRQQGE

Runda trzecia

Tym razem spróbowałem użyć canvas. Metoda wydaje się najcięższa do zastosowania, ale też ma największe możliwości. Problemem niestety tutaj jest to, że w zasadzie każda czynność jest mega upierdliwa i wiąże się ze stosowaniem dziwnych manewrów. Do tego dochodzą bzdurne transformacje w canvasie. Gdybym swego czasu nie prowadził eksperymentów pisząc pewien tekst, to pewnie teraz bym potracił wszystkie włosy. Normalnie zapewne sięgnął bym po jakąś bibliotekę do tego np. https://dmitrybaranovskiy.github.io/raphael/, ale ćwiczenie to miało inny cel.

https://codepen.io/kartofelek007/pen/dypBBPR

Ostatnia runda

Na sam koniec połączyłem technikę svg z conic-gradient.

https://codepen.io/kartofelek007/pen/YzGmoVr

Tworzenie layoutu 2

Wracamy do cięcia layoutu. Tym razem będzie o wiele prościej.

Czytaj więcej

Tworzenie layoutu 1

Sprawa ogólnie wygląda tak - jest do pocięcia layout. Wraz z takim cięciem pobawimy się gulpem, webpackiem, sasem, es6 i podobnymi rzeczami, które niektórzy wykorzystują w codziennej pracy.

Poniższy tekst jest opisem warsztatu, jaki kiedyś wykonywaliśmy na zajęciach. Dużo lania wody, dużo rzeczy, które każdy zna - swoiste podsumowanie. A może i między zdaniami jakaś głupotka a i ciekawa technika się znajdzie?

Czytaj więcej
Poprzednia strona