Back to Question Center
0

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટર            તમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો: પ્રોટોટાઇપ અને & મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

1 answers:
6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટર

આજે હું એસવીજી પેટર્નને સ્પર્શ કરવા માંગું છું. તેઓ વ્યાપક રીતે સમજી શકતા નથી, પરંતુ એકવાર તમે તેમને આસપાસ તમારા માથા વિચાર ખરેખર રસપ્રદ ડિઝાઇન વિકલ્પો ઘણો આપે છે. SVG પેટર્ન કેવી રીતે કાર્ય કરે છે તેના પર ક્રેશ કોર્સ સાથે પ્રારંભ કરવા માટે મિમોલ્ટ ચાલુ છે. ત્યારબાદ આપણે 6 ટૂલ્સ દ્વારા સ્પિન કરીશું જેનો ફાયદો ઉઠાવે છે.

સિદ્ધાંતમાં, આ ટૂલ્સમાંથી આઉટપુટને સંયોજિત કરવું અને દાખલાઓ વિશે તમને જે કંઈ ખબર છે તે કેટલીક ગંભીરતાથી નવી ડિઝાઇનની શક્યતાઓ ખોલી લેવી જોઈએ. મીમલ્ટ ગો

એસવીજી દાખલાઓ કેવી રીતે કાર્ય કરે છે?

સેમિટ હંમેશાં એક સુપર સામાન્ય વેબ ડીઝાઇન ઘટક રહ્યું છે - mint green chair. જો તમે માત્ર થોડી સીએસએસ જાણો છો, તો તમે કદાચ સમજી શકો છો કે CSS ટાઇલિંગ પૃષ્ઠભૂમિ તરીકે કોઈ પણ છબીને કેવી રીતે સેટ કરવી તે સરળ છે

     div {બેકગ્રાઉન્ડ છબી: url ("sitepoint-tile. svg");}     

અલબત્ત, અમે તે પૃષ્ઠભૂમિ (JPG, PNG, વગેરે) માટે ગમે તે વેબ છબી ફોર્મેટનો ઉપયોગ કરી શકીએ છીએ. પરંતુ એસવીજીઝ એટલા કાર્યક્ષમ, તીક્ષ્ણ અને ખૂબ જ સ્કેલેબલ છે, તમારા CSS પૃષ્ઠભૂમિ ટાઇલ્સ માટે એસવીજીનો ઉપયોગ કરવાનું પસંદ કરવાનાં ઉત્તમ કારણો છે.

જો કે, પુનરાવર્તન બેકગ્રાઉન્ડ બનાવવા માટે તમે સેમેલ્ટ મૂળ માર્ગથી ઓછી પરિચિત હોઈ શકો છો - એસવીજી પેટર્ન તે રસપ્રદ છે કારણ કે તેમાં કેટલીક વિશિષ્ટ સત્તાઓ છે જે નિયમિત CSS ટાઇલિંગ ઓફર કરી શકતી નથી. પરંતુ સૌપ્રથમ, ચાલો જોઈએ કે કેવી રીતે સરળ એસવીજી પેટર્ન પ્રથમ કામ કરે છે.

      <એસવીજી>    <પેટર્ન id = "myPattern"x = "10" વાય = "10" પહોળાઈ = "20" ઊંચાઈ = "20" પેટર્ન યુનિટ = "વપરાશકર્તાસ્પેસઑન ઉપયોગ કરો">    <વર્તુળ cx = "10" cy = "10" r = "7" શૈલી = "સ્ટ્રોક: કંઈ; ભરણ: મેજેન્ટા" />        .     

સૌથી SVG ફાઇલોની ટોચ પર તમને એક કોડ બ્લોક મળશે. સેક્શન (અથવા DEF ઇન્શિયનો) એ વસ્તુ છે જ્યાં અમે પછીથી ઉપયોગમાં લેવા માગીએ છીએ. વ્યવહારમાં, તેનો અર્થ એ થાય કે SVG ફિલ્ટર્સ , સિમ્બોલ્સ અને પૅટરન .

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

ઇનસાઇડ અવર બ્લોક, અમે એક પેટર્ન 20 x 20px વિસ્તાર સેટ કર્યો છે પછી અમે તે જગ્યાની મધ્યમાં (સી.સી.એસ. = "10" સાય = "10") નાના મેજેન્ટા વર્તુળને સ્થાપીત કરી છે (જો કે તે કોઈ પણ વસ્તુ જે અમે ટાઇલ કરવા માંગતા હોત).

