CSS3 SVG GRAPHICS 艺术文本 - 踏得网

非常漂亮的文本特效

svg

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2682
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<svg id="graphics-svg" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 751.55 134.84" version="1.1" xmlns:cc="https://creativecommons.org/ns#" xmlns:dc="https://purl.org/dc/elements/1.1/">
  <g id="layer1" stroke-miterlimit="4" stroke-dasharray="none" transform="translate(-92.863837,-647.47724)">
  <path id="path2987" d="m264.29,447.14c-63.907,0-115.71-51.807-115.71-115.71,0-63.907,51.807-115.71,115.71-115.71h0.00001v115.71z" fill-opacity="0.29804131" transform="matrix(0.54364931,0,0,-0.54836787,12.593088,897.56095)" stroke="#ff8000" stroke-width="1.83149016" fill="#ff8000"/>
  <path id="path3781" d="m380,331.43c0,63.907-51.807,115.71-115.71,115.71-63.907,0-115.71-51.807-115.71-115.71,0-63.907,51.807-115.71,115.71-115.71,63.907,0,115.71,51.807,115.71,115.71z" fill-opacity="0.29803922" transform="matrix(0.2741738,0,0,-0.2741738,84.085789,837.23121)" stroke="#ff8000" stroke-width="3.64732146" fill="#ff8000"/>
  <path id="path3783" d="m264.29,215.71c63.907,0,115.71,51.807,115.71,115.71,0,63.907-51.807,115.71-115.71,115.71v-115.71z" fill-opacity="0.29803922" transform="matrix(0.54364931,0,0,-0.54836787,70.77524,896.24176)" stroke="#00bfa8" stroke-width="1.83149016" fill="#00bfa8"/>
  <rect id="rect3789" transform="matrix(-0.70710678,-0.70710678,0.70710678,-0.70710678,0,0)" fill-opacity="0.29804" ry="4.2603E-15" height="30.699" width="94.699" stroke="#00bfa8" y="-352.96" x="-752.69" stroke-width="1" fill="#00bfa8"/>
  <path id="path3791" fill="#ff4040" fill-opacity="0.29803922" transform="matrix(0.3187422,-0.23814286,0.13501687,0.56219773,239.16437,643.88061)" stroke="#ff4040" stroke-width="2.17520118" d="M328.57,372.86,220.49,326.69,112.4,280.52l94.026-70.519,94.026-70.519,14.059,116.69z"/>
  <rect id="rect3795" ry="4.2603E-15" fill-opacity="0.29804" transform="matrix(0,-1,1,0,0,0)" height="30.699" width="94.699" stroke="#00c8ff" y="426.67" x="-776.83" stroke-width="1" fill="#00c8ff"/>
  <rect id="rect3797" transform="matrix(0,-1,1,0,0,0)" fill-opacity="0.29804" ry="2.0746E-15" height="14.949" width="126.95" stroke="#96F" y="514.55" x="-774.95" stroke-width="1.0512" fill="#96F"/>
  <rect id="rect3799" ry="2.0746E-15" fill-opacity="0.29804" transform="matrix(0,-1,1,0,0,0)" height="14.949" width="126.95" stroke="#96F" y="562.55" x="-774.95" stroke-width="1.0512" fill="#96F"/>
  <rect id="rect3801" ry="8.7778E-15" fill-opacity="0.29804" transform="matrix(0,-1,1,0,0,0)" height="63.251" width="15.251" stroke="#96F" y="514.4" x="-721.1" stroke-width="0.74943" fill="#96F"/>
  <rect id="rect3803" transform="matrix(0,-1,1,0,0,0)" fill-opacity="0.29804" ry="8.7778E-15" height="63.251" width="15.251" stroke="#FC3" y="612.4" x="-665.1" stroke-width="1" fill="#FC3"/>
  <rect id="rect3805" ry="8.7778E-15" fill-opacity="0.29804" transform="matrix(0,-1,1,0,0,0)" height="63.251" width="15.251" stroke="#FC3" y="614.4" x="-777.1" stroke-width="1" fill="#FC3"/>
  <rect id="rect3807" transform="matrix(0,-1,1,0,0,0)" fill-opacity="0.29804" ry="2.0746E-15" height="14.949" width="126.95" stroke="#FC3" y="636.55" x="-776.95" stroke-width="1" fill="#FC3"/>
  <path id="path3809" d="m264.29,447.14c-63.907,0-115.71-51.807-115.71-115.71,0-63.907,51.807-115.71,115.71-115.71h0.00001v115.71z" fill-opacity="0.29804131" transform="matrix(0.54364931,0,0,-0.54836787,610.32126,895.56095)" stroke="#ff8000" stroke-width="2" fill="#ff8000"/>
  <path id="path3813" d="m264.29,447.14c-63.907,0-115.71-51.807-115.71-115.71,0-63.907,51.807-115.71,115.71-115.71h0.00001v115.71z" fill-opacity="0.29804131" transform="matrix(0.13591232,0,0,-0.13709197,718.11101,759.1261)" stroke="#ff8000" stroke-width="7.32596064" fill="#ff8000"/>
  <path id="path3815" d="m264.29,447.14c-63.907,0-115.71-51.807-115.71-115.71,0-63.907,51.807-115.71,115.71-115.71h0.00001v115.71z" fill-opacity="0.29803922" transform="matrix(0.27110306,0,0,-0.34113965,740.90147,802.14088)" stroke="#00bfa8" stroke-width="3.45444798" fill="#00bfa8"/>
  <path id="path3817" d="m262.67,215.73c63.901-0.89229,116.43,50.186,117.32,114.09,0.89229,63.901-50.186,116.43-114.09,117.32-0.5385,0.008-1.0771,0.0113-1.6156,0.0113v-115.71z" fill-opacity="0.29803922" transform="matrix(0.26740337,0,0,-0.34113942,741.83441,850.57436)" stroke="#00bfa8" stroke-width="3.47817063" fill="#00bfa8"/>
  <path id="path3819" d="m264.29,447.14c-63.907,0-115.71-51.807-115.71-115.71,0-63.907,51.807-115.71,115.71-115.71h0.00001v115.71z" fill-opacity="0.29803922" transform="matrix(0.06788495,0,0,-0.07715235,794.53584,714.51294)" stroke="#00bfa8" stroke-width="13.81779289" fill="#00bfa8"/>
  <path id="path3821" d="m262.67,215.73c63.901-0.89229,116.43,50.186,117.32,114.09,0.89229,63.901-50.186,116.43-114.09,117.32-0.5385,0.008-1.0771,0.0113-1.6156,0.0113v-115.71z" fill-opacity="0.29803922" transform="matrix(0.06695847,0,0,-0.07715654,794.91858,763.0519)" stroke="#00bfa8" stroke-width="13.91268253" fill="#00bfa8"/>
  <path id="path3823" d="m371.43,318.57c0,4.7339-5.4365,8.5714-12.143,8.5714-6.7063,0-12.143-3.8376-12.143-8.5714,0-4.7339,5.4365-8.5714,12.143-8.5714,6.7063,0,12.143,3.8376,12.143,8.5714z" fill-opacity="0.29803922" transform="matrix(0.62804324,0,0,0.88972797,128.9959,444.56312)" stroke="#ff4040" stroke-width="1.33775508" fill="#ff4040"/>
  <path id="path3890" d="m380,331.43c0,63.907-51.807,115.71-115.71,115.71-63.907,0-115.71-51.807-115.71-115.71,0-63.907,51.807-115.71,115.71-115.71,63.907,0,115.71,51.807,115.71,115.71z" fill-opacity="0.29803922" transform="matrix(0.06854345,0,0,-0.06854345,138.43095,769.07944)" stroke="#ff8000" stroke-width="14.58928585" fill="#ff8000"/>
  <path id="path3006" d="m437.5,244.29c20.119,0,36.429,12.392,36.429,27.679,0,15.286-16.31,27.679-36.429,27.679v-27.679z" fill-opacity="0.29803922" transform="matrix(1.7185922,0,0,1.1309445,-324.90133,373.28566)" stroke="#00c8ff" stroke-width="1" fill="#00c8ff"/>
 </g>
</svg>