SVG's and their potential for programmatic art
Download as PPTX, PDF1 like110 views
SVG's (Scalable Vector Graphics) allow for vector images that can scale smoothly and programmatically generate complex graphics. An SVG is an XML file format for describing 2D vector graphics that can be rendered and edited with text editors. SVGs can be manipulated with CSS and JavaScript code to dynamically create and modify graphics, allowing for interactive and randomized programmatic art.
SVG's and their potential for programmatic art
- 1. SVG's and their potential for programmatic art or cool backgrounds etc. if that's your thing. Michael Senkow
- 4. Getting into the Magic of SVG's... And, What is an SVG anyways?
- 5. What is an PNG? And other raster image formats Perfectly ok image type and sometimes actually smaller in size But doesn't scale getting image issues And looks like this in a text editor...
- 6. 8950 4e47 0d0a 1a0a 0000 000d 4948 4452 0000 0145 0000 0199 0802 0000 0091 eab4 5e00 0000 0970 4859 7300 000b 1200 000b 1201 d2dd 7efc 0000 2000 4944 4154 78da ed9d 4d6c 1dd7 75c7 cf7c bc79 f3f8 218a a445 4b8a 2c47 b143 3528 12d9 6e0c 386a dc20 82e3 0036 ea2e 1215 015c b828 d2a4 41b2 a917 058a 74db 5d5b 64d5 2259 7451 6f8d 6611 4445 8118 cac2 8163 c040 0ab9 400d 5189 dd52 ac29 a9a1 687e 3cbe aff9 e8e2 5194 4991 6fce 9d77 e7ce fdf8 ff57 4920 29e2 687e 73fe e7dc 7bce f1f2 3c27 0882 94eb 834e f2ab edfe 4783 8c88 e2c0 fbcc 44e3 a9e9 68cc 3fd3 03cf 10a4 9ee4 abeb dd0f bac9 81ff fd78 e8bf 7c72 f254 1494 f833 bb3b 493c 1182 6708 52a7 f524 fbf1 9d9d 0749 de53 ec7b df3b 333d 1bfa 4224 bff3 c687 efbc f1e1 73df 3807 9e21 4811 c957 d7bb ffb1 d52f fc95 4f4e 475f 3b31 2144 72af 9310 d1cc 7c33 c483 8620 4d48 1eea 3fb6 fa97 66e3 d121 fa00 c944 f4d9 8b0b cfbe 7416 f119 8274 2179 4f9f 996c bcfc f0a4 10c9 33f3 3111 213e 4390 Not terribly useful (maybe if you're getting into some fun image alteration stuff but generally...no)
- 7. What is an SVG?
- 8. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.89 408.05"> <defs> <style> .cls-1{fill:#e1dfdd;} .cls-1, .cls-3, .cls-4, .cls-6, .cls-7{fill-rule:evenodd;} .cls-2{fill:#7bddef;} .cls-3{fill:#c3f2f4;} .cls-4{fill:#fae969;} .cls-5{fill:#28c2d1;} .cls-6{fill:#e8d441;} .cls-7{fill:none;stroke:#8664c3;stroke-miterlimit:10;stroke-width:2.34px;} </style> </defs> <title>Asset 1</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_3" data-name="Layer 3"> <path class="cls-1" d="M66.94,109.48a5.38,5.38,0,0,1,5.45-6H253.31a5.36,5.36,0,0,1,5.45,6L229.79,402a6.81,6.81,0,0,1-6.64,6H102.55a6.8,6.8,0,0,1-6.64-6Z"/> <path class="cls-2" d="M240.78,56.66,169.35,359.93a6,6,0,0,1-7.24,4.5l-11.49-2.75a6,6,0,0,1-4.47-7.27L218.85,45.69a12,12,0,0,1,6.2- 7.94L297.49.65a6,6,0,0,1,8.07,2.67l5.35,10.61a6.08,6.08,0,0,1-2.63,8.15Z"/> <path class="cls-3" d="M91.3,175.66a5.29,5.29,0,0,1,5.41-6H232a5.31,5.31,0,0,1,5.41,6L215.66,378.9a6.86,6.86,0,0,1-6.68,6H119.72a6.86,6.86,0,0,1-6.68-6Z"/> <path class="cls-4" d="M0,95.92a64.84,64.84,0,1,1,64.84,64.84A64.84,64.84,0,0,1,0,95.92Z"/> <path class="cls-5" d="M189.65,169.68,146.14,354.41a6,6,0,0,0,4.47,7.27l11.49,2.75a6,6,0,0,0,7.24-4.5l44.81-190.25Z"/> <path class="cls-6" d="M129.23,103.46H72.39a5.38,5.38,0,0,0-5.45,6l5,50.88A64.85,64.85,0,0,0,129.23,103.46Z"/> <polyline class="cls-7" points="324.36 2.52 230.04 50.84 154.03 380.19"/> </g> </g> </svg>
- 9. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.89 408.05"> <defs> <style> .cls-1{fill:#e1dfdd;} .cls-1, .cls-3, .cls-4, .cls-6, .cls-7{fill-rule:evenodd;} .cls-2{fill:#7bddef;} .cls-3{fill:#c3f2f4;} .cls-4{fill:#fae969;} .cls-5{fill:#28c2d1;} .cls-6{fill:#e8d441;} .cls-7{fill:none;stroke:#8664c3;stroke-miterlimit:10;stroke-width:2.34px;} </style> </defs> <title>Asset 1</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_3" data-name="Layer 3"> <path class="cls-1" d="M66.94,109.48a5.38,5.38,0,0,1,5.45-6H253.31a5.36,5.36,0,0,1,5.45,6L229.79,402a6.81,6.81,0,0,1-6.64,6H102.55a6.8,6.8,0,0,1-6.64-6Z"/> <path class="cls-2" d="M240.78,56.66,169.35,359.93a6,6,0,0,1-7.24,4.5l-11.49-2.75a6,6,0,0,1-4.47-7.27L218.85,45.69a12,12,0,0,1,6.2- 7.94L297.49.65a6,6,0,0,1,8.07,2.67l5.35,10.61a6.08,6.08,0,0,1-2.63,8.15Z"/> <path class="cls-3" d="M91.3,175.66a5.29,5.29,0,0,1,5.41-6H232a5.31,5.31,0,0,1,5.41,6L215.66,378.9a6.86,6.86,0,0,1-6.68,6H119.72a6.86,6.86,0,0,1-6.68-6Z"/> <path class="cls-4" d="M0,95.92a64.84,64.84,0,1,1,64.84,64.84A64.84,64.84,0,0,1,0,95.92Z"/> <path class="cls-5" d="M189.65,169.68,146.14,354.41a6,6,0,0,0,4.47,7.27l11.49,2.75a6,6,0,0,0,7.24-4.5l44.81-190.25Z"/> <path class="cls-6" d="M129.23,103.46H72.39a5.38,5.38,0,0,0-5.45,6l5,50.88A64.85,64.85,0,0,0,129.23,103.46Z"/> <polyline class="cls-7" points="324.36 2.52 230.04 50.84 154.03 380.19"/> </g> </g> </svg> Which still may look scary....but really isn't. Overall SVG object The CSS, visual code off the svg. Can also be laid out inline. Or outside of the SVG. Titling etc. Overall shape of the SVG images, Grouped in the G's
- 10. https://codepen.io/mhsenkow/pen/NJNPBj And then that same text can be put directly into a site and altered with code. Here I'm showing some simple hover effects with the different pieces of the svg.
- 11. https://codepen.io/mhsenkow/pen/eXZmXL Now, moving into the programmatic space of this, you can create the svg from the base of the code environment instead of the visual program. Here for Example I'm making a circle.
- 12. https://codepen.io/mhsenkow/pen/QoNbdx And with a little looping magic and messing around with PUG …
- 13. And if you inspect this in code, you can copy and paste it directly into Figma (and I think sketch, various programs approach this different).
- 14. Now you get into more fun when you start adding more programmatic concepts. Lets try Math.random() https://codepen.io/mhsenkow/pen/WmwQvm
- 15. And while you can't export this as an svg, you can do the same sort of looping/script concepts with the CSS (SCSS) side https://codepen.io/mhsenkow/pen/eXZpgZ
- 16. And while you can't export this as an svg, you can do the same sort of looping/script concepts with the CSS (SCSS) side https://codepen.io/mhsenkow/pen/drMGYw
- 17. And while you can't export this as an svg, you can do the same sort of looping/script concepts with the CSS (SCSS) side https://codepen.io/mhsenkow/pen/drMGYw
- 18. But you may be like, Michael what good is this, its stuck in codepen! Well you can export it and then do whatever you want with it.