CYOA - Vector graphics and SVG by Tony Grimes https://padlet.com/acidtone/oovj36hhx2wzy01t Topics of an SVG nature for July 20, 2021. en-us 2021-07-20 03:07:37 UTC 2021-07-23 04:27:39 UTC hello@padlet.com https://padlet.net/icons/png/1f4bb.png Openly licensed digital assets. acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655504634 - Images
- Icons
- Music
- Video
- Fonts

Gist]]> 2021-07-20 03:09:07 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655504634 Medium spicy: Creating an advanced responsive website logo. acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655658660 Once you're comfortable with standard inline SVGs, you can use the `symbol` and `use` elements to create more advanced responsive SVG effects.

The below article includes a video tutorial and sample code:

Article
Video
Codepen]]> 2021-07-20 05:52:46 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655658660 Three popular methods of adding SVGs to a web page acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655665554 1. HTML img element
2. CSS background image
3. Inline SVG

Gist
Codepen
Activity]]> 2021-07-20 06:01:37 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655665554 Understanding the viewBox acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655679789 The viewBox attribute is the trickiest part about understanding SVGs. The following resources do a great job of explaining it:

Article: Understanding the viewBox by Amelia Wattenberger

Video: What are SVG viewport and viewBox? by Kevin Powell
]]> 2021-07-20 06:19:38 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655679789 SVG: Getting Started acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655710621 Some starter links, tips, tricks and common editing tools.

Gist]]> 2021-07-20 07:00:49 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655710621 Activity: Pinball colour scheme acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655721902 A key advantage to SVGs is their ability to be styled with CSS. Add a colour scheme to the following SVG pinball diagram.

Gist
Codepen]]> 2021-07-20 07:15:29 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655721902 Spicy: SVG can do that?! acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655729831 A fun lecture by Sarah Drasner summarizing more advanced SVG concepts such as:
- Animation
- Accessibility
- Javascript control
- Visualization tools]]> 2021-07-20 07:25:47 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655729831 Extra Spicy: SVG Filters acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655734324 You can extend CSS with Photoshop/Illustrator-level effects using SVG filters!

A very fast paced lecture by Sara Soueidan:]]> 2021-07-20 07:31:52 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655734324 Creating SVGs with Figma acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655737976 Figma is a popular free, web-based vector editor
- Gist: Figma overview
- Tutorial: How to Work with SVGs in Figma, HTML, and CSS by Build UX

]]> 2021-07-20 07:36:27 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655737976 Extra Spicy: Advanced SVG animations using VueJS acidtone https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655750720 Sarah Drasner's latest lecture on advanced web animations:
- Page transitions in single-page applications
- Handling animation state
- Animation components
- Augmented reality scenes with 3D animations]]> 2021-07-20 07:55:27 UTC https://padlet.com/acidtone/oovj36hhx2wzy01t/wish/1655750720