SVG snow animation

SVG snow animation – smil type

I wrote an SVG animation using only SMIL – no JavaScript or CSS.
The original file can be seen here:
http://blog.nediko.info/examples/svg/snow_001.html

Share and Enjoy !

Shares

Собствен ръкописен шрифт Nediko.ttf

Това е тест първи по създаването на собствен ръкописен шрифт. За целта използвах Inkscape, като изтеглих шаблони от https://www.paintfont.com/. Както всяко начало и това е трудна работа. Разработвам един проект в който искам да вкарам натурален шрифт, който да имитира максимално писане с химикал. Потърсих за подобни шрифтове на кирилица, но не намерих. За това се наложи, да се пробвам да си направя сам. Е горе-долу се получи. Не е баш както си го представях, но ще го ползвам.
Наличните символи не са много:
Nediko - custom font - Symbols

Ето как изглежда шрифта ми на кирилица и на латиница:
Nediko custom font

Може да се изтегли от тук: Nediko.ttf – 32.5Kb

Share and Enjoy !

Shares




Background diagonal lines – Inkscape

За да се направят диагонални линии (seamless diagonal line pattern) за фон на html страница или за wallpaper понякога изисква малко математика или просто практика. Ще се опитам да покажа най-простичкия начин за правене на такива линии, който често използвам. За целта ще използвам чудесната OpenSource програма Inkscape.
В Inkscape си правим линиите, които искаме да искаме да получим:
Inkscape diagonal lines
Маркираме с плъзгане на мишката всички линии, натискаме Ctrl, за да получим възможност за въртене на обектите:
Inkscape diagonal lines
Отново натискаме Crtl и завъртаме с мишката на 45°:
Inkscape diagonal lines
С инструмента Rectangle изчертаваме един квадрат. За да се получи точен квадрат при чертането, задръжте Ctrl когато плъзгате мишката. Правим квадрата леко прозрачен, за да видим къде се намираме, спрямо диагоналните линии:
Inkscape diagonal lines
Сега нагласяме квадрата така, че ъглите на квадрата да обхванат максимално точно линиите, които са показани по-долу:
diagonal lines
и долу в дясно по същия начин:
seamless diagonal lines
Сега трябва да разкараме квдрата на най-долния слой, за да не се вижда:
Seamless diagonal lines
Почти готови сме с Background-а, само трябва да го експортваме. Докато е селектиран квадрата (който не се вижда) избираме File -> Export Bitmap:
Inkscape export bitmap
Ако случайно кликнете някъде и квадрата се деселктира, тогава натиснете Alt и кликайте с мишката там където знаете, че е квадрата, докато не се селектира отново.
Много е важно да обърнете внимание на настройките: 75dpi и Selection. Експортираме и си имаме един много тарикатски фон за web-страница:
Diagonal seamless background
Примерна страница, в която може да се види как изглежда бекграунда: Background diagonal lines – example

Inkscape seamless diagonal lines html background

Inkscape файла може да се изтегли от тук: Inkscape seamless diagonal background

Кратко флаш видео, което показва как точно се правят диагоналните линии:
[flv:https://blog.nediko.info/examples/diagonal_lines/Diagonal_lines.flv https://blog.nediko.info/examples/diagonal_lines/diagonal_lines_10.jpg 504 388]

Файловете от видеото могат да се изтеглят от тук: Inkscape-seamless-diagonal-lines.rar

Share and Enjoy !

Shares