Zmieniające się kształty czyli SVG Morph z użyciem CSS

Na wielu stronach od jakiegoś czasu pojawiają się motywy nieregularnych kształtów o przeróżnych wypełnieniach, czy to we wzory typu: kropki, kreski, linie czy gradienty i zdjęcia ( patrz przykłady poniżej ).Te elementy idealnie nadają się do animacji SVG typu morph ( z .ang „przemieniać, zmieniać”). Dlatego dzisiaj zajmiemy się wykorzystaniem naszych kształtów do otrzymania efektu przejścia z jednego kształtu w kolejny i to wszystko tylko z pomocą SVG i CSS.

Zainspirowana głównie stroną studia Wade and Leta (https://wadeandleta.com/studio) i zmieniającymi się tam „tworami” postanowiłam odtworzyć jeden z nich.

1. Przygotowanie SVG.

Na początku naszym zadaniem będzie narysowanie kształtów których będziemy używać. Jeśli posiadasz program do grafiki wektorowej możesz takie kształty stworzyć sam. W moim przykładzie będą potrzebne 3 różne zapisane w formacie SVG. Pobaw się ! Wyjdź od jednego kształtu i na jego podstawie stwórz dwa następne. Pamiętaj jednak żeby zachować taką samą liczbę zmienianych punktów. nie dodawaj nowych ani ich nie odejmuj (to ważne !).

Jeśli nie masz programu do obróbki wektorów nie martw się! Możesz użyć SVG, które ja wykorzystałam (pobierz) albo stwórz własne z kreatorem (https://www.blobmaker.app/).
Jeżeli jesteś ciekawy jak będzie wygladała transformacja jednego kształtu w drugi zanim jeszcze zaczniemy kodować możesz posłużyć się tym źródłem (https://shapeshifter.design/).Shapeshifter może się wydawać średnio intuicyjny na pierwszy rzut oka dlatego w razie czego wspomóż się instrukcją (https://www.youtube.com/watch?v=2aq3ljlnQdI). Ten krok nie jest konieczny, więc jeśli chcesz możesz go pominąć.
Programy graficzne zazwyczaj dodają do kodu SVG dużo dodatkowych informacji niepotrzebnych nam przy ich obróbce. Ja lubię swoje pliki jak najbardziej oczyścić i uprościć i używam do tego SVG OMG. (https://jakearchibald.github.io/svgomg/).

2. Dodanie wypełnienia kształtu i maski.

Gdy mamy już nasze przygotowane pliki SVG czeka nas następny etap. Otwieramy pierwszy z plików (początkowy kształt ) w dowolnym edytorze kodu lub jak w naszym przypadku wklejamy do codepen.
Ja w swoim przykładzie do wypełnienia kształtu używam zdjęcia znalezionego na Unsplash autorstwa Autumn Goodman. Można tam znaleźć masę darmowych zdjęć (pamiętajcie tylko żeby zaznaczyć czyjego autorstwa jest wykorzystywane zdjęcie ).
Po dodaniu zdjęcia w formie tagu <image> dodajemy do niego preserveAspectRatio=”xMidYMid slice” który zapewni nam przeskalowanie zdjęcia do naszego kształtu . Następnie zajmujemy się tagiem <clip-path>, tworzącym maskę, która pozostawi ze zdjęcia cały obszar znajdujący się wewnątrz kształtu, a reszta zostanie niewidoczna/wycięta. Jako że chcemy żeby wycięty element był zgodny z naszym  <path> pierwszego kształtu, to właśnie jego umieszczamy w tagu <clip-path>.
W rezultacie otrzymujemy:

See the Pen SVG blob clippath by Edgy (@edgyDesign) on CodePen.

3. Animacja w CSS.

Na koniec zostaje nam tylko dodanie w CSS animacji. Sprawa jest prosta, za pomocą keyframes ustalamy punkty w animacji kiedy kształt ma się zmienić w kolejny. I to wszystko, nasza praca zakończona, a my mamy już swojego własnego pływającego potwora 🙂

See the Pen svg morph by Edgy (@edgyDesign) on CodePen.

Źródła i inspiracje:

https://wadeandleta.com/studio

https://www.siteinspire.com/

https://www.awwwards.com/

https://unsplash.com/

https://www.blobmaker.app/

https://shapeshifter.design/

https://www.youtube.com/watch?v=2aq3ljlnQdI

https://jakearchibald.github.io/svgomg/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Close