Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

How do you code graphics with SVGs? 🖼️Combining SVGs with React unlocks new possibilities! You can create diagrams, animations, or even interactive games & apps. If you want to make your project more fun, join the talk by🎤Hunor Márton Borbély, a web dev with an interest in UX design.

React Day Berlin

5,486 subscribers

178,106 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

3 Comments

Ian Bobinac1 year ago

@HunorBorbely Shameless plug for react day Berlin from the AmsterdamJS meetup

Alexander1 year ago

@HunorBorbely You know half of the ads in twitter nowadays is some man talking on video about some "profitable" crypto crap Plz make adds in another way, some unexpected video triggers negative reaction

Carlos Quesada1 year ago

@HunorBorbely Do you already have the Program for day 13?

Related Videos

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

matia 🇭🇷

290,664 views • 2 years ago

We've solved vector design with AI ✨ QuiverAI makes it incredibly easy to generate SVGs from text or images. When you treat visuals as code, you get a much more composable output and can do precise edits. You also get to watch the model sketch in real-time 👇

We've solved vector design with AI ✨ QuiverAI makes it incredibly easy to generate SVGs from text or images. When you treat visuals as code, you get a much more composable output and can do precise edits. You also get to watch the model sketch in real-time 👇

Justine Moore

47,922 views • 3 months ago

Today, we’re officially releasing React Native Godot to the public. For the first time, every React Native developer can create games with an amazing UI on top. This unlocks a new era of apps and games.

Today, we’re officially releasing React Native Godot to the public. For the first time, every React Native developer can create games with an amazing UI on top. This unlocks a new era of apps and games.

Jannis Ringwald

937,367 views • 7 months ago

🚀 Introducing Pressmind: an experimental WordPress Gutenberg plugin turns prompts into real interactive blocks! ✨ Type /pressmind, describe what you want, and it can generate summaries, tables, SVGs, interactive widgets (even games 👾), and AI images. →

🚀 Introducing Pressmind: an experimental WordPress Gutenberg plugin turns prompts into real interactive blocks! ✨ Type /pressmind, describe what you want, and it can generate summaries, tables, SVGs, interactive widgets (even games 👾), and AI images. →

fatih kadir akın

31,451 views • 1 month ago

LLMs let me swing at my preferred maximalist web design: not gradients and on-scroll animations, but encrusting the page with little SVGs and PNGs The web needs more illuminated initial caps

LLMs let me swing at my preferred maximalist web design: not gradients and on-scroll animations, but encrusting the page with little SVGs and PNGs The web needs more illuminated initial caps

Evan Applegate

32,515 views • 4 months ago

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

141,230 views • 2 years ago

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

Astro

38,983 views • 1 year ago

You can even edit generated SVGs directly on the canvas. Now in beta.

You can even edit generated SVGs directly on the canvas. Now in beta.

dára sobaloju

22,222 views • 2 months ago

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨

Pablo

95,057 views • 2 months ago

If you’ve never written code before, this is for you. I’ve just launched a course that shows you, in less than 30 minutes, how to describe an idea for an app and build it with AI. In this course, you'll build a working web application - a funny interactive birthday message generator that runs in your browser and can be shared with friends. You'll customize it by telling AI how you want it changed, and tweak it until it works the way you want. By the end, you'll have a repeatable process you can apply to build a wide variety of applications. If you want to try vibe coding, this will be the best place to start! Further, you'll be able to use these techniques with whatever tool you're most comfortable with (like ChatGPT, Gemini, Claude, or others) -- we're vendor neutral. Skills you'll gain: - How to build web apps with AI - zero coding skills needed - How to fix and improve your creations by chatting with AI - A simple process you can use to build other things you can dream up Building with AI is one of the most fun things in the world. Please join me and take your first step! I think you will be surprised at what you can build. And if you're an experienced engineer, please share this with someone in your life who's been curious about building with AI. Come build with me!

If you’ve never written code before, this is for you. I’ve just launched a course that shows you, in less than 30 minutes, how to describe an idea for an app and build it with AI. In this course, you'll build a working web application - a funny interactive birthday message generator that runs in your browser and can be shared with friends. You'll customize it by telling AI how you want it changed, and tweak it until it works the way you want. By the end, you'll have a repeatable process you can apply to build a wide variety of applications. If you want to try vibe coding, this will be the best place to start! Further, you'll be able to use these techniques with whatever tool you're most comfortable with (like ChatGPT, Gemini, Claude, or others) -- we're vendor neutral. Skills you'll gain: - How to build web apps with AI - zero coding skills needed - How to fix and improve your creations by chatting with AI - A simple process you can use to build other things you can dream up Building with AI is one of the most fun things in the world. Please join me and take your first step! I think you will be surprised at what you can build. And if you're an experienced engineer, please share this with someone in your life who's been curious about building with AI. Come build with me!

Andrew Ng

634,312 views • 5 months ago

We're also launching a preview of Artifacts on You can ask Claude to generate docs, code, mermaid diagrams, vector graphics, or even simple games. Artifacts appear next to your chat, letting you see, iterate, and build on your creations in real-time.

We're also launching a preview of Artifacts on You can ask Claude to generate docs, code, mermaid diagrams, vector graphics, or even simple games. Artifacts appear next to your chat, letting you see, iterate, and build on your creations in real-time.

Anthropic

588,360 views • 2 years ago

