SVG pattern fills

12 Dec 2019

charts colorblind design js

Bunch of resources related to SVG pattern fills

Sample patterns

M 0 0 L 2.5 10 M 2.5 10 L 5 0 M 5 0 L 7.5 10 M 7.5 10 L 10 0 

M 0 0 L 2.5 2.5 M 2.5 2.5 L 5 0 M 5 0 L 7.5 2.5 M 7.5 2.5 L 10 0 
M 0 2.5 L 2.5 5 M 2.5 5 L 5 2.5 M 5 2.5 L 7.5 5 M 7.5 5 L 10 2.5 
M 0 5 L 2.5 7.5 M 2.5 7.5 L 5 5 M 5 5 L 7.5 7.5 M 7.5 7.5 L 10 5 
M 0 7.5 L 2.5 10 M 2.5 10 L 5 7.5 M 5 7.5 L 7.5 10 M 7.5 10 L 10 7.5 

M 0 2.5 L 2.5 7.5 M 2.5 7.5 L 5 2.5 M 5 2.5 L 7.5 7.5 M 7.5 7.5 L 10 2.5 

M 0 2.5 L 5 7.5 M 5 7.5 L 10 2.5 

Links

https://codepen.io/anthonydugois/pen/mewdyZ
https://jsbin.com/leqeze/embed?html,output
https://jsfiddle.net/highcharts/gqg618eb/
https://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/pattern/
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/infographic/
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/pattern-fill-area/
https://api.highcharts.com/class-reference/Highcharts.PatternOptionsObject#path
https://bocoup.com/blog/using-svg-patterns-as-fills
http://localhost:6969/Colors.html
https://webdesign.tutsplus.com/tutorials/how-to-use-svg-patterns-as-backgrounds--cms-31507
https://www.heropatterns.com/
https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/
https://www.base64decode.org/
https://www.sitepoint.com/6-incredible-svg-pattern-generators/
http://iros.github.io/patternfills/sample_svg.html


Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.