Episode 1: SVG Fundamentals

Get it Right in Black & White
#1

This first episode kicks off the series and looks at making basic shapes with SVG.

Feel free to ask questions about this episode here in this topic.

Reference links:

Exercise

Make something creative with basic SVG shapes!

Fork this example:

Please share your work here in this thread.

(Hint: you can put a VizHub link on its own line of text and it will “unfurl” to include a thumbnail.)

5 Likes
#2

Curran, tnx for the great intro! This is my contribution for week 1. Feedback is welcome!
https://vizhub.com/lenkica/eb943700c658493baace35f38d9a2625?edit=files&file=index.html

4 Likes
Get it Right in Black & White Index
Get it Right in Black & White Index
#3

Glad I tuned in! I stumbled upon the ongoing series via the 2020 series thinking “might just join the ongoing one since it would be more interactive!”

Here’s my svg attempt:

Generated with some scripts Iearned in the first hours of 2020 course, hope this is not considered cheating :rofl: I also linked the one with script in the README

Cheers for more session to come!

6 Likes
#4

Amazing work! Thrilled to see this.

@alenkagucek If you put a blank line before and after the link, it will unfurl, like this:

3 Likes
#5

Animation on hover using CSS transitions.[On hover animations]

4 Likes
#6

Hello there! Where can I find the video list? : )

#7

Very nice @Nita! That would be great to present in the next stream.

@floatingpurr The index for the series is here: Get it Right in Black & White Index .

The only video available so far is the unedited first live stream. I’m in the process of editing that first one, and I’ll be adding links as more videos come out.

1 Like
#8

I really enjoy your courses! Here’s my SVG playground in its current state:

5 Likes
#9

@lululand That’s amazing!!!

To remove the margin and scrollbars, try adding the following right below the <title>:

    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
1 Like
#10

oh that’s much better - thank you!

#11

Really loved this one.

1 Like
#12

That is a great idea. Thank you.

#13

@curran, I can’t believe I’ve only just discovered your courses. Looking forward to the next episode!

I tried to create a visual “spinning” effect, but for now, it looks like the disc has wrinkles :rofl:

#14

I tried to create a visual “spinning” effect, but for now, it looks like the disc has wrinkles

Very nice! It’s getting there. One day you can make it spin properly, in time.

image
image865×524 26.9 KB

By the way in the settings, you can change the height. I notice your piece is larger than the vertical space available.

#15

This was shared in a YouTube comment.

image

Very cool example of interoperability of SVG between various tools. This was done in GIMP, then pasted into HTML.

One could do the same with other tools like Illustrator, Adobe XD, Sketch, and Figma!

5 Likes
#16

Flag of the Seychelles

4 Likes
#17

I started coding with no particular goal in mind… ended up with this. :smiley:

3 Likes
#18

Question: reference to this paragraph “Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics. As such, it’s a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.”
Is SVG a graphics language similar to HTML and XML?
Is everything inside SVG tags is text data? Little confused.

#19

When time permits, I’d like to add trees, rocks, mountains, and the odd comet or two!

6 Likes
#20

Thanks Curran! Now I see where it is the right place :wink:

It was fun and fast to do it. Waiting for the next episode!

1 Like