Для разнообразия можно рассмотреть использование SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
<rect width="100%" height="100%" fill="#111111" />
<text x="10" y="150" font-size="150px" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text>
</svg>
Добавляем буквально одну строчку и можно сделать анимацию обводки
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
<rect width="100%" height="100%" fill="#111111" />
<text x="10" y="150" font-size="150px" stroke-dasharray="25" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES
<!-- Анимация обводки -->
<animate attributeName="stroke-dashoffset" dur="2s" values="300;0" repeatCount="indefinite" />
</text>
</svg>
+SVG Filter
Для обводки используются SVG фильтры: feColorMatrix
и feMorphology
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
<filter id="outText"
x="-20%" y="-20%" width="300%" height="300%">
<feMorphology operator="dilate" in="SourceAlpha"
radius="4" result="e1" />
<feMorphology operator="dilate" in="SourceAlpha"
radius="1" result="e2" />
<feComposite in="e1" in2="e2" operator="xor"
result="outline"/>
<feColorMatrix type="matrix" in="outline"
values="0 0 0 0 0.2
0 0 0 0 0.1
0 0 0 0 0.5
0 0 0 1 0" result="outline2"/>
<feComposite in="outline2" in2="SourceGraphic"
operator="over" result="output"/>
</filter>
<rect width="100%" height="100%" fill="#111111" />
<text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES
</text>
</svg>
Тот же вариант + анимация строки
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
<filter id="outText"
x="-20%" y="-20%" width="300%" height="300%">
<feMorphology operator="dilate" in="SourceAlpha"
radius="5" result="e1" />
<feMorphology operator="dilate" in="SourceAlpha"
radius="1" result="e2" />
<feComposite in="e1" in2="e2" operator="xor"
result="outline"/>
<feColorMatrix type="matrix" in="outline"
values="0 0 0 0 0.2
0 0 0 0 0.1
0 0 0 0 0.9
0 0 1 1 0" result="outline2"/>
<feComposite in="outline2" in2="SourceGraphic"
operator="over" result="output"/>
</filter>
<rect width="100%" height="100%" fill="#111111" />
<text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4" > DES
<!-- Анимация обводки -->
<animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
</text>
</svg>