SVG UI | thinker *

https://www.youtube.com/watch?v=ADXX4fmWHbo

https://www.youtube.com/watch?v=ZKrjsux7C38

https://www.youtube.com/watch?v=W5AdUcJDHo0

https://www.youtube.com/watch?v=ZKrjsux7C38

https://www.youtube.com/watch?v=vJNVramny9k

https://www.youtube.com/watch?v=W5AdUcJDHo0

https://www.youtube.com/watch?v=W5AdUcJDHo0

 

 

https://svgontheweb.com/

Resources

GENERAL

• Ultimate guide to SVG
• How to Add SVGs to Your Web Page
• W3C About SVG
• Rethinking Responsive SVG
• Making SVGs Responsive
• Using SVG
• SVG Styling

OPTIMISING

• Tips For Optimising SVG Delivery For The Web
• How To Optimize SVG
• Understanding and Manually Improving SVG Optimization
• SVG Optimization Video
• SVGOMG — SVGO GUI in browser

ANIMATING

• A Guide to SVG Animations
• Styling And Animating SVGs With CSS
• SVG animations for fun and profit
• Snap.svg
• SVG.js
• Pablo

SPRITING

• An Overview of SVG Sprite Creation Techniques
• Structuring, Grouping, and Referencing in SVG
• A guide to SVG elements
• Grunticon
• SVG icon workflow
• Inline SVG icons

 

 

 

 

1.  

2.  

3. https://uxmisfit.com/

4. Map stars to astrology – make an live universe picture

5. Melting page transitions – can you use screenshot of page to melt to next

6. change the filter – so it is followable with mouse

7. https://dribbble.com/tags/svg

   1. examples of sag interfaces

   2.