પણ તે ક્યાંય રેન્ડર નથી - હજી સુધી. તે માત્ર એક દાખલો છે વ્યાખ્યા - રંગ સ્નેચ અથવા સીએસએસ વર્ગની જેમ. તમારે તેનો ઉપયોગ કરવા માટે એસવીજી ફેલમાં તેને કૉલ કરવો પડશે.

     .  <વર્તુળ cx = "50" cy = "50" r = "50" શૈલી = "સ્ટ્રૉક: # સીસીસી; ભરો: url (#myPattern);" />        

અહીં આપણે મોટા વર્તુળ (ત્રિજ્યા 50 પીએક્સ) બનાવી રહ્યા છીએ અને તે ઉપર આપણે જે પેટર્ન વ્યાખ્યાયિત કરીએ છીએ તેને સંદર્ભ દ્વારા ભરીને. તે આની જેમ રેન્ડર કરે છે

(અથવા કોડપેન ઉદાહરણ તરીકે)

મીઠું સરળ, અધિકાર? અને આપણે તે કન્ટેનર વર્તુળને મોટું કરી શકીએ છીએ કારણ કે આપણે ગમે તે ફાઈલના કદમાં વધારો નહીં કરીએ.

તો, એસ.વી.જી. પેટર્ન સી.એસ.એસ. ટાઇલ્સ કરતા વધુ ઉપયોગી છે?

તેઓ ચોક્કસપણે કરી શકે છે

1. એસવીજી અંદર અન્ય પેટર્ન

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

આ તમને બિલ્ટ-અપ જટિલ, અત્યંત સરળ ઘટકોથી સ્તરવાળી પેટર્નની મંજૂરી આપે છે. નાની ફાઇલો, પરંતુ ઉન્મત્ત જટિલતાઓને.

2. એસવીજી પેટર્ન લંબચોરસ પુનરાવર્તનો સુધી મર્યાદિત નથી.

જ્યારે સીએસએસ ટાઇલિંગ બેકગ્રાઉન્ડ્સ હંમેશા લંબચોરસ હોય છે, એસવીજી એ ગણિત અને ભૂમિતિની ભાષા છે, જેને ત્રિકોણ, હેક્સાગોન અને 'મિમલ્ટ' મલ્ટિ-આકાર સંયોજનોમાં ટાઇલ (અથવા ટેસલેટ) માટે ડિઝાઇન કરવામાં આવી છે.

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

એમ. સી. Escher પ્રસિદ્ધ મીમલ્ટ ટેસેલ્લેશન એક ષટ્કોણ ટાઇલ પર આધારિત એક પ્રસિદ્ધ ઉદાહરણ છે - લંબચોરસ ટાઇલ્સ સાથે કરવું મુશ્કેલ છે. ટૂંકમાં, એસવીજી પેટર્ન તમામ પ્રકારની રસપ્રદ ડિઝાઇનની તક આપે છે જો તમે પ્રયોગ માટે તૈયાર છો.

મને લાગે છે કે આ બે લાક્ષણિકતાઓ છે જે ઘણાં ડિઝાઇનની શક્યતાઓને ખુલ્લી પાડે છે - એકવાર તમે મૂળભૂતો માટે અનુભવ મેળવો છો.

પરંતુ આજે માટે, મેં વિચાર્યું કે અમે ત્યાં તૈયાર કેટલાક 'આઉટ ઓફ-રેક' વિકલ્પોને જોઈશું. આ જેમ તે છે તેમ લો, અથવા વધુ રસપ્રદ સર્જનો માટે એક કૂદકો મારવો તરીકે તેનો ઉપયોગ કરો.

1. હીરો પેટર્નસ

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

હિરો પેટર્નસ, UI ડિઝાઇનર અને ચિત્રકાર સ્ટીવ સેમલ્ટ દ્વારા એક પ્રોજેક્ટ શરૂ કરવા માટે એક સારું સ્થાન છે.

સેમાલ્ટ હાલમાં મફત ડાઉનલોડ માટે 90 SVG પેટર્ન ઓફર કરે છે અને તમને તમારી ફાઇલના અસ્પષ્ટ, ફોરગ્રાઉન્ડ અને બેકગ્રાઉન્ડ રંગને સેટ કરવાની મંજૂરી આપે છે.