With 1 prompt – Make your Google Calendar work the way you want: Your Own Design and Super Intelligent. Dynamic Apps in Nimo let you redesign your Gmail , Atlassian Jira , and Google Calendar the way you want. The beauty is the data stays in your existing apps. The apps you create run locally on your computer. Jared Friedman used to request better versions of the apps he used daily, but had to wait for someone else to build them. Now, he can create his own with a single prompt. Would you like to try?

With 1 prompt – Make your Google Calendar work the way you want: Your Own Design and Super Intelligent. Dynamic Apps in Nimo let you redesign your Gmail , Atlassian Jira , and Google Calendar the way you want. The beauty is the data stays in your existing apps. The apps you create run locally on your computer. Jared Friedman used to request better versions of the apps he used daily, but had to wait for someone else to build them. Now, he can create his own with a single prompt. Would you like to try?

rohildev

12,014 views • 9 months ago

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!

Google Gemini

414,938 views • 1 year ago

New in Visual Studio Code Insiders: Interactive mermaid diagrams in Chat. Zoom, pan, and iterate over mermaid diagrams, or open them in the editor when you need more room. Matt Bierner 🪦 shows you how:

New in Visual Studio Code Insiders: Interactive mermaid diagrams in Chat. Zoom, pan, and iterate over mermaid diagrams, or open them in the editor when you need more room. Matt Bierner 🪦 shows you how:

Pierce Boggan

36,915 views • 4 months ago

Today @GoogleMaps is getting its biggest upgrade in over a decade. By combining our Gemini models with a deep understanding of the world, Maps now unlocks entirely new possibilities for how you navigate and explore. Here’s what you need to know 🧵

Today @GoogleMaps is getting its biggest upgrade in over a decade. By combining our Gemini models with a deep understanding of the world, Maps now unlocks entirely new possibilities for how you navigate and explore. Here’s what you need to know 🧵

Google

28,832,583 views • 3 months ago

2. Build interactive tools and apps without code Describe your idea and Grok scaffolds the UI, logic, and deployment steps no coding required. Prompt: "You are a senior software architect who excels at building no-code and low-code systems with HTML, JavaScript, and Web APIs. Task Design a fully working interactive tool based on this idea: [DESCRIBE YOUR TOOL IDEA] Deliverables 1. A plain-English explanation of how the tool works. 2. A step-by-step plan to implement it with Grok or a no-code platform. 3. Exact HTML/CSS/JS code if relevant. 4. UX and design improvement tips. 5. Instructions to generate a shareable, embed-ready version. Imagine you are shipping an MVP for a startup demo. "

2. Build interactive tools and apps without code Describe your idea and Grok scaffolds the UI, logic, and deployment steps no coding required. Prompt: "You are a senior software architect who excels at building no-code and low-code systems with HTML, JavaScript, and Web APIs. Task Design a fully working interactive tool based on this idea: [DESCRIBE YOUR TOOL IDEA] Deliverables 1. A plain-English explanation of how the tool works. 2. A step-by-step plan to implement it with Grok or a no-code platform. 3. Exact HTML/CSS/JS code if relevant. 4. UX and design improvement tips. 5. Instructions to generate a shareable, embed-ready version. Imagine you are shipping an MVP for a startup demo. "

God of Prompt

316,672 views • 11 months ago

Learn v0 in under 10 minutes ✨ I'll show you how to: • Build 3D games, run code, and create apps • Learn about Next.js (with up-to-date knowledge of App Router) • Start from @shadcn/ui components + fork from there • Publish web apps and examples you can share with others

Learn v0 in under 10 minutes ✨ I'll show you how to: • Build 3D games, run code, and create apps • Learn about Next.js (with up-to-date knowledge of App Router) • Start from @shadcn/ui components + fork from there • Publish web apps and examples you can share with others

Lee Robinson

92,214 views • 1 year ago

Introducing the new Svgl 🥳🎉 ❖ New design. Upgrade to Svelte 5 + Tailwind CSS v4. ❖ New API docs + extensions page. ❖ shadcn/ui support + open with v0. ❖ Copy the optimized SVG directly using SVGO. ❖ Add your SVGs to favorites and access your list whenever you want.

Introducing the new Svgl 🥳🎉 ❖ New design. Upgrade to Svelte 5 + Tailwind CSS v4. ❖ New API docs + extensions page. ❖ shadcn/ui support + open with v0. ❖ Copy the optimized SVG directly using SVGO. ❖ Add your SVGs to favorites and access your list whenever you want.

Pablo

41,634 views • 8 months ago

Wow If you have any interest in making money on the web you need to watch this I built an entire AI Movie app with just 3 prompts. 0 lines of code written I can now ship this app and make $ Here's your complete bolt .new beginner's guide (Trust me, you want to bookmark this)

Wow If you have any interest in making money on the web you need to watch this I built an entire AI Movie app with just 3 prompts. 0 lines of code written I can now ship this app and make $ Here's your complete bolt .new beginner's guide (Trust me, you want to bookmark this)

Alex Finn

43,690 views • 1 year ago

We’re releasing an updated Gemini 2.5 Pro (I/O edition) to make it even better at coding. 🚀 You can build richer web apps, games, simulations and more - all with one prompt. In Google Gemini, here's how it transformed images of nature into code to represent unique patterns 🌱

We’re releasing an updated Gemini 2.5 Pro (I/O edition) to make it even better at coding. 🚀 You can build richer web apps, games, simulations and more - all with one prompt. In Google Gemini, here's how it transformed images of nature into code to represent unique patterns 🌱

Google DeepMind

854,039 views • 1 year ago