Обратите внимание:
При изменении текста, возможно придется менять его размер и положение, а также параметры окна отображения viewBox
Обычный текст с обводкой
|
1 2 3 |
<svg class="stroke-text" viewBox="0 0 800 50"> <text x="50%" y="90%">Обычный текст</text> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.stroke-text text { font-family: Verdana, sans-serif; font-weight: bold; font-size: 50px; text-anchor: middle; stroke: #337AB7; stroke-width: 2; letter-spacing: 3px; fill: none; text-transform: uppercase; } |
Текст с анимированной обводкой
В данном примере можно использовать до 5-ти различных цветов контура каждой буквы
|
1 2 3 4 5 6 7 8 9 10 |
<svg class="a-stroke" viewBox="0 0 500 70"> <symbol id="s-text"> <text x="50%" y="90%">Atuin</text> </symbol> <use class="text" xlink:href="#s-text"></use> <use class="text" xlink:href="#s-text"></use> <use class="text" xlink:href="#s-text"></use> <use class="text" xlink:href="#s-text"></use> <use class="text" xlink:href="#s-text"></use> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.a-stroke { margin: 20px 0; } .a-stroke .text { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 70 330; stroke-dashoffset: 0; animation: stroke 6s infinite linear; font-family: Tahoma, sans-serif; font-size: 70px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; text-anchor: middle; } .a-stroke .text:nth-child(5n + 1) { stroke: #337AB7; animation-delay: -1.2s; } .a-stroke .text:nth-child(5n + 2) { stroke: #357fbf; animation-delay: -2.4s; } .a-stroke .text:nth-child(5n + 3) { stroke: #3784c7; animation-delay: -3.6s; } .a-stroke .text:nth-child(5n + 4) { stroke: #3174af; animation-delay: -4.8s; } .a-stroke .text:nth-child(5n + 5) { stroke: #2f6fa7; animation-delay: -6s; } @keyframes stroke { 100% { stroke-dashoffset: -400; } } |
Градиентный текст
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<svg class="gradient" viewBox="0 0 200 65"> <defs> <linearGradient id="rainbow" x1="0" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse" > <stop stop-color="#337ab7" offset="0%"/> <stop stop-color="#BFE2FF" offset="20%"/> <stop stop-color="#337ab7" offset="40%"/> <stop stop-color="#BFE2FF" offset="60%"/> <stop stop-color="#337ab7" offset="80%"/> <stop stop-color="#BFE2FF" offset="100%"/> </linearGradient> </defs> <text fill="url(#rainbow)"> <tspan font-size="20" x="50%" y="20">Градиентный</tspan> <tspan font-size="35" x="50%" dy="40">текст</tspan> </text> </svg> |
|
1 2 3 4 5 6 |
.gradient text { font-family: Tahoma, sans-serif; font-weight: bold; text-transform: uppercase; text-anchor: middle; } |
Смещающийся и печатающийся текст
|
1 2 3 4 5 6 7 8 |
<svg viewBox="0 0 520 50"> <path id="path"> <animate attributeName="d" from="m0,32 h0" to="m100,32 h1100" dur="6s" begin="0s" repeatCount="indefinite"/> </path> <text font-size="20" font-weight="bold" font-family="Tahoma" fill="#337AB7"> <textPath xlink:href="#path">Смещающийся печатающийся текст </textPath> </text> </svg> |
3D текст
Похожий вариант на CSS можно посмотреть в теме 3D текст на CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<svg viewBox="0 0 600 150" class="svg-text"> <defs> <symbol id="stroke-2"> <text x="50%" y="83%" fill="none" stroke-width=".15em" stroke-linecap="round" stroke-linejoin="round" paint-order="stroke fill" text-anchor="middle">3D текст</text> </symbol> <symbol id="fill-2"> <text x="50%" y="77%" text-anchor="middle">3D текст</text> </symbol> </defs> <g stroke="#2a6497"> <use y="5%" xlink:href="#stroke-2" opacity="0.5" filter="url(#drop-stroke-shadow)"></use> <use y="3%" xlink:href="#stroke-2"></use> <use y="2%" xlink:href="#stroke-2"></use> <use y="1%" xlink:href="#stroke-2"></use> <use xlink:href="#stroke-2" stroke="#77abd9"></use> </g> <g fill="#BFE2FF"> <use class="svg-shaded" y="7%" xlink:href="#fill-2"></use> <use y="6.5%" xlink:href="#fill-2"></use> <use y="6%" xlink:href="#fill-2"></use> <use y="5.5%" xlink:href="#fill-2"></use> <use y="5%" xlink:href="#fill-2"></use> <use y="4.5%" xlink:href="#fill-2"></use> <use y="4%" xlink:href="#fill-2"></use> <use y="3.5%" xlink:href="#fill-2"></use> <use y="3%" xlink:href="#fill-2" fill="white"></use> </g> </svg> |
|
1 2 3 4 5 6 7 8 9 |
.svg-text { font-family: Impact, Charcoal, sans-serif; letter-spacing: 6px; font-size: 110px; transform: rotateX(40deg) rotateY(-5deg); } .svg-shaded { text-shadow: 0 13px 10px rgba(0,0,0,0.3), 0 3px 20px #337AB7; } |
Текст с фоновым изображением
|
1 2 3 4 5 6 7 8 9 10 11 |
<svg class="imgsvg" viewBox="0 0 285 60"> <defs> <pattern id="bgfilter" patternUnits="userSpaceOnUse" width="285" height="80"> <image xlink:href="bg.jpg" x="0" y="-50" width="300" height="200" /> </pattern> <filter id="shbgfilter"> <feDropShadow dx="2" dy="2" stdDeviation="1" flood-color="#000" flood-opacity="0.4"/> </filter> </defs> <text x="50%" y="90%">ATUIN</text> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.imgsvg text { font-family: Tahoma, sans-serif; font-weight: bold; text-transform: uppercase; font-size: 65px; stroke: #337AB7; stroke-width: 1px; filter: url(#shbgfilter); fill: url(#bgfilter); text-anchor: middle; } |
Эффект жидкого текста
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<svg class="liquid" viewBox="0 0 900 300"> <text x="50%" y="70%">ATUIN</text> <defs> <filter id="liquidfilter" width="150%" height="160%" x="-25%" y="-25%"> <feFlood flood-color="#2f6fa7" result="COLOR-blue"></feFlood>‚ <feFlood flood-color="#2f6fa7" result="COLOR-violet"></feFlood> <feFlood flood-color="#3784c7" result="COLOR-violet-light"></feFlood> <feTurbulence baseFrequency="0.05" type="fractalNoise" numOctaves="1" seed="2" result="BOTTOM-SPLASH_10"></feTurbulence> <feGaussianBlur stdDeviation="6.5" in="SourceAlpha" result="BOTTOM-SPLASH_20"></feGaussianBlur> <feDisplacementMap scale="420" in="BOTTOM-SPLASH_20" in2="BOTTOM-SPLASH_10" result="BOTTOM-SPLASH_30"></feDisplacementMap> <feComposite operator="in" in="COLOR-blue" in2="BOTTOM-SPLASH_30" result="BOTTOM-SPLASH_40"></feComposite> <feTurbulence baseFrequency="0.1" type="fractalNoise" numOctaves="1" seed="1" result="MIDDLE-SPLASH_10"></feTurbulence> <feGaussianBlur in="SourceAlpha" stdDeviation="0.1" result="MIDDLE-SPLASH_20"></feGaussianBlur> <feDisplacementMap in="MIDDLE-SPLASH_20" in2="MIDDLE-SPLASH_10" scale="25" result="MIDDLE-SPLASH_30"></feDisplacementMap> <feComposite in="COLOR-violet-light" in2="MIDDLE-SPLASH_30" operator="in" result="MIDDLE-SPLASH_40"></feComposite> <feTurbulence baseFrequency="0.07" type="fractalNoise" numOctaves="1" seed="1" result="TOP-SPLASH_10"></feTurbulence> <feGaussianBlur stdDeviation="3.5" in="SourceAlpha" result="TOP-SPLASH_20"></feGaussianBlur> <feDisplacementMap scale="220" in="TOP-SPLASH_20" in2="TOP-SPLASH_10" result="TOP-SPLASH_30"></feDisplacementMap> <feComposite operator="in" in="COLOR-violet" in2="TOP-SPLASH_30" result="TOP-SPLASH_40"></feComposite> <feMerge result="LIGHT-EFFECTS_10"> <feMergeNode in="BOTTOM-SPLASH_40"></feMergeNode> <feMergeNode in="MIDDLE-SPLASH_40"></feMergeNode> <feMergeNode in="TOP-SPLASH_40"></feMergeNode> </feMerge> <feColorMatrix type="matrix" values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 1 0" in="LIGHT-EFFECTS_10" result="LIGHT-EFFECTS_20"></feColorMatrix> <feGaussianBlur stdDeviation="2" in="LIGHT-EFFECTS_20" result="LIGHT-EFFECTS_30"></feGaussianBlur> <feSpecularLighting surfaceScale="5" specularConstant=".75" specularExponent="30" lighting-color="#white" in="LIGHT-EFFECTS_30" result="LIGHT-EFFECTS_40"> <fePointLight x="-50" y="-100" z="400"></fePointLight> </feSpecularLighting> <feComposite operator="in" in="LIGHT-EFFECTS_40" in2="LIGHT-EFFECTS_20" result="LIGHT-EFFECTS_50"></feComposite> <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="LIGHT-EFFECTS_10" in2="LIGHT-EFFECTS_50" result="LIGHT-EFFECTS_60"></feComposite> </filter> </defs> </svg> |
|
1 2 3 4 5 6 7 |
.liquid text { filter: url(#liquidfilter); font-family: Tahoma, sans-serif; font-weight: bold; font-size: 160px; text-anchor: middle; } |
Заполняющийся текст
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg class="water" viewBox="0 0 574 100" enable-background="new 0 0 574 100" xml:space="preserve"> <defs> <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox"> <path fill="#337AB7" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/> </pattern> <text x="50%" y="-30%" id="watertext" transform="matrix(1 0 0 1 -8.0684 116.7852)">ATUIN</text> <mask id="text_mask"> <use x="0" y="0" xlink:href="#watertext" opacity="1" fill="#fff"/> </mask> </defs> <use x="0" y="0" xlink:href="#watertext" fill="#BFE2FF"/> <rect class="water-fill" mask="url(#text_mask)" fill="url(#water)" x="-400" y="0" width="1600" height="120"/> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
#watertext { font-family: Tahoma, sans-serif; font-weight: bold; text-transform: uppercase; font-size: 100px; text-anchor: middle; } .water-fill { animation: wave 0.7s infinite linear, fill-up 10s infinite ease-out alternate; } @keyframes wave { 0% { x: -400px; } 100% { x: 0; } } @keyframes fill-up { 0% { height: 0; y: 130px; } 100% { height: 160px; y: -30px; } } |
Последний вариант
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<svg class="lastvar" viewbox="0 0 1024 240"> <linearGradient id="gr-mask-opacity" x1="100%" y1="0" x2="100%" y2="25%" gradientUnits="objectBoundingBox"> <animate attributeName="x1" values="-100%;100%;" dur="7s" repeatCount="indefinite" /> <animate attributeName="x2" values="0%;200%;"dur="7s" repeatCount="indefinite" /> <stop stop-color="rgb(0,0,0)" offset="0%"/> <stop stop-color="rgb(255,255,255)" offset="30%"/> <stop stop-color="rgb(255,255,255)" offset="70%"/> <stop stop-color="rgb(0,0,0)" offset="100%"/> </linearGradient> <mask id="mask-text-appear" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse"> <rect width="100%" height="100%" fill="url(#gr-mask-opacity)"/> </mask> <pattern id="pt-stripes" width="150" height="100" viewBox="0 0 600 400" patternUnits="userSpaceOnUse"> <g class="g-lines"> <path d="M0,0 600,400" class="pt-line"/> <path d="M0,200 600,350" class="pt-line"/> <path d="M0,350 600,350" class="pt-line"/> <path d="M0,200 600,0" class="pt-line"/> <path d="M0,150 600,200" class="pt-line"/> <path d="M0,400 600,150" class="pt-line"/> <path d="M0,150 600,100" class="pt-line"/> <path d="M0,100 600,300" class="pt-line"/> <path d="M0,300 600,10" class="pt-line"/> <path d="M0,300 600,250" class="pt-line"/> <path d="M0,250 600,400" class="pt-line"/> <path d="M100,0 600,200" class="pt-line"/> <path d="M100,0 0,250" class="pt-line"/> <path d="M400,0 300,400" class="pt-line"/> <path d="M300,0 100,400" class="pt-line"/> <path d="M200,0 300,400" class="pt-line"/> <path d="M400,0 600,400" class="pt-line"/> <path d="M400,400 500,0" class="pt-line"/> <path d="M200,400 170,0" class="pt-line"/> <path d="M170,400 370,0" class="pt-line"/> <path d="M370,400 600,0" class="pt-line"/> <path d="M0,40 600,40" class="pt-line"/> <path d="M0,20 600,100" class="pt-line"/> <path d="M500,400 600,100" class="pt-line"/> <path d="M0,100 40,40" class="pt-line"/> <path d="M260,-5 60,405" class="pt-line"/> <path d="M60,-5 260,405" class="pt-line"/> <path d="M-5,240 110,405" class="pt-line"/> <path d="M120,160 0,405" class="pt-line"/> <path d="M600,200 395,405" class="pt-line"/> <path d="M400,120 370,405" class="pt-line"/> <path d="M300,0 400,120" class="pt-line"/> <path d="M280,190 370,405" class="pt-line"/> </g> </pattern> <g mask="url(#mask-text-appear)" fill="url(#pt-stripes)"> <text x="50%" y="60%" dy=".25em" text-anchor="middle">ATUIN</text> </g> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.lastvar text { stroke: white; stroke-width: 2; stroke-dasharray: 20; font-family: Tahoma, sans-serif; font-weight: bold; font-size: 200px; } .lastvar .g-lines path { stroke: #337AB7; stroke-width: 10; } |
Блин, да вы волшебник, который открывает простые способы! ))))
Честно - я раньше анимированную обводку реализовал через танцы с бубнами, использовая кучу приложений и все перегоняя в гифку в итоге.
А тут все так просто оказывается.