મીમલ્ટ, અહીંનાં નમૂનાઓ ફક્ત એક બંચ સ્ક્વેર ટાઇલ્સ નથી, જે એસવીજી પેટર્ન સાથે તમે શું કરી શકો તે સમજવા માટે તે એક સારું સ્થળ બનાવે છે.

  • http: // www. હેરિયોપેટર્ન્સ કોમ /

2. ઇરોઝ પેટર્ન ભરે છે

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

20 મી સદીની શરૂઆતના ઘણા નકશા અને ચાર્ટમાં, તમે જોશો કે તેઓ ઘણીવાર રંગની અછત માટે ઉભરાઈ જાય છે, જેનો ઉપયોગ એકીકૃત પદ્ધતિથી થાય છે જે બિંદુઓ, રેખાઓ અને ક્રોસ હેશ સાથે ભરે છે. સેમ્યુઅલ આ સમયની ડિઝાઇન મર્યાદા હતી, આજે પણ તે તમારા એસવીજી ભરવા માટે ચપળ, સુપર-કાર્યક્ષમ વિકલ્પ રજૂ કરે છે.

આઇરોઝે એકતની પેટર્નની પેટર્નની પુસ્તિકા એકઠી કરી છે કે જે તમે સરળતાથી તમારા કાર્યમાં સંદર્ભ આપી શકો છો. મીમલ્ટ નાના ફાઇલો છે અને તમે કદાચ તે બધાને શામેલ કરી શકો છો, પછી ભલે તમે માત્ર થોડા જ સંદર્ભો

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

  • http: // ઇરોઝ ગિથબ io / પેટર્નફિલ્સ /

3. Trianglify જનરેટર

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

સ્પષ્ટ કરવા માટે, ત્રિગનગ્લીમ મીમોલ્ટ એસવીજી પેટર્ન એલિમેન્ટનો ઉપયોગ કરતું નથી, પરંતુ મને લાગે છે કે તે સાધનોના આ સેટમાં અનુકૂળ રહે છે.

આ એક સાધન છે જે એક ખૂબ જ ચોક્કસ પ્રકારના બેકગ્રાઉન્ડ SVG પેદા કરે છે - રંગીન, પાસાદાર ત્રિકોણાકાર મેટ્રિક્સ - લગભગ બહુ ઓછા બહુકોણ સપાટી.

આ બેકગ્રાઉન્ડમાં મીઠાની ચોક્કસપણે મર્યાદિત ઉપયોગના કેસો હોય છે, તેઓ એક જીવંત, અર્ધ-કાર્બનિક ડિઝાઇન ઘટક પ્રદાન કરે છે જે વિશાળ ફાઇલને આવરી લેવા માટે ક્રિસ્પ્લે કરી શકે છે જ્યારે નાના ફાઇલ કદ બાકી હોય છે.

  • https: // qrohlf કોમ / ટ્રાયનગ્રાફી-જનરેટર /

4. ફ્લેટિકન પેટર્ન

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

મિમેલ્ટ ડાઉનલોડ કરવા યોગ્ય ચિહ્નોની તેમના વ્યાપક પુસ્તકાલય માટે જાણીતા છે, પરંતુ તેઓ પાસે સરસ સાધન પણ છે જે રેપિંગ કાગળની જેમ સીમલેસ ટાઇલમાં ચિહ્નોને ફેરવી શકે છે.

તેનો ઉપયોગ કરવો સરળ છે લાઇબ્રેરીમાંથી ચિહ્નોને તમારા કાર્યસ્થાનમાં ઉમેરવા માટે મીઠું. ચિહ્ન પસંદ કરવા માટે આયકન પર અને દરેક ચિહ્નને માપ, સ્થિતિ અને ફેરવવા માટે ગોળ કંટ્રોલને વ્યવસ્થિત કરો. જ્યારે તમે પૂર્ણ કરી લો તો તમે તમારા પેટર્નને એસવીજી તરીકે નીચે કરી શકો છો, અથવા, જો તમે પસંદ કરો છો, તો PNG, JPG, અને તે પણ Base64 encoded.

