Início Profile Projeto
Avatar de

Matheus Ricardo Uihara Zingarelli

Smiley Face em SVG

  • React
  • D3
  • SVG

Smiley face

Click here to read the English version of this Readme

Componente que cria um rostinho feliz 😀

🪧 Vitrine.Dev
Nome Smiley Face em SVG
🏷️ Tecnologias React, D3, SVG
🚀 URL https://smiley-face-svg-d3.vercel.app
🔥 Curso https://www.youtube.com/watch?v=2LhoCfjm8R4

Créditos

Este projeto foi criado durante as aulas iniciais do curso "Data Visualization with D3, JavaScript, React", criado por Curran Kelleher e disponível no Youtube (em inglês).

Detalhes do projeto

Este é um projeto desenvolvido em React.

O componente <SmileyFace /> desenha um rostinho feliz utilizando elementos SVG e a biblioteca D3. Ele possui diversas props que podem ser modificadas para alterar o tamanho do rosto, olhos, nariz e boca.

O componente <App /> traz um exemplo de configuração que inclui alguns valores aleatórios, possibilitando criar 12 rostinhos diferentes utilizando o mesmo componente, cujo resultado pode ser visto na imagem que ilustra este Readme.

Cada parte do rostinho foi separada em outros componentes, todos disponíveis na pasta /src.

Instalação

O projeto foi criado com o Vite.

Após cloná-lo ou baixá-lo, abra um terminal, navegue até a pasta do projeto e rode o comando abaixo para instalar as dependências necessárias.

npm install

Feito isso, o app pode ser iniciado em modo de desenvolvimento com o seguinte comando:

npm run dev

O app irá rodar na URL http://127.0.0.1:5173.


Credits

This project was created during the initial lessons of the course "Data Visualization with D3, JavaScript, React," provided by Curran Kelleher and available on YouTube.

The translation of this README in English was generously provided by OpenAI's GPT-3 language model, later modified by me.

Project Details

This is a project developed in React.

The <SmileyFace /> component draws a smiley face using SVG elements and the D3 library. It has several props that can be modified to change the size of the face, eyes, nose, and mouth.

The <App /> component provides an example with configuration that includes some random values, creating 12 different faces using the same component. The result can be seen in the image illustrating this Readme.

Each part of the face has been separated into other components, all available in the /src folder.

Instalation

This is a React project bootstrapped with Vite.

After cloning or downloading this project, open a terminal, navigate to the project's folder and run the following command in order to install all necessary dependencies:

npm install

After that, you can run the app in development mode with the following command:

npm run dev

The app will run at http://127.0.0.1:5173.