Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG height is 684? #35

Open
erodewald opened this issue Apr 5, 2019 · 4 comments
Open

SVG height is 684? #35

erodewald opened this issue Apr 5, 2019 · 4 comments

Comments

@erodewald
Copy link

I'm not sure what's going on, but I have generated several patterns and they always resolve to the SVG height being 684 with a width of 100.

const pattern = GeoPattern.generate("d2040d8d-a0b2-40a3-9f48-db61f09cb47c")
console.log(pattern.toDataUri())
Output

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iNjg0Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2IoMjQwLDEwMSwzNikiPjwvcmVjdD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDIiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LC0xMzUpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjAyIiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw1NDkpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjEzMjY2NjY2NjY2NjY2NjY1IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwtMTE2KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xMzI2NjY2NjY2NjY2NjY2NSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNTY4KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wOTgiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LC05NykiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMDk4IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw1ODcpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwtNzgpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw2MDYpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjA5OCIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsLTU5KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wOTgiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDYyNSkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMDQ2IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwtNDApIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjA0NiIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNjQ0KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4wNTQ2NjY2NjY2NjY2NjY2NyIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsLTIxKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4wNTQ2NjY2NjY2NjY2NjY2NyIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNjYzKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4wMiIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsLTIpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjAyIiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw2ODIpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwxNykiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDcwMSkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMTA2NjY2NjY2NjY2NjY2NjciIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDM2KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4xMDY2NjY2NjY2NjY2NjY2NyIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNzIwKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4xMDY2NjY2NjY2NjY2NjY2NyIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNTUpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY2NjY3IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw3MzkpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw3NCkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDc1OCkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMTMyNjY2NjY2NjY2NjY2NjUiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDkzKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xMzI2NjY2NjY2NjY2NjY2NSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNzc3KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4xMjQwMDAwMDAwMDAwMDAwMSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTEyKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4xMjQwMDAwMDAwMDAwMDAwMSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNzk2KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTMxKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsODE1KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4xNDEzMzMzMzMzMzMzMzMzNCIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTUwKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4xNDEzMzMzMzMzMzMzMzMzNCIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsODM0KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTY5KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RkZCIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsODUzKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xMzI2NjY2NjY2NjY2NjY2NSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTg4KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xMzI2NjY2NjY2NjY2NjY2NSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsODcyKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wNDYiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDIwNykiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMDQ2IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw4OTEpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY2NjY3IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwyMjYpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY2NjY3IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw5MTApIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjA1NDY2NjY2NjY2NjY2NjY3IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwyNDUpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjA1NDY2NjY2NjY2NjY2NjY3IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw5MjkpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjA0NiIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMjY0KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wNDYiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDk0OCkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDI4MykiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDk2NykiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDMwMikiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDk4NikiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDIiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDMyMSkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDIiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDEwMDUpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwzNDApIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwxMDI0KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wNjMzMzMzMzMzMzMzMzMzNCIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMzU5KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wNjMzMzMzMzMzMzMzMzMzNCIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTA0MykiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMTMyNjY2NjY2NjY2NjY2NjUiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDM3OCkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMTMyNjY2NjY2NjY2NjY2NjUiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDEwNjIpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwzOTcpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwxMDgxKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wMjg2NjY2NjY2NjY2NjY2NjciIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDQxNikiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjIiIG9wYWNpdHk9IjAuMDI4NjY2NjY2NjY2NjY2NjY3IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwxMTAwKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xNSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNDM1KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xNSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTExOSkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDM3MzMzMzMzMzMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDQ1NCkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDM3MzMzMzMzMzMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDExMzgpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSw0NzMpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBzdHJva2Utd2lkdGg9IjE5cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNSwxMTU3KSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xNSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNDkyKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4xNSIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsMTE3NikiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDM3MzMzMzMzMzMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDUxMSkiPjwvcGF0aD48cGF0aCBkPSJNMCA5MCBDIDE3LjUgMCwgMzIuNSAwLCA1MCA5MCBTIDgyLjUgMTgwLCAxMDAgOTAgUyAxMzIuNSAwLCAxNTAsIDkwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGQiIG9wYWNpdHk9IjAuMDM3MzMzMzMzMzMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDExOTUpIj48L3BhdGg+PHBhdGggZD0iTTAgOTAgQyAxNy41IDAsIDMyLjUgMCwgNTAgOTAgUyA4Mi41IDE4MCwgMTAwIDkwIFMgMTMyLjUgMCwgMTUwLCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjIyIiBvcGFjaXR5PSIwLjA5OCIgc3Ryb2tlLXdpZHRoPSIxOXB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUsNTMwKSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDkwIEMgMTcuNSAwLCAzMi41IDAsIDUwIDkwIFMgODIuNSAxODAsIDEwMCA5MCBTIDEzMi41IDAsIDE1MCwgOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgb3BhY2l0eT0iMC4wOTgiIHN0cm9rZS13aWR0aD0iMTlweCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LDEyMTQpIj48L3BhdGg+PC9zdmc+

Paste the output into your browser location bar – you'll see that it's 100x684. What's going on here?

I'd expect it to at least return 100x100, maybe with an option of supplying my own height & width to better define the tile pattern.

@btmills
Copy link
Owner

btmills commented Apr 29, 2019

Each pattern determines its own dimensions based on what will tile (example), and those should be changing based on each input string. Can you provide a few more examples of input strings that all produce tiles with the same dimensions so I can see what's going on?

@erodewald
Copy link
Author

Ahhh. Well, I am using UUIDs to generate unique backgrounds for my users (e.g., f6c2a60f-716c-4ac5-b567-39195bf9c073). Because of my design constraints, I wasn't able to affect the "stretch" of my background at all so when I got a very narrow and tall tile from a UUID, it has a negative impact on my layout.

So I don't think the problem is that some tiles are tall and skinny – it's that I cannot enforce aspect ratio or arbitrary height/widths in the generated SVG (although I explicitly use the base64 data). If the SVG "viewport" can be simply cut-off at any height or width prior to generating the base64 data, the tiling remains in tact and I don't end up with weird design issues.

@btmills
Copy link
Owner

btmills commented Apr 30, 2019

Are you able to put together a codesandbox that demonstrates the issue it’s causing with your layout? This was built with browser background tiling in mind, so I’m not surprised it’s hard to use in places that affect layout. If you’re not able to let it tile or adjust the dimensions or overflow somehow, I believe a library like Trianglify would give you abstract backgrounds for known dimensions.

@erodewald
Copy link
Author

I might be able to put something together. I can't go into great detail but the use case constraints come from it being a webview within a mobile app where the style guidelines in place are quite strict. It might be tough for me to get those image style rules changed.

I don't want to ask you to bastardize your library on my behalf, I'll check out Trianglify in the meantime.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants