एसवीजी पैटर्न - सीएसएस-ट्रिक्स

Anonim

एसवीजी तत्व हमें अपने एसवीजी मार्कअप के अंदर पैटर्न को परिभाषित करने और उन पैटर्नों का उपयोग करने की अनुमति देता है fill। पैटर्न के लिए मूल प्रक्रिया कुछ इस प्रकार है:

  • एसवीजी के अंदर को परिभाषित करें
  • पैटर्न के अंदर आकृतियों को परिभाषित करें
  • आकृतियों का उपयोग करें
  • एक नया आकार बनाएं और इसे पैटर्न के साथ भरें

यह पैटर्न के रूप में इस्तेमाल किए जाने वाले सरल एसवीजी आकृतियों का एक संग्रह है। यह सूची समय के साथ बढ़ सकती है, लेकिन नए और रोमांचक पैटर्न बनाने के लिए एक प्रारंभिक बिंदु के रूप में वाक्यविन्यास के लिए एक व्यापक संग्रह होने के लिए विचार कम है।

हम CodePen पर इन का एक संग्रह भी रख रहे हैं।

सर्कल पैटर्न

 

चेकरबोर्ड पैटर्न

 

षट्भुज प्रतिरूप

 

घन पैटर्न

 

शेवरॉन पैटर्न

 

यदि आप पैटर्न के विभिन्न गुणों के साथ वास्तविक समय में खेलना चाहते हैं, तो यह महसूस करें कि पैटर्निंग कैसे काम करता है, इसके लिए प्रयास करें: