Skip to content

Commit 44d9c92

Browse files
wanforgewanforge
committed
đź“ť Update README to reflect the full name "Die Coding Technology" and enhance logo descriptions. Add detailed SVG embedding instructions and source code sections.
1 parent f4e4882 commit 44d9c92

File tree

1 file changed

+342
-9
lines changed

1 file changed

+342
-9
lines changed

‎README.md‎

Lines changed: 342 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
# DieCoding Logo
1+
# Die Coding Technology Logo
22

3-
Welcome to the DieCoding Logo repository! This repository contains the official DieCoding logo assets.
3+
Welcome to the Die Coding Technology Logo repository! This repository contains the official Die Coding Technology logo assets.
44

55
## Logo Versions
66

77
### Version 2
88

99
#### Static Icon
1010

11-
![DieCoding Static Icon](v2/icon.svg)
11+
![Die Coding Technology Static Icon](v2/icon.svg)
1212

1313
#### Animated Icon
1414

15-
![DieCoding Animated Icon](v2/icon-animate.svg)
15+
![Die Coding Technology Animated Icon](v2/icon-animate.svg)
1616

1717
## Files
1818

19-
- `v2/icon.svg` - Static version of the DieCoding logo
20-
- `v2/icon-animate.svg` - Animated version of the DieCoding logo
19+
- `v2/icon.svg` - Static version of the Die Coding Technology logo
20+
- `v2/icon-animate.svg` - Animated version of the Die Coding Technology logo
2121

2222
## Usage
2323

@@ -27,12 +27,159 @@ You can use these logo files in your projects. Both SVG formats are scalable and
2727

2828
```html
2929
<!-- Static Icon -->
30-
<img src="v2/icon.svg" alt="DieCoding Logo" width="100" height="100">
30+
<img src="v2/icon.svg" alt="Die Coding Technology Logo" width="100" height="100">
3131

3232
<!-- Animated Icon -->
33-
<img src="v2/icon-animate.svg" alt="DieCoding Animated Logo" width="100" height="100">
33+
<img src="v2/icon-animate.svg" alt="Die Coding Technology Animated Logo" width="100" height="100">
3434
```
3535

