Загрузка видео...

Не удалось загрузить видео

На главную

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.

reactdayberlin's profile picture

React Day Berlin

5,486 subscribers

178,106 просмотров • 1 год назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 3

Фото профиля Ian Bobinac
Ian Bobinac1 год назад

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

Фото профиля Alexander
Alexander1 год назад

@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 Quesada
Carlos Quesada1 год назад

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

Похожие видео

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.
0:20

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,629 просмотров • 2 лет назад

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 👇
0:32

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 просмотров • 3 месяцев назад

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.
0:20

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 просмотров • 7 месяцев назад

🚀 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. →
1:20

🚀 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 просмотров • 1 месяц назад

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
0:23

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 просмотров • 4 месяцев назад

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

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,217 просмотров • 2 лет назад

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.
0:23

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 просмотров • 1 год назад

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 ✨
0:25

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 просмотров • 2 месяцев назад

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

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

dára sobaloju

22,222 просмотров • 2 месяцев назад

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!
1:03

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,239 просмотров • 5 месяцев назад

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.
1:16

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 просмотров • 2 лет назад

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?
4:05

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 просмотров • 9 месяцев назад

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!
0:30

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 просмотров • 1 год назад

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:
1:54

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,906 просмотров • 4 месяцев назад

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 🧵
1:07

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,831,956 просмотров • 3 месяцев назад

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:52

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 просмотров • 11 месяцев назад

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
9:04

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 просмотров • 1 год назад

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.
0:51

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 просмотров • 8 месяцев назад

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)
9:38

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 просмотров • 1 год назад

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 🌱
0:29

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 просмотров • 1 год назад