Smiley Face em 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.