मैं हाल च गै अपनी वेबसाइट पर एनिमेटेड ग्राफिक्स गी इक नमें थीम ते अग्रणी पात्रें दे समूह कन्नै ताजा कीता ऐ, इस श्रृंखला च मैं साझा कीती गेदी मती सारी तकनीकें गी अमल च आनदे होई। मेरे किश एनीमेशन उसलै रूप बदलदे न जिसलै कोई उंदे कन्नै गल्लबात करदा ऐ जां दिन दे बक्ख-बक्ख समें पर।
मेरे ब्लॉग पेजें दे उपर ग्राफिक च रंग हर रोज सवेरे थमां रातीं तगर बदलदे रौंह्दे न। फिर, स्नो मोड बी ऐ, जेह् ड़ा ओवरले लेयर ते ब्लेंडिंग मोड दे सौजन्य कन्नै मिर्च रंग ते सर्दियें दा थीम जोड़दा ऐ।
इस पर कम्म करदे होई मैं सोचना शुरू कीता जे केह् सीएसएस रिलेटिव रंग मूल्य मिगी होर नियंत्रण देई सकदे न ते कन्नै गै इस प्रक्रिया गी बी सरल बनाई सकदे न। नोट: इस ट्यूटोरियल च, मैं सापेक्ष रंग मूल्यें ते थीमिंग ग्राफिक्स ते एनीमेशनें आस्तै ओकेएलसीएच रंग स्पेस पर ध्यान देगा। जेकर तुस सापेक्ष रंग च गहराई कन्नै गोता लाना चांह्दे ओ तां अहमद शैदीद ने इक शानदार इंटरएक्टिव गाइड बनाई ऐ। रही गल्ल रंग स्पेस, गैमट, ते ओकेएलसीएच दी तां साडे अपने जॉफ ग्राहम ने उंदे बारे च लिखेया।
तत्वें दा बार-बार इस्तेमाल करना कुंजी हा। जदूं बी होई सकै पृष्ठभूमि दा दुबारा इस्तेमाल कीता गेआ, जिस च ज़ूम ते ओवरले उस्सै कलाकृति थमां नमें दृश्य बनाने च मदद करदे हे। एह् जरुरत थमां पैदा होआ हा, पर इस कन्नै व्यक्तिगत दृश्यें दी बजाय श्रृंखला दे मामले च सोचने गी बी प्रोत्साहित कीता गेआ। रंग पैलेट गी मैन्युअल रूप कन्नै अपडेट करने कन्नै समस्या आओ सीधे मेरी चुनौती पर आओ। इस चाल्ली दे टून टाइटल च — 1959 दे योगी बियर शो एपिसोड "लुल्लाबाय-बाय बियर" पर आधारित — ते मेरे कम्मै च आम तौर पर, पैलेट किश चुनिंदा रंगें तगर सीमित न।
मैं जिसगी मैं अपने "फाउंडेशन" रंग आखना ऐ, उस थमां शेड्स ते टिंट बनाना तां जे पैलेट गी होर रंगें गी जोड़े बगैर विस्तार कीता जाई सकै।
स्केच च, मैं एचएसएल रंग स्पेस च कम्म करना, इसलेई इस प्रक्रिया च मेरे फाउंडेशन रंग दे हल्केपन दे मूल्य गी बधाना जां घट्ट करना शामल ऐ। ईमानदारी कन्नै, एह् कोई कठिन कम्म नेईं ऐ — पर इक बक्खरा फाउंडेशन रंग चुनने आस्तै शेड्स ते टिंट दा इक बिल्कुल नमां सेट बनाने दी लोड़ ऐ। ऐसा करना मैन्युअल रूप कन्नै, बार-बार, जल्दी गै श्रमसाध्य होई जंदा ऐ।
मैं एचएसएल — एच (ह्यू), एस (संतृप्ति), ते एल (हल्कापन) — रंग स्पेस दा जिक्र कीता, पर एह् रंग दा वर्णन करने दे केईं तरीकें च सिर्फ इक ऐ। आरजीबी — आर (लाल), जी (हरा), बी (नीला) — शायद सारें शा परिचित ऐ, कम से कम अपने हेक्स रूप च। एह्दे अलावा LAB — L (हल्कापन), A (हरा–लाल), B (नीला–पीला) — ते नमें, पर हुन व्यापक रूप कन्नै समर्थत LCH — L (हल्कापन), C (क्रोमा), H (ह्यू) — मॉडल अपने ओकेएलसीएच रूप च बी ऐ। एलसीएच कन्नै — खास तौर उप्पर सीएसएस च ओकेएलसीएच — मैं अपने नींह् दे रंग दे हल्केपन मूल्य गी समायोजित करी सकना ऐ।
या मैं इसदे क्रोमा च बदलाव करी सकना ऐ। एलसीएच क्रोमा ते एचएसएल संतृप्ति दोऐ गै इक रंग दी तीव्रता जां समृद्धि दा वर्णन करदे न , पर एह् बक्ख-बक्ख तरीके कन्नै करदे न । एलसीएच मिगी रंगें दे बीच इक व्यापक रेंज ते मता पूर्वानुमानित मिश्रण दिंदा ऐ।
मैं रंगें दा पैलेट बनाने आस्तै रंगें गी बी बदली सकना ऐ जेह् ड़े इक गै हल्केपन ते क्रोमा मूल्यें गी साझा करदे न। एचएसएल ते एलसीएच दोनें च, ह्यू स्पेक्ट्रम लाल रंग थमां शुरू होंदा ऐ, हरे ते नीले रंग दे माध्यम कन्नै चलदा ऐ ते लाल रंग च वापस औंदा ऐ।
क्यों ओकेएलसीएच ने बदल दित्ता कि मैं रंग दे बारे च किस चाल्ली सोचना ओकेएलसीएच रंग स्पेस आस्तै ब्राउज़र समर्थन हून व्यापक ऐ, भलेआं डिजाइन उपकरण — जिंदे च स्केच बी शामल ऐ — ने नेईं पकड़ेआ ऐ। सौभाग्य कन्नै, एह् तुसेंगी ओकेएलसीएच दा इस्तेमाल करने थमां नेईं रोकना चाहिदा। ब्राउज़र तुंदे आस्तै हेक्स, एचएसएल, लैब, ते आरजीबी मूल्यें गी ओकेएलसीएच च खुशी कन्नै बदली देङन. तुस कुसै बी स्पेस च फाउंडेशन रंग कन्नै इक CSS कस्टम प्रॉपर्टी परिभाशत करी सकदे ओ, जिस च हेक्स बी शामल ऐ: /* नींव रंग */ --नींव: # 5accd6 ऐ;
इस थमां हासल कुसै बी रंग गी स्वतः ओकेएलसीएच च बदली दित्ता जाग: --नींव-प्रकाश: oklch (var (--नींव) थमां [...]; } --फाउंडेशन-मिड: oklch (var (--फाउंडेशन) थमां [...]; } --नींव-अंधेरा: oklch (var (--नींव) थमां [...]; }
सापेक्ष रंग इक डिजाइन प्रणाली दे रूप च सापेक्ष रंग दे बारे च सोचो कि एह् आखदा ऐ: “इस रंग गी लेइयै, इसगी ट्वीक करो, फिरी मिगी नतीजा देओ।” रंग गी समायोजित करने दे दो तरीके न: निरपेक्ष बदलाव ते आनुपातिक बदलाव। कोड च एह् समान दिक्खने गी मिलदे न, पर इक बारी जेकर तुस फाउंडेशन दे रंगें दा अदला-बदली शुरू करो तां एह् बड़ा गै बक्खरा बर्ताव करदे न। उस अंतर गी समझना ओह् गै ऐ जेह्ड़ा सापेक्ष रंग दा इस्तेमाल करने गी इक सिस्टम च बदली सकदा ऐ। /* नींव रंग */ --नींव: # 5accd6 ऐ;
मसलन, मेरे फाउंडेशन रंग दा हल्कापन मान 0.7837 ऐ, जिसलै के गहरे रंग दे संस्करण दा मान 0.5837 ऐ। अंतर दी गणना करने आस्तै, मैं उच्च थमां निचले मूल्य गी घट्ट करदा ऐ ते इक calc() फ़ंक्शन दा इस्तेमाल करियै नतीजे गी लागू करदा ऐ: --नींव-अंधेरा: oklch(var(--नींव से) calc (एल - 0.20) सी एच);
हल्के रंग हासल करने आस्तै, मैं इसदे बजाय अंतर जोड़ना ऐ: --नींव-प्रकाश: oklch(var(--नींव से) calc (एल + 0.10) सी एच);
क्रोमासमायोजन बी इसी प्रक्रिया दा पालन करदे न। अपने फाउंडेशन रंग दी तीव्रता गी 0.1035 थमां 0.0035 तगर घट्ट करने आस्तै, मैं इक मान गी दुए थमां घट्ट करदा ऐ: oklch(var(--नींव से) एल कैलक (सी - 0.10) एच);
रंगें दा पैलेट बनाने लेई, मैं अपने नींह् रंग (200) ते अपने नमें रंग (260) दे रंग मूल्य दे बश्कार अंतर दी गणना करदा ऐ: oklch(var(--नींव से) एल सी कैलक (ज + 60));
वे गणनाएं निरपेक्ष हैं। जदूं मैं इक निश्चित रकम घट्ट करदा हां तां मैं असरदार ढंगै कन्नै आखदा हां, “हमेशा इन्ना घट्ट करो।” स्थिर मूल्यें गी जोड़ने पर बी इ'यै लागू होंदा ऐ: calc (सी - 0.10) ऐ। calc (सी + 0.10) ऐ।
इस दृष्टिकोण दी सीमाएं गी मैं कठिन तरीके कन्नै सिक्खेआ। जदूं मैं फिक्स क्रोमा वैल्यू घटाने पर भरोसा कीता तां नींह् बदलदे गै रंग ग्रे दी बक्खी ढह गे। इक रंग दा कम्म करने आह्ला पैलेट दुए रंग आस्तै टूटी गेआ। गुणा दा बर्ताव अलग-अलग होंदा ऐ। जदूं मैं क्रोमा गी गुणा करदा हां तां मैं ब्राउज़र गी आखना आं : “इस रंग दी तीव्रता गी इक अनुपात च घट्ट करो।” रंगें दा रिश्ता बरकरार रौंह्दा ऐ, उसलै बी जदूं नींह् बदलदी ऐ: calc (सी * 0.10) ऐ।
मेरा मूव इट, स्केल इट, रोटेट इट नियम
हल्केपन गी हिलाओ (जोड़ना या घटाना), पैमाने क्रोमा (गुणा करना), ह्यू घुमाओ (डिग्री जोड़ना या घटाना)।
मैं क्रोमा गी स्केल करदा हां कीजे मैं चाह्न्नां जे तीव्रता च बदलाव आधार रंग दे आनुपातिक रौह्न। ह्यू रिश्ते घूर्णन होंदे न, इस करी ह्यू गी गुणा करने दा कोई मतलब नेईं ऐ। हल्केपन बोधगम्य ते निरपेक्ष ऐ — इसगी गुणा करने कन्नै अक्सर विषम नतीजे पैदा होंदे न।
इक रंग तों लेइयै इक पूरी थीम तगर सापेक्ष रंग मिगी इक नींह् रंग परिभाषित करने ते हर दूए रंग पैदा करने दी अनुमति दिंदा ऐ जेह् ड़ी मिगी लोड़चदी ऐ — भरने, स्ट्रोक, ढाल स्टॉप, छाया — इस थमां। उस बिंदु पर रंग पैलेट बनना बंद होई जंदा ऐ ते सिस्टम बनना शुरू होई जंदा ऐ। एसवीजी चित्रण भरने, स्ट्रोक, ते ढाल दे पार उस्सै किश रंगें दा दुबारा इस्तेमाल करने दी प्रवृत्ति रखदे न। रिश्तेदार रंग तुसेंगी उनें रिश्तें गी इक बारी परिभाशित करने ते हर थाह् र उंदा दुबारा इस्तेमाल करने दी अनुमति दिंदा ऐ — जि’यां एनिमेटरें नमें दृश्य बनाने लेई बैकग्राउंड दा दुबारा इस्तेमाल कीता हा।
फाउंडेशन दा रंग इक बारी बदलो, ते हर व्युत्पन्न रंग स्वतः अपडेट होंदा ऐ, बिना कुसै बी चीज़ दी हत्थै कन्नै दुबारा गणना कीते। एनिमेटेड ग्राफिक्स दे बाहर, मैं बटन ते लिंक जनेह् इंटरएक्टिव तत्वें दी स्थितियें आस्तै रंगें गी परिभाशित करने आस्तै इस गै पद्धति दा इस्तेमाल करी सकदा हा। फाउंडेशन दा रंग मैं अपने “लुल्लाबाय-बाय बियर” टून टाइटल च इस्तेमाल कीता हा, सियान दिखने आला नीला ऐ। बैकग्राउंड मेरी फाउंडेशन ते गहरे रंग दे संस्करण दे बीच रेडियल ढाल ऐ।
बिल्कुल अलग-अलग मूड कन्नै वैकल्पिक संस्करण बनाने लेई, मिगी सिर्फ फाउंडेशन दा रंग बदलने दी लोड़ ऐ: --नींव: # 5accd6 ऐ; --ग्रेड-अंत: var (--नींव); --grad-start: oklch (var (--फाउंडेशन थमां) calc (एल - 0.2357) calc (सी * 0.833) एच);
रंग मूल्यें गी डुप्लिकेट कीते बगैर उनें कस्टम गुणें गी मेरे एसवीजी ढाल कन्नै बाइंड करने आस्तै, मैं हार्ड-कोडेड स्टॉप-रंग मूल्यें गी इनलाइन शैलियें कन्नै बदली दित्ता:
<पथ भरना = "url (# बीजी-ग्रेड)" भरना="#5DCDD8" d = "[...]"/>
अगले, मिगी एह् सुनिश्चित करने दी लोड़ ही जे मेरा टून टेक्स्ट हमेशा उस बी फाउंडेशन रंग कन्नै विपरीत ऐ जेह्ड़ा मैं चुनदा ऐ। 180deg ह्यू घुमाव इक पूरक रंग पैदा करदा ऐ जेह्ड़ा निश्चित रूप कन्नै पॉप करदा ऐ — पर असहजता कन्नै कंपन करी सकदा ऐ: .पाठ-प्रकाश { भरना: oklch (var (--नींव से) एल सी कैलक (ज + 180)); } ऐ
90° दी शिफ्ट पूरी चाल्लीं पूरक होने दे बगैर इक सजीव द्वितीयक रंग पैदा करदी ऐ : .पाठ-प्रकाश { भरना: oklch (var (--नींव से) एल सी कैलक (ज - 90)); } ऐ
क्विक ड्रॉ मैकग्रा दे 1959 दे टून टाइटल “एल कबोंग“ दा मेरा मनोरंजन उस्सै तकनीकें दा इस्तेमाल करदा ऐ पर मते विविध पैलेट कन्नै। मसाल आस्तै, नींह् दे रंग ते गहरे रंग दी छाया दे बश्कार इक होर रेडियल ढाल ऐ।
पृष्ठभूमि च इमारत ते पेड़ बस इक गै नींह् दे रंग दे बक्ख-बक्ख शेड्स न। उनें रस्तें आस्तै मिगी दो अतिरिक्त भरने दे रंगें दी लोड़ ही: .बीजी-मिड { भरना: oklch (var (--नींव से) calc (एल - 0.04) calc (सी * 0.91) एच); } ऐ
.बीजी-अंधेरे { भरना: oklch (var (--नींव से) calc (एल - 0.12) calc (सी * 0.64) एच); } ऐ
जदूं फाउंडेशनें गी हिलना शुरू होई जंदा ऐ अज्ज तकर जेह्ड़ा बी मैं दस्सेआ ऐ, ओह् स्थिर रेहा ऐ। इत्थूं तगर जे कोई फाउंडेशन दा रंग बदलने आस्तै कलर पिकर दा इस्तेमाल करदा ऐ तां बी ओह् बदलाव तुरत गै होई जंदा ऐ। पर एनिमेटेड ग्राफिक्स शायद ही कदें इक थाह् र पर खड़ोते दे न — सुराग नांऽ च गै ऐ। तो, जेकर रंग सिस्टम दा हिस्सा ऐ तां कोई कारण नेईं ऐ जे एह् बी एनिमेट नेईं करी सकदा। फाउंडेशन दे रंग गी एनिमेट करने लेई, मिगी पैह् ले इसगी इसदे ओकेएलसीएच चैनलें च बंडने दी लोड़ ऐ— हल्कापन, क्रोमा, ते रंग। पर इक महत्वपूर्ण अतिरिक्त कदम ऐ: मिगी उनें मूल्यें गी टाइप कीते गेदे कस्टम गुणें दे रूप च रजिस्टर करने दी लोड़ ऐ। पर इसदा केह़ मतलब ऐ? डिफाल्ट रूप कन्नै, इक ब्राउज़र गी पता नेईं ऐ जे CSS कस्टम प्रॉपर्टी वैल्यू कुसै रंग, लंबाई, नंबर जां कुसै होर चीज़ दा पूरी चाल्ली कन्नै प्रतिनिधित्व करदा ऐ जां नेईं. इसदा मतलब ऐ जे अक्सर एह् एनीमेशन दे दौरान सुचारू रूप कन्नै इंटरपोलेट नेईं कीते जाई सकदे न, ते इक वैल्यू थमां दुए वैल्यू च कूददे न। कस्टम प्रॉपर्टी रजिस्टर करने कन्नै ब्राउज़र गी दस्सदा ऐ जे ओह् किस चाल्ली दे मूल्य दा प्रतिनिधित्व करदा ऐ ते समें कन्नै उसी किस चाल्ली बर्ताव करना चाहिदा ऐ। इस मामले च, मैं चांह् दा ऐ जे ब्राउज़र मेरे रंग चैनलें गी नंबर दे रूप च समझै तां जे उनेंगी सुचारू रूप कन्नै एनिमेट कीता जाई सकै। @ संपत्ति -- च-एल { वाक्य रचना: "<नंबर>"; विरासत च मिलदा ऐ: सच्चा; प्रारंभिक-मूल्य: 0.40 ऐ; } ऐ
@ संपत्ति -- च-सी { वाक्य रचना: "<नंबर>"; विरासत च मिलदा ऐ: सच्चा; प्रारंभिक-मूल्य: 0.11 ऐ; } ऐ
@ संपत्ति -- च-एच { वाक्य रचना: "<नंबर>"; विरासत च मिलदा ऐ: सच्चा; प्रारंभिक-मूल्य: 305 ऐ; } ऐ
इक बारी रजिस्टर होने पर, एह् कस्टम गुण देशी CSS दे समान बर्ताव करदे न। ब्राउज़र उनेंगी फ्रेम-दर-फ्रेम इंटरपोलेट करी सकदा ऐ। मैं फिर उनें चैनलें थमां नींह् दा रंग दुबारा बनाना: --नींव: oklch (var (-- च-एल) var (-- च-सी) var (-- च-ज));
इस कन्नै फाउंडेशन दा रंग एनिमेबल होई जंदा ऐ, ठीक उस्सै चाल्लीं जि'यां कुसै बी होर संख्यात्मक मूल्य। इत्थै इक साधारण “सांस” एनीमेशन ऐ जेह् ड़ा समें कन्नै हल्के ढंगै कन्नै हल्के ढंगै कन्नै शिफ्ट करदा ऐ: @ कीफ्रेम सांस लैना { 0%, 100% { -- च-एल: 0.36; } ऐ 50% { -- च-एल: 0.46 ऐ; } ऐ } ऐ
.टून-शीर्षक { एनीमेशन: सांस 10s आसानी-इन-आउट अनंत; } ऐ
कीजे भरने, ढाल, ते स्ट्रोक च हर दूआ रंग --फाउंडेशन थमां हासल होंदा ऐ, एह् सारे इकट्ठे एनिमेट करदे न, ते कुसै बी चीज़ गी मैन्युअल रूप कन्नै अपडेट करने दी लोड़ नेईं ऐ. इक एनिमेटेड रंग, कई असर इस प्रक्रिया दे शुरू च, मैं सोचेआ जे केह् सीएसएस सापेक्ष रंग मूल्य होर संभावनाएं गी पेश करी सकदे न ते कन्नै गै उनेंगी लागू करने च बी सरल बनाई सकदे न। मैं हाल च गै अपनी वेबसाइट दे संपर्क पृष्ठ पर इक नमां सोने दी खदान बैकग्राउंड जोड़ेआ ऐ, ते पैह् ली पुनरावृत्ति च तेल दे लैंप शामल हे जेह् ड़े चमकदे न ते झूलदे न।
मैं एह् पता लाना चांह् दा हा जे किस चाल्ली सीएसएस रिश्तेदार रंगें गी एनिमेट करना लैंपें थमां रंगें कन्नै टिंट करियै खदान दे अंदरूनी हिस्से गी होर यथार्थवादी बनाई सकदा ऐ। मैं चाह्न्दा हा जे ओह् अपने आस-पास दी दुनिया गी उस चाल्ली प्रभावित करन, जिस चाल्ली असली रोशनी करदी ऐ। तो, कई रंगें गी एनिमेट करने दे बजाय, मैं इक छोटा सा लाइटिंग सिस्टम बनाया जेड़ा सिर्फ इक रंग गी एनिमेट करदा ऐ।
मेरा पैह्ला कम्म बैकग्राउंड ते मेरे लैंपें दे बीच इक ओवरले लेयर गी स्लॉट करना हा: <मार्ग आईडी = "ओवरले" ऐ। भरना = "var (--ओवरले-टिंट)"। [...] शैली = "मिश्रण-मिश्रण-मोड: रंग"। />
मैं मिक्स-ब्लेंड-मोड: रंग दा इस्तेमाल कीता कीजे जेह् ड़ा इसदे थल्लै जेह् ड़ा ऐ उसी टिंट करदा ऐ ते कन्नै गै निचले चमक गी बचांदा ऐ। चूंकि मैं चाह्न्नां जे ओवरले सिर्फ एनीमेशन चालू होने पर गै दिक्खेआ जा, मैं ओवरले ऑप्ट-इन कीता: .svg-खान # ओवरले { प्रदर्शन: कोई बी नेईं; } ऐ
@ मीडिया (पसंद-कम-गति: कोई-पसंदीदा) { .svg-mine [डेटा-एनीमेशन = पर] # ओवरले { प्रदर्शन: ब्लॉक; अस्पष्टता: 0.5 ऐ; } ऐ } ऐ
ओवरले अपनी जगह पर ही, पर अजें तगर लैंपें कन्नै नेईं जुड़े दा हा। मिगी इक लाइट सोर्स दी लोड़ ही। मेरे लैंप सादे न, ते हर इक च इक सर्कल तत्व होंदा ऐ जिसगी मैं इक फिल्टर कन्नै धुंधला करी दित्ता हा। फिल्टर पूरे घेरे उप्पर बड़ा नरम धब्बा पैदा करदा ऐ।
ओवरले ते लैंप गी बक्ख-बक्ख एनिमेट करने दे बजाय, मैं इक गै "लौ" रंग टोकन गी एनिमेट करदा ऐ ते बाकी सब किश उस थमां हासल करदा ऐ। पैह् ले, मैं ओकेएलसीएच चैनलें लेई त्रै टाइप कीते गेदे कस्टम गुण रजिस्टर करदा ऐ: @ संपत्ति --एफएल-एल { वाक्य रचना: "<नंबर>"; विरासत च मिलदा ऐ: सच्चा; प्रारंभिक-मूल्य: 0.86 ऐ; } ऐ @ संपत्ति --एफएल-सी { वाक्य रचना: "<नंबर>"; विरासत च मिलदा ऐ: सच्चा; प्रारंभिक-मूल्य: 0.12 ऐ; } ऐ @ संपत्ति --एफएल-एच { वाक्य रचना: "<नंबर>"; विरासत च मिलदा ऐ: सच्चा; प्रारंभिक-मूल्य: 95 ऐ; } ऐ
मैं उनें चैनलें गी एनिमेट कीता, जानबूझिए किश फ्रेमें गी नारंगी दी बक्खी धकेलेआ तां जे झिलमिलाहट साफ तौर पर फायरलाइट दे रूप च पढ़ी जा:
@ कीफ्रेम्स लौ { 0%, 100% { --एफएल-एल: 0.86 ऐ; --fl-c: 0.12 ऐ; --fl-h: 95 ऐ; } ऐ 6% { --fl-l: 0.91 ऐ; --fl-c: 0.10 ऐ; --fl-h: 92 ऐ; } ऐ 12% { --fl-l: 0.83 ऐ; --fl-c: 0.14 ऐ; --fl-h: 100 ऐ; } ऐ 18% { --fl-l: 0.88 ऐ; --fl-c: 0.11 ऐ; --fl-h: 94 ऐ; } ऐ 24% { --fl-l: 0.82 ऐ; --fl-c: 0.16 ऐ; --fl-h: 82 ऐ; } ऐ 30% { --fl-l: 0.90 ऐ; --fl-c: 0.12 ऐ; --fl-h: 90 ऐ; } ऐ 36% { --fl-l: 0.79 ऐ; --fl-c: 0.17 ऐ; --fl-h: 76 ऐ; } ऐ 44% { --fl-l: 0.87 ऐ; --fl-c: 0.12 ऐ; --fl-h: 96 ऐ; } ऐ 52% { --fl-l: 0.81 ऐ; --fl-c: 0.15 ऐ; --fl-h: 102 ऐ; } ऐ 60% { --fl-l: 0.89 ऐ; --fl-c: 0.11 ऐ; --fl-h: 93 ऐ; } ऐ 68% { --fl-l: 0.83 ऐ; --fl-c: 0.16 ऐ; --fl-h: 85 ऐ; } ऐ 76% { --fl-l: 0.91 ऐ; --fl-c: 0.10 ऐ; --fl-h: 91 ऐ; } ऐ 84% { --fl-l: 0.85 ऐ; --fl-c: 0.14 ऐ; --fl-h: 98 ऐ; } ऐ ९२% ऐ {--fl-l: 0.80 ऐ; --fl-c: 0.17 ऐ; --fl-h: 74 ऐ; } ऐ } ऐ
फिर मैं उस एनीमेशन गी एसवीजी गी स्कोप कीता, तां जे साझा चर लैंप ते मेरे ओवरले दोनें गी उपलब्ध न:
@ मीडिया (पसंद-कम-गति: कोई-पसंदीदा) { .svg-mine [डेटा-एनीमेशन = पर] { एनीमेशन: लौ 3.6s अनंत रैखिक; अलगाव: अलग करना;
/* एनिमेटेड चैनलें थमां इक लौ रंग बनाओ */ -- लौ: oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* लौ से व्युत्पन्न दीपक का रंग */ --दीपक-कोर: oklch (var (-- लौ) से calc (एल + 0.05) calc (सी * 0.70) एच);
/* उसी लौ से व्युत्पन्न ओवरले टिंट */ --ओवरले-टिंट: oklch (var (-- लौ से) calc (एल + 0.06) calc (सी * 0.65) calc (ज - 10)); } ऐ } ऐ
आखरी च, मैं उनें व्युत्पन्न रंगें गी चमकदे लैंपें ते उंदे प्रभावित ओवरले पर लागू कीता: @ मीडिया (पसंद-कम-गति: कोई-पसंदीदा) { .svg-mine [डेटा-एनीमेशन = पर] # खान-दीपक-1 > सर्कल, .svg-mine [डेटा-एनीमेशन = पर] # खान-दीपक-2 > सर्कल { भरना: var (--दीपक-कोर); } ऐ
.svg-mine [डेटा-एनीमेशन = पर] # ओवरले { प्रदर्शन: ब्लॉक; भरना: var (--ओवरले-टिंट); अस्पष्टता: 0.5 ऐ; } ऐ } ऐ
जदूं लौ नारंगी रंग दी बक्खी शिफ्ट होंदी ऐ तां लैंप गर्म होई जंदे न ते उंदे कन्नै गै नजारा गर्म होई जंदा ऐ। जदूं लौ ठंडा होंदी ऐ तां सब किश इकट्ठा होई जंदा ऐ। सबतूं शैल गल्ल एह् ऐ जे कुसै बी चीजै गी मैन्युअल रूप कन्नै नेईं लिखेआ जंदा। जेकर मैं फाउंडेशन दा रंग बदलदा हां जां लौ एनीमेशन रेंज गी ट्वीक करदा हां तां पूरा लाइटिंग सिस्टम इक गै समें च अपडेट होंदा ऐ। अंतिम नतीजा तुस मेरी वेबसाइट पर दिक्खी सकदे ओ। पुन: उपयोग, पुनर्प्रयोजन, पुनर्विचार उनें हन्ना-बारबेरा एनिमेटरें गी जरूरत दे कारण तत्वें गी दुबारा प्रयोजन करने लेई मजबूर कीता गेआ हा, पर मैं रंगें दा दुबारा इस्तेमाल करदा हां कीजे इस कन्नै मेरे कम्मै गी होर सुसंगत ते बनाए रखने च सहूलियत होंदी ऐ। CSS सापेक्ष रंग मान मिगी इजाजत दिंदे न:
इक नींव दा रंग परिभाषित करो, वर्णन करो कि होर रंग इस कन्नै किस चाल्ली जुड़े दे न, हर जगह उन रिश्तें दा दुबारा इस्तेमाल करो, ते... इक मान बदलियै सिस्टम गी एनिमेट करो।
सापेक्ष रंग सिर्फ थीमिंग गी आसान नेईं बनांदा। एह् सोचने दे इक तरीके गी प्रोत्साहित करदा ऐ जित्थें रंग बी गति दी तर्ज पर इरादे कन्नै होंदा ऐ — ते जित्थें इक मूल्य गी बदलने कन्नै इक पूरे दृश्य गी उसदे हेठले कम्मै गी दुबारा लिखे बगैर बदली सकदा ऐ।
