From 9f3d2b93df61ff5a062bd28c9c287de3d8f02ed3 Mon Sep 17 00:00:00 2001 From: Daniel Barber Date: Tue, 2 Jun 2020 14:08:03 -0400 Subject: [PATCH] Refactor SVG and CSS animation --- assets/sass/components/_logo.scss | 169 +++++++++++++----------------- layouts/partials/logo.svg | 9 +- 2 files changed, 82 insertions(+), 96 deletions(-) diff --git a/assets/sass/components/_logo.scss b/assets/sass/components/_logo.scss index 1711eedd..a7377b7a 100644 --- a/assets/sass/components/_logo.scss +++ b/assets/sass/components/_logo.scss @@ -1,14 +1,28 @@ $_desaturate_amount: 10%; -$_color_1: #f37001; -$_color_2: #b8d900; -$_color_3: #00a9ff; -$_color_4: #a95ed5; +$_color_1: hsl(28, 100%, 48%); +$_color_2: hsl(69, 100%, 43%); +$_color_3: hsl(200, 100%, 50%); +$_color_4: hsl(278, 100%, 60%); -$_color_1_dark: desaturate($_color_1, $_desaturate_amount); -$_color_2_dark: desaturate($_color_2, $_desaturate_amount); -$_color_3_dark: desaturate($_color_3, $_desaturate_amount); -$_color_4_dark: desaturate($_color_4, $_desaturate_amount); +$_color_1_dark: hsl(28, 85%, 48%); +$_color_2_dark: hsl(69, 85%, 43%); +$_color_3_dark: hsl(200, 85%, 50%); +$_color_4_dark: hsl(278, 85%, 60%); + +:root { + --color-1: hsl(28, 100%, 48%); + --color-2: hsl(69, 100%, 43%); + --color-3: hsl(200, 100%, 50%); + --color-4: hsl(278, 100%, 60%); + + @media (prefers-color-scheme: dark) { + --color-1: hsl(28, 90%, 48%); + --color-2: hsl(69, 90%, 43%); + --color-3: hsl(200, 90%, 50%); + --color-4: hsl(278, 90%, 60%); + } +} .logo__wrapper { width: 7rem; @@ -16,101 +30,66 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount); margin-bottom: 2em; } -.logo__color_1 { fill: $_color_1; transition: fill 200ms ease; } -.logo__color_2 { fill: $_color_2; transition: fill 200ms ease; } -.logo__color_3 { fill: $_color_3; transition: fill 200ms ease; } -.logo__color_4 { fill: $_color_4; transition: fill 200ms ease; } +.logo__color { + animation-duration: 0.6s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-play-state: paused; +} + +.logo__color_1 { + animation-name: cycle_color_1; +} +.logo__color_2 { + animation-name: cycle_color_2; +} +.logo__color_3 { + animation-name: cycle_color_3; +} +.logo__color_4 { + animation-name: cycle_color_4; +} .logo__link:hover, .logo__link:focus { .logo__color { - animation-duration: 0.6s; - animation-iteration-count: infinite; - animation-timing-function: linear; - } - .logo__color_1 { - animation-name: cycle_color_1; - } - .logo__color_2 { - animation-name: cycle_color_2; - } - .logo__color_3 { - animation-name: cycle_color_3; - } - .logo__color_4 { - animation-name: cycle_color_4; + animation-play-state: running; } } -@media (prefers-color-scheme: light) { - @keyframes cycle_color_1 { - 0%, - 100% { fill: $_color_1; } - 25% { fill: $_color_2; } - 50% { fill: $_color_3; } - 75% { fill: $_color_4; } - } +.logo__color_1 { fill: var(--color-1); } +.logo__color_2 { fill: var(--color-2); } +.logo__color_3 { fill: var(--color-3); } +.logo__color_4 { fill: var(--color-4); } - @keyframes cycle_color_2 { - 0%, - 100% { fill: $_color_2; } - 25% { fill: $_color_3; } - 50% { fill: $_color_4; } - 75% { fill: $_color_1; } - } - - @keyframes cycle_color_3 { - 0, - 100% { fill: $_color_3; } - 25% { fill: $_color_4; } - 50% { fill: $_color_1; } - 75% { fill: $_color_2; } - } - - @keyframes cycle_color_4 { - 0%, - 100% { fill: $_color_4; } - 25% { fill: $_color_1; } - 50% { fill: $_color_2; } - 75% { fill: $_color_3; } - } +@keyframes cycle_color_1 { + 0%, + 100% { fill: var(--color-1); } + 25% { fill: var(--color-2); } + 50% { fill: var(--color-3); } + 75% { fill: var(--color-4); } } -@media (prefers-color-scheme: dark) { - .logo__color_1 { fill: $_color_1_dark; } - .logo__color_2 { fill: $_color_2_dark; } - .logo__color_3 { fill: $_color_3_dark; } - .logo__color_4 { fill: $_color_4_dark; } - - @keyframes cycle_color_1 { - 0%, - 100% { fill: $_color_1_dark; } - 25% { fill: $_color_2_dark; } - 50% { fill: $_color_3_dark; } - 75% { fill: $_color_4_dark; } - } - - @keyframes cycle_color_2 { - 0%, - 100% { fill: $_color_2_dark; } - 25% { fill: $_color_3_dark; } - 50% { fill: $_color_4_dark; } - 75% { fill: $_color_1_dark; } - } - - @keyframes cycle_color_3 { - 0%, - 100% { fill: $_color_3_dark; } - 25% { fill: $_color_4_dark; } - 50% { fill: $_color_1_dark; } - 75% { fill: $_color_2_dark; } - } - - @keyframes cycle_color_4 { - 0%, - 100% { fill: $_color_4_dark; } - 25% { fill: $_color_1_dark; } - 50% { fill: $_color_2_dark; } - 75% { fill: $_color_3_dark; } - } +@keyframes cycle_color_2 { + 0%, + 100% { fill: var(--color-2); } + 25% { fill: var(--color-3); } + 50% { fill: var(--color-4); } + 75% { fill: var(--color-1); } +} + +@keyframes cycle_color_3 { + 0%, + 100% { fill: var(--color-3); } + 25% { fill: var(--color-4); } + 50% { fill: var(--color-1); } + 75% { fill: var(--color-2); } +} + +@keyframes cycle_color_4 { + 0%, + 100% { fill: var(--color-4); } + 25% { fill: var(--color-1); } + 50% { fill: var(--color-2); } + 75% { fill: var(--color-3); } } diff --git a/layouts/partials/logo.svg b/layouts/partials/logo.svg index bbbaea18..88d9341d 100644 --- a/layouts/partials/logo.svg +++ b/layouts/partials/logo.svg @@ -1 +1,8 @@ - +