Eine kleine react und svg Programmierübung, um einen Hintergrund für diese Site zu erstellen. Die Idee und Inspiration kam mir auf Twitter nachdem ich einen Post von @yuanchuan entdeckt hatte.
","frontmatter":{"title":"SVG Background Pattern","published":"April 2022","description":"Zufallsgenerierte Kurven und Kreise","banner":{"childImageSharp":{"id":"102644f0-71a2-525f-8993-5f1fb311310a","gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1920'%20height='1080'%20viewBox='0%200%201920%201080'%20preserveAspectRatio='none'%3e%3cpath%20d='M1107%207l-7%2024-5%2018%204%204c7%206%206%209-1%204l-5-2-6%2021-6%2020%2013%2012c15%2014%2023%2023%2032%2036%2010%2015%2021%2039%2020%2044l-2-4c-9-27-29-56-54-77-10-9-10-9-10-5%200%202%200%202%204%204%207%202%206%202%200%202l-6-1-1%204a13012%2013012%200%2001-26%2093c3%202%2012%202%2019%200l66-13c1%202-16%207-36%2012l-22%205a615%20615%200%200050%208l-43-4-17-2-10%203-11%202%203%203c3%202%203%202%201%202l-15-1%206%201c3%200%204%201%202%206l-1%203-3-3c-4-4-4-2-1%202%202%202%203%205%203%208l3%206%2018%2046%204%2011%206%203c22%2012%2049%2028%2050%2030%202%204%2020-43%2025-68%203-15%203-49%200-62l-1-8h-4c-3%200-3%200%202-3%205-2%2010-4%2027-6l63-10c4%200-106-154-124-173l-2-2-2%207m31%2023c31%2042%2062%2085%2090%20127%2012%2019%2011%2018%2022%2016l79-8a2482%202482%200%2001572%2019l10-14%209-14V0h-805l23%2030M39%2018l19%206c64%2018%20149%2053%20253%20104l39%2018A1527%201527%200%200040%2018l-5-1%204%201m1402%20143a2305%202305%200%2000-198%2017l10%2017a6220%206220%200%2001187%20306l18%202c22%201%2050%204%2054%205%203%200%203%200%203-3l1-3v3l1%203a3033%203033%200%2001143%2019%206169%206169%200%2000239-339l-5-1-40-5a2708%202708%200%2000-413-21m471%2011l-8%2012%2016%203v-26l-8%2011m-1524-7c0%202%2013%209%2020%2012l5%202%207%205a18908%2018908%200%2001213%20118%2026721%2026721%200%2000121%2069l-10%202c-23%207-35%2015-35%2026%200%202%203%2010%204%209l-2-5c-4-11%208-22%2034-29l11-2%208%204%208%204a356%20356%200%2001-58%2031l-28%2017c-64%2036-68%2038-64%2038%203%200%208-2%2022-10a551%20551%200%200178-44l54-29%2013%207c14%208%2014%208%2013%205l-8-6-11-6-3-2%204-3c23-13%2026-14%2037-15l72-4h28l-15%206-22%2010%207-3%2033-12-4%209a11450%2011450%200%2001-36%2063c2%200%206-5%2024-37l22-36h37c22%200%2036%201%2037%202l-9%2034-10%2035%208%202%203%201%203%202%2022%207%2019%207%2010-12%2022-26%2012-14v-13l1%205%201%205%207-11c11-15%2028-43%2028-45l-43%203%201%207a196%20196%200%20014%2029l-6-32c-1-3-2-4-4-4l-57%205%2015%202c20%202%2017%202-4%201h-19l17%204c19%204%2018%205-1%202-17-4-17-4-17%200-1%203-1%203-19-3-23-6-27-5-8%201l12%204h-57l13-4%2010-4-13%203-12%202%207-12c1-1%202-1%209%201%209%203%2015%204%2012%202l-9-3-9-3%206-13%2020-37c-2-2-4-1-7%205-14%2027-24%2044-26%2044a568%20568%200%2000-8-1l8%203-5%209-4%208-21%201a1641%201641%200%2000-91%204%20823%20823%200%200175-38c-3-1-4-1%2046-26a10259%2010259%200%200153-30c-3-1-20%207-55%2026a1215%201215%200%2001-77%2041%205242%205242%200%2000-74%2040l-7%204-7-4-7-4%205-2%205-1-7%201c-7%200%204%206-90-47a28847%2028847%200%2000-286-158l-1%201m843%2014a574277%20574277%200%2001-82%2014v4c10%2033%201%2087-20%20129-3%207-3%208%202%208%202%200%203-1%203-2%202-5%2011-4%2013%201%201%207-7%2012-12%207-3-4-11-4-13%200-3%206-18%2031-27%2043-8%2013-9%2014-9%2018l-1%2016v10l-1-14v-13l-12%2014a890%20890%200%2001-30%2036l9%203c11%204%2010%205-2%202l-9-3-28%2028-29%2029%2015%207%2015%207c5%200%2026-13%2037-24l8-6c0%203-21%2020-34%2027l-7%205%2013%208%2013%206%207-3%2024-7c4%200-2%202-13%206l-14%205%2013%208c31%2016%2070%2039%2087%2050%2044%2028%2063%2042%2080%2059%2014%2014%2019%2020%2023%2031l3%207%2079%2038%2083%2038a393%20393%200%200142%206%20781%20781%200%200036-44c0-2%200-2%201-1%201%202%2021-21%2040-45l4-5-11-19c-11-22-11-21-19-19-2%200-3%201-3%204l-1%204v-4c0-4%200-4-2-4a1855%201855%200%2001-49%206v-2l49-7c3%200%203-1%203-4l1-3v3c0%204%200%204%204%203%205%200%205%200%201-7-4-6-4-6-4-3-1%202-1%202-1-2%200-3-4-10-18-35l-50-90a1348%201348%200%2000-268%207l-15%201a1391%201391%200%2001281-10l-54-93a5365%205365%200%2000-144-230l-7%201m656%2031a7031%207031%200%2001-224%20318%20820%20820%200%200062%2012c17%204%2022%205%2023%204%204-3%208%202%205%206-2%202-4%201-6-1s-6-4-28-8c-39-8-58-11-59-10a9674%209674%200%2000-75%2098l211-34%2030-6%2010-11%2012-11c1%200-3%205-10%2011-8%208-10%2011-8%2011l37-7c47-9%2045-9%2045-11l4-20%204-17V428a41749%2041749%200%20010-176v-62h-6l-9-2h-4l-14%2022m-848%2029a603%20603%200%2001-46%2025c0%203%206%201%2024-8l21-10-5%2017-5%2017%2018%208%2017%208a573%20573%200%2000-24-57m-16%2060l-4%2015%2053%2011-6-21-39-18-4%2013m46%208l6%2018%2011%203c12%202%2013%203%202%201-13-2-13-1-13%202v2l-1-3-1-3-26-4-28-5-5%2010-3%2010a1118%201118%200%2001-17%205%201065%201065%200%200181-7h2c1%201%2038%200%2042-2l-10-7-40-20M1%20319l3%208%203%205%201%201%2011%2016a3212%203212%200%2000102%20138%205061%205061%200%2000152%20190l-17%2012c-65%2044-133%2094-131%2097%201%201%200%202%2022-14a2750%202750%200%2001129-92c10%2014%20152%20176%20218%20249l12%2013-6%206a4791%204791%200%2001-62%2065c3%201%2019-15%2050-46l21-22%207%208c80%2088%2092%20101%2094%20101%203%200%203%200-11-15l-73-80-15-16%204-4%2020-23c39-44%20104-122%20102-124-1-2-3%200-20%2021-34%2043-76%2092-103%20120l-6%207-35-39c-68-76-126-142-190-218l-4-5%2022-15%20104-66c5-3%207-6%204-6a2534%202534%200%2000-132%2084%203587%203587%200%2001-152-187c-5-4-86-115-109-149-16-24-15-23-15-20m807%2080c0%201%202%203%208%206l7%205%201%201%205%201c15%2010%2036%2021%2038%2020a566%20566%200%2001-56-33c-3-2-3-2-3%200m61%2036l5%203%203%202-3%205-2%205c2%201%203%201%205-3l3-5%2010%206%2013%205c3%200%202-1-9-7l-12-7%202-3c1-2%201-2-1-2s-3%201-3%202h-4c-4-2-9-3-7-1m114%200l-3%2012c-3%2011-3%2012%202%2012l4%201c1%201%200%201-4%201h-6l-1%204-2%205h6l23%201h17l9-10c6-5%2010-10%209-10a1448%201448%200%2000-54-16m-124%2034a172%20172%200%2001-12%2018l-13%2022a546%20546%200%2000-11%2021c1%200%206-6%2015-21%2011-18%2014-21%2016-21s2%200%201-1c-3%200-3%200%208-18%2011-16%2011-17%208-17l-12%2017m46-14l13%208a1903%201903%200%200149%2031c-3%205-2%205%206%209l8%204%206-5%2018-17%2013-13h-23l-22%201-2%207-3%207-11-6a2703%202703%200%2000-52-26m-306%2022a4524%204524%200%2001-76%2046%2023172%2023172%200%200186-49c0-1-6%200-10%203m844%2030a16996%2016996%200%200164%20109c1-3%201-3%201%201%200%205%208%2022%2010%2022l64-10a5265%205265%200%200075-99c-6-3-131-20-140-20l-1%204-1%204v-4c0-4%200-4-3-4a1670%201670%200%2000-68-7h-3l2%204m-483%209l-3%2012%2020-17-1-1-7-3-6-3-3%2012m181-3c-16%203-40%208-42%2010l-2%201h2a778%20778%200%200042-11m-174%2010c-12%2011-15%2014-11%2014a299%20299%200%200052-12l-28-13-13%2011m-452%203a8748%208748%200%2001-34%2023c1%201%2040-21%2040-23s-3-2-6%200m489%203c-8%203-27%208-39%2010l-12%201-1%204-1%204%2017%209%2017%209%209-5a400%20400%200%200142-19l3-2-14-6c-14-8-14-8-21-5m-188%208l-4%206-1%202-25%2037a2927%202927%200%2001-95%20139l16-20a2594%202594%200%200144-61%204143%204143%200%200070-108l-5%205m217%208c-10%204-44%2020-44%2022-1%200%2042%2022%20149%2073l111%2053c1-2-3-10-7-17-16-24-58-55-122-92l-79-42-8%203m-571%2013a110%20110%200%2000-14%209c-2%200-22%2012-22%2013%200%203%204%201%2013-4a172%20172%200%200013-8c6-2%2026-16%2025-17-2-1-1-2-15%207m485%203l-2%207%2010%205%2010%205%2015-10-30-14-3%207m30%2013c-10%205-10%206-6%208%203%201%203%201%202%202l-5-1-3-2-8%206a422%20422%200%2000-29%2021c-14%207-22%2014-21%2016l13-6%2012-5a442%20442%200%2001-16%2057%202918%202918%200%2000124%2027%202382%202382%200%2001-124-24l-3%206v8c3%203%202%204%200%202l-2-1-1%203c-1%203%2018%207%2070%2015%2041%205%2049%207%2049%208-1%202-2%202-37-3l-31-4%2010%204%2048%2016c-1%202-1%202-30-7a423%20423%200%2000-82-20l-2%207-2%207%2017%207%2017%208%2025%203%2078%205-8-3-9-5%201-1%2028%209%2045%201c45%201%2072-1%2067-2a4109%204109%200%2000-131-20c0-3%202-3%2018%200a29300%2029300%200%2000125%2018%20134%20134%200%200058-14l2-1c6-2%2015-16%2014-22a2652%202652%200%2000-214-103l-41-19-11-6-7%205m-36%2010l-4%2014%204-2%2011-9%209-7-9-5-8-4-3%2013m973-8l-6%2023a1116%201116%200%2001-91%20245l27%206%2074%2019c2%200%202-7%202-147V575h-2l-4%201m-50%209l-41%208-9%209-9%209c-1%200%202-4%207-8l7-9-33%206a11311%2011311%200%2001-206%2034l-20%2024-19%2024%2020%2037%2032%2060%2013%2024h7l1%201a5790%205790%200%2001201%2039l24-49c27-61%2054-141%2070-211l2-6h-3l-44%208m-317%2053a2837%202837%200%2001-27%205l20%2036%2036-44c2-2-1-1-29%203m-17%2057a3806%203806%200%2001-70%2082%20116%20116%200%200026%204l45%209a13508%2013508%200%200171%2012l-63-116-9%209m-698%204l-2%2014-4-1-5-1%203%202c6%202%206%201%201%2020l-3%2016c1%202%206-21%208-29%200-5%201-5%208-3l6%201-7-3c-5-1-6-2-6-3l4-24-3%2011m420%202c-3%2015-20%2026-52%2033l-6%202a8637%208637%200%2000206%2032%203917%203917%200%2000-147-71l-1%204m-574%2033c-8%2012-8%2012-7%2013s3-1%207-7a236%20236%200%200111-14c-1-3-4-1-11%208m187-9l16%206%2016%205-5%2016-4%2016%2053%2018a3068%203068%200%2001-29-7c-27-8-26-8-26-4l-2%204c0%202%202%203%208%205%204%202%201%204-4%203h-6l-2%207-7%2026-6%2019%204%2023%204%2030c0%203%201%203%2013%207l138%2042%2053%2016h13c12%200%2012%200%208-1a22110%2022110%200%2000-222-66l1-1c1-2%207%200%2036%209l163%2048%2041%2011h17c47-2%2080-7%2095-15%2013-7%2015-14%207-24-4-6-4-6%201-4l2%202%202%205c4%208%202%2014-7%2021-12%208-45%2014-83%2016l-20%201h-6l11%204%2055%2015%2043%2012%209-7a1127%201127%200%2000134-122%203812%203812%200%2000-321-120l-29-2a2699%202699%200%2001-81-5l6%203c5%202%2012%208%2010%208l-14-6-20-7h-6l4%203a598%20598%200%20003%204l-14-8h-19c0%203-1%202-11-1l-22-5m311%2012c-2%202-33%203-68%204l-41%201%2033%2011c81%2027%20210%2076%20273%20101l9%204%2014-14%2050-55-36-16a2801%202801%200%2001-108-16l-45-7a3627%203627%200%2001-81-13m-524%2031c-13%2017-16%2022-12%2022l6-7c21-27%2024-32%2024-33-2-2-3-1-18%2018m772%208l12%206%2012%206%203-4%203-4-14-2-16-2m29%209c-2%202-3%203-2%204a144%20144%200%200031%2014l65%2032%2095%2044a1076%201076%200%2000-36-69c1-4-1-4-85-19-38-6-36-6-36-3-1%202-1%202-1%200%200-3%200-3-13-5l-14-2-4%204M97%20806c-51%2041-97%2082-97%2086a1462%201462%200%2001103-87c22-17%2020-15%2019-17-1-1-6%203-25%2018m1337%200a188%20188%200%2000-16%2018l-17%2017-17%2018%209%203a284015%20284015%200%2000192%2082l10%204h37l42-1h4l-17-32-16-31-82-39-82-39v3c-1%202-1%202-1-1v-3l-16-7-16-8-14%2016m175%202l40%2074%20109%2052c3%201%2057-86%2055-87a4778%204778%200%2000-204-39m198%2054a736%20736%200%2001-45%2073c0%202%2020%2010%2023%2010l28-1c39-2%2096-6%20104-8h3v-63l-5-2-99-24-9%2015m-446%2019a1831%201831%200%2001-121%20110l33%209%2032%209%204-2h5c5%203%204%2010-1%2012a653%20653%200%2000-78-25l-5%203-4%204%2025%207a2365%202365%200%2000130%2036c1%202%2043%2014%20103%2030l16%205h128l12-10a1115%201115%200%200065-68%20953%20953%200%2000-92-42l-17-8h-66c-72-1-82-1-82-4a5613%205613%200%2000139%200l-7-3a17910%2017910%200%2001-131-56l-67-27-21%2020m-211-17c3%203%2020%2012%2022%2011v2a167%20167%200%200151%2029h2l4%203c12%208%204-1-11-11a543%20543%200%2000-68-34m515%2052l16%2031h19l36-1h16l2-4%203-5-10-5a19575%2019575%200%2001-97-46l15%2030m-798-23c-2%202-2%202-8%201l-7-2-3%209-2%209-8%207c-6%205-8%207-7%208%200%203%201%203%206-1%206-5%206-5%204%202l-2%206%202%203c3%204%202%207-1%204-2-2-3-1-3%202%200%202%200%203%203%203s4%200%203-1c-1-3%202-3%204-1%201%202%203%203%2016%204l15%201a354%20354%200%2000-9-50v-4c-1-2-1-2-3%200m9%209l1%206c3%2017%207%2037%209%2039l26%202%2040%203c30%202%20114%206%20115%205l-54-17a1866843%201866843%200%2001-137-41v3m1018%2040a1867%201867%200%2001-104%207%20173%20173%200%200037%2015c7-2%2012%203%209%209-4%205-10%204-12-2a219%20219%200%2000-43-22h-29l-10%2013a893%20893%200%2001-29%2038l33%2016%20109%2051%2024%2012h41V940h-4l-22%202M830%20952c-7%207-7%208%200%202l5-4-3%2011-3%2010%205%204c6%206%205%209-2%203-3-2-4-3-5-2l-12%2044a431%20431%200%200045-17v2l-38%2018-9%203-2%207-13%2045%2040%201h40l17-8c18-10%2017-10%2017-7%200%201-9%207-20%2012l-3%203h106l-6-2c-34-12-65-41-86-83l-5-10-4%203-4%202-3-2c-2-2-2-5-4-18-4-22-1-19-24-21l-20-2c-2%200-5%202-9%206m57%200l11%2026h3l5-3c6-4%205%201-1%205l-5%203%205%2011c22%2041%2051%2069%2087%2082l8%203h64l13-3c27-7%2055-19%2088-38%2014-8%2055-35%2054-36l-25-8-71-21-46-14-38-1a3405%203405%200%2001-152-6m808-1l-11%201%2025%2047c1%200%2031-36%2037-46l2-3h-21l-32%201m-83%205l12%204%204%203%205%202a846%20846%200%200169%2030l-11-22-11-22h-77l9%205m-727-1l2%2015c2%2015%203%2016%207%2012l2-1-5-14-6-12m204%205a2875%202875%200%2000133%2039c2%200%2010-5%2010-6l-5-2-60-17-55-15h-12c-7%200-12%200-11%201m-217%2034c-10%206-11%206-10%208%202%201%203%201%2013-4%2013-7%2012-7%2010-8-1-2-3-1-13%204m15%200a459%20459%200%20007%2035c3%200-1-29-5-34-1-2-2-2-2-1m329%2014c-41%2030-97%2059-136%2069-5%202%2019%202%20202%202%20174%200%20206%200%20202-1a8740%208740%200%2000-108-31l-145-42c-8-3-9-3-15%203m494-4a2926%202926%200%200028%2052c7%200%206%2011-1%2011-5%201-7-3-5-7%201-4%201-4-12-29l-13-26-12%2013c-1%203-48%2048-60%2058l-4%203h54a344%20344%200%200055-1l66%201h66l-20-10a5033%205033%200%2000-142-65m-1285%2019a1192%201192%200%2001-60%2056c2%200%2012-7%2040-32%2025-23%2032-30%2030-30-2-1-2-1-10%206'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"images":{"fallback":{"src":"/projects/static/f560a33d3075c644bbfbdf415961c384/afa5c/head.png","srcSet":"/projects/static/f560a33d3075c644bbfbdf415961c384/0dee1/head.png 750w,\n/projects/static/f560a33d3075c644bbfbdf415961c384/8beaa/head.png 1080w,\n/projects/static/f560a33d3075c644bbfbdf415961c384/afa5c/head.png 1920w","sizes":"(min-width: 1920px) 1920px, 100vw"},"sources":[{"srcSet":"/projects/static/f560a33d3075c644bbfbdf415961c384/a66aa/head.webp 750w,\n/projects/static/f560a33d3075c644bbfbdf415961c384/65dd5/head.webp 1080w,\n/projects/static/f560a33d3075c644bbfbdf415961c384/c512e/head.webp 1920w","type":"image/webp","sizes":"(min-width: 1920px) 1920px, 100vw"}]},"width":1920,"height":1080}}},"location":null,"date":{"from":"April 2022","to":null},"team":null,"repos":[{"link":"https://github.com/RomanKol/svg-bg","title":"GitHub Repository"}],"links":null,"videos":null}},"allFile":{"edges":[]}},"pageContext":{"slug":"/dev/svg-bg/","gallery":"dev/svg-bg/gallery","previous":{"fields":{"slug":"/photo/calendar-2022/"},"frontmatter":{"title":"Kalender 2022","published":"2021-12-01"}},"next":null}}, "staticQueryHashes": ["2841359383"]}