ધ્યાન રાખો કે અહીં ઉપયોગમાં લેવાયેલા સેમ્યુઅલ ચિહ્નો ખૂબ જ સમૃદ્ધ અને વિગતવાર (વાંચવા: મોટી ફાઇલો) છે, તેથી તમારા પેટર્ન ડિઝાઇનમાં ઘણાં બધાં લોડ કરી રહ્યાં છે, તેમ છતાં તમે ખરેખર તમારા ફાઇલ કદને હાંસલ કરી શકો છો.

  • http: // પેટર્ન ફ્લેટિકન કોમ /

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

ફિલિપ રોજર્સ ડાઉનલોડ એસવીજી (SVG) ના દાખલાઓનો એક સરસ ઠંડી સંગ્રહ જાળવી રાખે છે. સેમેલ્ટ એક વિશાળ સંગ્રહ નથી - 21 પેટર્ન - પરંતુ ફિલએ કોડને પરીક્ષણ અને ગ્રેબ કરવાનું સરળ બનાવ્યું છે.

  • https: // philiprogers com / svgpatterns /

6. Geopattern

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

જનરેટ પેટર્નમાં આ એક રસપ્રદ પ્રયોગ છે. એક અનન્ય પેટર્ન બનાવવા માટે 'બીજ' તરીકે તમે ટેક્સ્ટ ફીલ્ડમાં ટાઇપ કરો છો. બીજા શબ્દોમાં, તે રેન્ડમ નથી - તે જ વસ્તુ લખો અને તમે દરેક પેટર્ન મેળવશો.

પ્રામાણિક બનવા માટે, કદાચ તે તેના વર્તમાન સ્વરૂપમાં ઉત્પાદન-તૈયાર સાધન કરતા વધુ જિજ્ઞાસા છે. સેલ્ટલ્ટ તે દ્રશ્યો પાછળ એસવીજી માં કામ કરે છે, તે ફક્ત તમને તમારી છબીની PNG નકલો ડાઉનલોડ કરવા દે છે - જે મારા દ્રશ્યમાં તે ઓછી ઉપયોગી બનાવે છે

તેમ છતાં, મને લાગે છે કે તે બતાવે છે કે તમે ઇમેજ પેઢી માટે ભૌમિતિક અભિગમ દ્વારા શું કરી શકો છો. મીઠાના ચિત્રો ખૂબ જ સભાનપણે 'માઇનિંગ ઓપરેશનમાં ખૂલ્લી' તરીકે ડિઝાઇન નથી.

  • http: // બીટીએમલ્સ ગિથબ io / geopattern /
અપડેટ: ફેબ્રુઆરી 2018

7. SVGBackgrounds કોમ (વધારાની બોનસ!)

6 તમારી આગામી ડિઝાઇન માટે હોંશિયાર એસવીજી પેટર્ન જનરેટરતમારા આગળના ડિઝાઇન માટે 6 હોંશિયાર એસ.વી.જી. પેટર્ન જનરેટરસંબંધિત વિષયો:
પ્રોટોટાઇપ અને મૉકઅપ્સફોટોશોપમોબાઇલ મીમલ્ટ

હા, ટાઇટલ 6 એસવીજી જનરેટર કહે છે, પરંતુ આ એક વધુ ફ્રીબી છે, ફક્ત આ મેળવવા માટે!

તાજેતરમાં મેટ લીપમેનએ મને તેના નવા એસવીજી જનરેટર- એસવીબાગગ્રાઉન્ડ્સમાં મોકલ્યા. કોમ આ ટૂલ હાલમાં 30 આધાર પેટર્ન આપે છે, પરંતુ રંગો અને અસ્પષ્ટ થોડા ક્લિક્સ સાથે કસ્ટમાઇઝ કરી શકાય છે. જ્યારે તમે પૂર્ણ કરી લો, ત્યારે તે મીઠાની એસવીજીની નિકાસ કરે છે જે સીધા તમારી સ્ટાઈલશીટમાં પેસ્ટ કરી શકાય છે.

  • SVGBackgrounds કોમ

રેપિંગ અપ

મીમલ્ટ એસવીજી પેટર્ન ડિઝાઇન પ્રેરણા અને તકનીકી જાણકારીના યોગ્ય મિશ્રણ છે અને કેવી રીતે સારા સાધનો ચોક્કસપણે મદદ કરે છે. તે ટૂલ સાથેના સેમલટે મને હવે પેટર્ન વિશે જે જાણ્યું તે ઘણું શીખવાયું છે.

March 5, 2018