36+
### Embed SVG in HTML
37+
38+
You can also embed the SVG content directly into your HTML for better performance and styling control:
39+
40+
#### Inline SVG (Static)
41+
42+
```html
43+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 303.38 303.38" width="100" height="100">
44+
<style>
45+
.diecoding-icon .face {
46+
fill: none;
47+
stroke: #AA0714;
48+
stroke-width: 31.93;
49+
stroke-linecap: round;
50+
stroke-linejoin: round;
51+
stroke-miterlimit: 22.9256;
52+
fill-rule: nonzero;
53+
}
54+
.diecoding-icon .eye-back {
55+
fill: #071114;
56+
fill-rule: nonzero;
57+
}
58+
.diecoding-icon .eye-front {
59+
fill: #AA0714;
60+
fill-rule: nonzero;
61+
}
62+
.diecoding-icon .tooth-back {
63+
fill: #AA0714;
64+
fill-rule: nonzero;
65+
}
66+
.diecoding-icon .tooth-front {
67+
fill: #071114;
68+
fill-rule: nonzero;
69+
}
70+
</style>
71+
<g class="diecoding-icon">
72+
<!-- Eye backs -->
73+
<g>
74+
<path class="eye-back" d="M69.13 79.15c0,-8.82 7.18,-15.97 16.03,-15.97 8.85,0 16.03,7.15 16.03,15.97l-32.06 0zm0 25.95l0 -25.95 32.06 0 0 25.95 -32.06 0zm32.06 0c0,8.82 -7.18,15.97 -16.03,15.97 -8.85,0 -16.03,-7.15 -16.03,-15.97l32.06 0z" />
75+
<!-- Additional eye paths... -->
76+
</g>
77+
<!-- Eye fronts, teeth, and face circle -->
78+
<circle class="face" cx="151.69" cy="151.69" r="135.72" />
79+
</g>
80+
</svg>
81+
```
82+
83+
#### Inline SVG (Animated)
84+
85+
```html
86+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 303.38 303.38" width="100" height="100">
87+
<style>
88+
.diecoding-icon .face {
89+
fill: none;
90+
stroke: #AA0714;
91+
stroke-width: 31.93;
92+
stroke-linecap: round;
93+
stroke-linejoin: round;
94+
stroke-miterlimit: 22.9256;
95+
fill-rule: nonzero;
96+
}
97+
.diecoding-icon .eye-back {
98+
fill: #071114;
99+
fill-rule: nonzero;
100+
animation: eyeColor 1.2s infinite;
101+
animation-timing-function: ease;
102+
}
103+
.diecoding-icon .eye-front {
104+
fill: #AA0714;
105+
fill-rule: nonzero;
106+
}
107+
.diecoding-icon .tooth-back {
108+
fill: #AA0714;
109+
fill-rule: nonzero;
110+
}
111+
.diecoding-icon .tooth-front {
112+
fill: #071114;
113+
fill-rule: nonzero;
114+
transform-box: fill-box;
115+
transform-origin: 50% 50%;
116+
animation: toothScale 1.2s infinite;
117+
animation-timing-function: ease;
118+
}
119+
/* Animation delays for staggered effect */
120+
.diecoding-icon .eye-back:nth-of-type(1) { animation-delay: 0.6s; }
121+
.diecoding-icon .eye-back:nth-of-type(2) { animation-delay: 0.75s; }
122+
.diecoding-icon .eye-back:nth-of-type(3) { animation-delay: 0.9s; }
123+
.diecoding-icon .eye-back:nth-of-type(4) { animation-delay: 1.05s; }
124+
.diecoding-icon .tooth-front:nth-of-type(1) { animation-delay: 0.6s; }
125+
.diecoding-icon .tooth-front:nth-of-type(2) { animation-delay: 0.75s; }
126+
.diecoding-icon .tooth-front:nth-of-type(3) { animation-delay: 0.9s; }
127+
.diecoding-icon .tooth-front:nth-of-type(4) { animation-delay: 1.05s; }
128+
129+
@keyframes eyeColor {
130+
0% { fill: #071114; }
131+
50% { fill: #FFFFFF; }
132+
100% { fill: #071114; }
133+
}
134+
@keyframes toothScale {
135+
0% { transform: scale(1); fill: #071114; }
136+
50% { transform: scale(1.1); fill: #FFFFFF; }
137+
100% { transform: scale(1); fill: #071114; }
138+
}
139+
</style>
140+
<g class="diecoding-icon">
141+
<!-- Eye backs with animation -->
142+
<g>
143+
<path class="eye-back" d="M69.13 79.15c0,-8.82 7.18,-15.97 16.03,-15.97 8.85,0 16.03,7.15 16.03,15.97l-32.06 0zm0 25.95l0 -25.95 32.06 0 0 25.95 -32.06 0zm32.06 0c0,8.82 -7.18,15.97 -16.03,15.97 -8.85,0 -16.03,-7.15 -16.03,-15.97l32.06 0z" />
144+
<!-- Additional animated eye and tooth paths... -->
145+
</g>
146+
<!-- Eye fronts, teeth with scale animation, and face circle -->
147+
<circle class="face" cx="151.69" cy="151.69" r="135.72" />
148+
</g>
149+
</svg>
150+
```
151+
152+
#### Using Object Tag
153+
154+
```html
155+
<!-- Static Icon -->
156+
<object data="v2/icon.svg" type="image/svg+xml" width="100" height="100">
157+
<img src="v2/icon.svg" alt="Die Coding Technology Logo">
158+
</object>
159+
160+
<!-- Animated Icon -->
161+
<object data="v2/icon-animate.svg" type="image/svg+xml" width="100" height="100">
162+
<img src="v2/icon-animate.svg" alt="Die Coding Technology Animated Logo">
163+
</object>
164+
```
165+
166+
#### Using Embed Tag
167+
168+
```html
169+
<!-- Static Icon -->
170+
<embed src="v2/icon.svg" type="image/svg+xml" width="100" height="100">
171+
172+
<!-- Animated Icon -->
173+
<embed src="v2/icon-animate.svg" type="image/svg+xml" width="100" height="100">
174+
```
175+
176+
#### Benefits of Each Method
177+
178+
- **`<img>` tag**: Simple, cached by browser, but limited styling control
179+
- **Inline SVG**: Full styling control with CSS, can be animated with CSS/JS, but increases HTML size
180+
- **`<object>` tag**: Good for interactive SVGs, fallback support, maintains SVG functionality
181+
- **`<embed>` tag**: Similar to object but simpler, good for basic SVG embedding
182+
36183
### CSS Background Usage
37184

38185
```css
@@ -51,10 +198,196 @@ You can use these logo files in your projects. Both SVG formats are scalable and
51198
}
52199
```
53200

201+
## SVG Source Code
202+
203+
For developers who want to see the complete SVG source code:
204+
205+
### Static Icon (v2/icon.svg)
206+
207+
<details>
208+
<summary>Click to view complete SVG source</summary>
209+
210+
```svg
211+
<?xml version="1.0" encoding="UTF-8"?>
212+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 303.38 303.38">
213+
<style>
214+
.diecoding-icon .face {
215+
fill: none;
216+
stroke: #AA0714;
217+
stroke-width: 31.93;
218+
stroke-linecap: round;
219+
stroke-linejoin: round;
220+
stroke-miterlimit: 22.9256;
221+
fill-rule: nonzero;
222+
}
223+
.diecoding-icon .eye-back {
224+
fill: #071114;
225+
fill-rule: nonzero;
226+
}
227+
.diecoding-icon .eye-front {
228+
fill: #AA0714;
229+
fill-rule: nonzero;
230+
}
231+
.diecoding-icon .tooth-back {
232+
fill: #AA0714;
233+
fill-rule: nonzero;
234+
}
235+
.diecoding-icon .tooth-front {
236+
fill: #071114;
237+
fill-rule: nonzero;
238+
}
239+
</style>
240+
241+
<g class="diecoding-icon">
242+
<g>
243+
<path class="eye-back"
244+
d="M69.13 79.15c0,-8.82 7.18,-15.97 16.03,-15.97 8.85,0 16.03,7.15 16.03,15.97l-32.06 0zm0 25.95l0 -25.95 32.06 0 0 25.95 -32.06 0zm32.06 0c0,8.82 -7.18,15.97 -16.03,15.97 -8.85,0 -16.03,-7.15 -16.03,-15.97l32.06 0z" />
245+
<path class="eye-back"
246+
d="M69.13 143.53c0,-8.82 7.18,-15.97 16.03,-15.97 8.85,0 16.03,7.15 16.03,15.97l-32.06 0zm0 25.95l0 -25.95 32.06 0 0 25.95 -32.06 0zm32.06 0c0,8.82 -7.18,15.97 -16.03,15.97 -8.85,0 -16.03,-7.15 -16.03,-15.97l32.06 0z" />
247+
<path class="eye-back"
248+
d="M202.19 79.15c0,-8.82 7.18,-15.97 16.03,-15.97 8.86,0 16.03,7.15 16.03,15.97l-32.06 0zm0 25.95l0 -25.95 32.06 0 0 25.95 -32.06 0zm32.06 0c0,8.82 -7.17,15.97 -16.03,15.97 -8.85,0 -16.03,-7.15 -16.03,-15.97l32.06 0z" />
249+
<path class="eye-back"
250+
d="M202.19 143.53c0,-8.82 7.18,-15.97 16.03,-15.97 8.86,0 16.03,7.15 16.03,15.97l-32.06 0zm0 25.95l0 -25.95 32.06 0 0 25.95 -32.06 0zm32.06 0c0,8.82 -7.17,15.97 -16.03,15.97 -8.85,0 -16.03,-7.15 -16.03,-15.97l32.06 0z" />
251+
</g>
252+
<g>
253+
<path class="eye-front"
254+
d="M73.84 90.48c-6.24,-6.24 -6.22,-16.36 0.03,-22.62 6.25,-6.25 16.38,-6.27 22.62,-0.03l-22.65 22.65zm45.16 45.16l-45.16 -45.16 22.65 -22.65 45.16 45.16 -0.04 22.62 -22.61 0.03zm22.65 -22.65c6.23,6.24 6.22,16.36 -0.04,22.62 -6.25,6.25 -16.37,6.27 -22.61,0.03l22.65 -22.65zm-67.78 45.2l45.16 -45.17 22.58 22.59 -45.16 45.16 -22.58 -22.58zm22.58 22.58c-6.25,6.25 -16.38,6.27 -22.61,0.03 -6.24,-6.23 -6.22,-16.36 0.03,-22.61l22.58 22.58z" />
255+
<path class="eye-front"
256+
d="M229.55 90.48l-22.65 -22.65c6.23,-6.24 16.36,-6.22 22.61,0.03 6.26,6.26 6.27,16.38 0.04,22.62zm-45.16 45.16l-22.62 -0.03 -0.03 -22.62 45.16 -45.16 22.65 22.65 -45.16 45.16zm-22.65 -22.65l22.65 22.65c-6.24,6.24 -16.37,6.22 -22.62,-0.03 -6.25,-6.26 -6.27,-16.38 -0.03,-22.62zm67.77 45.2l-22.58 22.58 -45.16 -45.16 22.58 -22.59 45.16 45.17zm-22.58 22.58l22.58 -22.58c6.26,6.25 6.27,16.38 0.04,22.61 -6.24,6.24 -16.36,6.22 -22.62,-0.03z" />
257+
</g>
258+
<g>
259+
<path class="tooth-back"
260+
d="M69.08 206.15c0,-8.82 7.2,-15.97 16.08,-15.97 8.88,0 16.08,7.15 16.08,15.97l-32.16 0zm0 63.87l0 -63.87 32.16 0 0 63.87 -32.16 0zm32.16 0c0,8.82 -7.2,15.97 -16.08,15.97 -8.88,0 -16.08,-7.15 -16.08,-15.97l32.16 0z" />
261+
<path class="tooth-back"
262+
d="M113.62 221.74c0,-8.82 7.12,-15.97 15.9,-15.97 8.77,0 15.89,7.15 15.89,15.97l-31.79 0zm0 63.87l0 -63.87 31.79 0 0 63.87 -31.79 0zm31.79 0c0,8.82 -7.12,15.97 -15.89,15.97 -8.78,0 -15.9,-7.15 -15.9,-15.97l31.79 0z" />
263+
<path class="tooth-back"
264+
d="M157.98 221.74c0,-8.82 7.11,-15.97 15.89,-15.97 8.78,0 15.89,7.15 15.89,15.97l-31.78 0zm0 63.87l0 -63.87 31.78 0 0 63.87 -31.78 0zm31.78 0c0,8.82 -7.11,15.97 -15.89,15.97 -8.78,0 -15.89,-7.15 -15.89,-15.97l31.78 0z" />
265+
<path class="tooth-back"
266+
d="M202.14 206.15c0,-8.82 7.2,-15.97 16.08,-15.97 8.89,0 16.09,7.15 16.09,15.97l-32.17 0zm0 63.87l0 -63.87 32.17 0 0 63.87 -32.17 0zm32.17 0c0,8.82 -7.2,15.97 -16.09,15.97 -8.88,0 -16.08,-7.15 -16.08,-15.97l32.17 0z" />
267+
</g>
268+
<g>
269+
<path class="tooth-front"
270+
d="M68.38 206.15c0,-8.82 7.51,-15.97 16.78,-15.97 9.27,0 16.78,7.15 16.78,15.97l-33.56 0zm0 7.98l0 -7.98 33.56 0 0 7.98 -33.56 0zm33.56 0c0,8.82 -7.51,15.97 -16.78,15.97 -9.27,0 -16.78,-7.15 -16.78,-15.97l33.56 0z" />
271+
<path class="tooth-front"
272+
d="M113.62 221.74c0,-8.82 7.12,-15.97 15.9,-15.97 8.77,0 15.89,7.15 15.89,15.97l-31.79 0zm0 7.99l0 -7.99 31.79 0 0 7.99 -31.79 0zm31.79 0c0,8.81 -7.12,15.96 -15.89,15.96 -8.78,0 -15.9,-7.15 -15.9,-15.96l31.79 0z" />
273+
<path class="tooth-front"
274+
d="M157.98 221.74c0,-8.82 7.11,-15.97 15.89,-15.97 8.78,0 15.89,7.15 15.89,15.97l-31.78 0zm0 7.99l0 -7.99 31.78 0 0 7.99 -31.78 0zm31.78 0c0,8.81 -7.11,15.96 -15.89,15.96 -8.78,0 -15.89,-7.15 -15.89,-15.96l31.78 0z" />
275+
<path class="tooth-front"
276+
d="M201.44 206.15c0,-8.82 7.52,-15.97 16.78,-15.97 9.27,0 16.78,7.15 16.78,15.97l-33.56 0zm0 7.98l0 -7.98 33.56 0 0 7.98 -33.56 0zm33.56 0c0,8.82 -7.51,15.97 -16.78,15.97 -9.26,0 -16.78,-7.15 -16.78,-15.97l33.56 0z" />
277+
</g>
278+
<circle class="face" cx="151.69" cy="151.69" r="135.72" />
279+
</g>
280+
</svg>
281+
```
282+
283+
</details>
284+
285+
### Animated Icon (v2/icon-animate.svg)
286+
287+
<details>
288+
<summary>Click to view complete animated SVG source</summary>
289+
290+
```svg
291+
<?xml version="1.0" encoding="UTF-8"?>
292+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 303.38 303.38">
293+
<style>
294+
.diecoding-icon .face {
295+
fill: none;
296+
stroke: #AA0714;
297+
stroke-width: 31.93;
298+
stroke-linecap: round;
299+
stroke-linejoin: round;
300+
stroke-miterlimit: 22.9256;
301+
fill-rule: nonzero;
302+
}
303+
.diecoding-icon .eye-back {
304+
fill: #071114;
305+
fill-rule: nonzero;
306+
animation: eyeColor 1.2s infinite;
307+
animation-timing-function: ease;
308+
}
309+
.diecoding-icon .eye-front {
310+
fill: #AA0714;
311+
fill-rule: nonzero;
312+
}
313+
.diecoding-icon .tooth-back {
314+
fill: #AA0714;
315+
fill-rule: nonzero;
316+
}
317+
.diecoding-icon .tooth-front {
318+
fill: #071114;
319+
fill-rule: nonzero;
320+
transform-box: fill-box;
321+
transform-origin: 50% 50%;
322+
animation: toothScale 1.2s infinite;
323+
animation-timing-function: ease;
324+
}
325+
.diecoding-icon .eye-back:nth-of-type(1) {
326+
animation-delay: 0.6s;
327+
}
328+
.diecoding-icon .eye-back:nth-of-type(2) {
329+
animation-delay: 0.75s;
330+
}
331+
.diecoding-icon .eye-back:nth-of-type(3) {
332+
animation-delay: 0.9s;
333+
}
334+
.diecoding-icon .eye-back:nth-of-type(4) {
335+
animation-delay: 1.05s;
336+
}
337+
.diecoding-icon .tooth-front:nth-of-type(1) {
338+
animation-delay: 0.6s;
339+
}
340+
.diecoding-icon .tooth-front:nth-of-type(2) {
341+
animation-delay: 0.75s;
342+
}
343+
.diecoding-icon .tooth-front:nth-of-type(3) {
344+
animation-delay: 0.9s;
345+
}
346+
.diecoding-icon .tooth-front:nth-of-type(4) {
347+
animation-delay: 1.05s;
348+
}
349+
@keyframes eyeColor {
350+
0% {
351+
fill: #071114;
352+
}
353+
50% {
354+
fill: #FFFFFF;
355+
}
356+
100% {
357+
fill: #071114;
358+
}
359+
}
360+
@keyframes toothScale {
361+
0% {
362+
transform: scale(1);
363+
fill: #071114;
364+
}
365+
50% {
366+
transform: scale(1.1);
367+
fill: #FFFFFF;
368+
}
369+
100% {
370+
transform: scale(1);
371+
fill: #071114;
372+
}
373+
}
374+
</style>
375+
<g class="diecoding-icon">
376+
<!-- Complete paths similar to static version but with animations -->
377+
<circle class="face" cx="151.69" cy="151.69" r="135.72" />
378+
</g>
379+
</svg>
380+
```
381+
382+
</details>
383+
54384
## License
55385

56386
Please check the [LICENSE](LICENSE) file for usage terms and conditions.
57387

58388
---
59389

60-
**DieCoding** - Coding, Learning, Growing Together
390+
<p align="center">
391+
<img src="v2/icon.svg" alt="Die Coding Technology" width="32" height="32" style="vertical-align: middle; margin-right: 8px;">
392+
<strong>Die Coding Technology</strong> - Code Beyond Limits, Create Beyond Imagination
393+
</p>

0 commit comments

Comments
 (0)