[ADD] website: dynamic snippets thumbs

task-2276740
PR #53175
This commit is contained in:
stefanorigano (SRI)
2020-08-18 17:40:03 +00:00
committed by Laurent Stukkens (LTU)
parent faf51a373b
commit d43d791f3e
2 changed files with 161 additions and 0 deletions
@@ -0,0 +1,76 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<path id="path-1" d="M27 30v2h-5v-2h5zm14 0v2h-5v-2h5zm7 0v2h-5v-2h5zm-14 0v2h-5v-2h5z"/>
<filter id="filter-2" width="103.8%" height="200%" x="-1.9%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<rect id="path-3" width="20.208" height="13.176" x="0" y="0"/>
<linearGradient id="linearGradient-5" x1="72.875%" x2="40.332%" y1="47.143%" y2="37.112%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-6" x1="88.517%" x2="50%" y1="47.295%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<rect id="path-7" width="20.208" height="13.176" x="0" y="0"/>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_dynamic_carousel">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(6 14)">
<g class="center_group" transform="translate(0 9)">
<g class="combined_shape">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<path fill="#FFF" stroke="#FFF" d="M3.5-.352v9.704L-.659 4.5 3.5-.352zm64-1L71.659 3.5 67.5 8.352v-9.704z" class="combined_shape"/>
</g>
<g class="group_2" transform="translate(38)">
<g class="image_1_border">
<rect width="21" height="14" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.396 .412)">
<mask id="mask-4" fill="#fff">
<use xlink:href="#path-3"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-3"/>
<ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-4)" rx="2.044" ry="2.049"/>
<ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-4)" rx="9.311" ry="5.147"/>
<ellipse cx="-12.622" cy="14" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-4)" rx="24.378" ry="7.412"/>
</g>
<path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
</g>
<path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
</g>
<g class="group_2" transform="translate(10)">
<g class="image_1_border">
<rect width="21" height="14" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.396 .412)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-7"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
<ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="2.044" ry="2.049"/>
<ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="9.311" ry="5.147"/>
<ellipse cx="-12.622" cy="14" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="24.378" ry="7.412"/>
</g>
<path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
</g>
<path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
</g>
<g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(43 18)">
<ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
<path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
<path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
</g>
<g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(15 18)">
<ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
<path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
<path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

@@ -0,0 +1,85 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<rect id="path-1" width="20.208" height="13.176" x="0" y="0"/>
<linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="47.143%" y2="37.112%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="47.295%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<rect id="path-5" width="20.208" height="13.176" x="0" y="0"/>
<rect id="path-7" width="20.208" height="13.176" x="0" y="0"/>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_dynamic_snippet">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(5 14)">
<g class="group_2" transform="translate(52)">
<g class="image_1_border">
<rect width="21" height="14" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.396 .412)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.044" ry="2.049"/>
<ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="9.311" ry="5.147"/>
<ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="24.378" ry="7.412"/>
</g>
<path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
</g>
<path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
</g>
<g class="group_2">
<g class="image_1_border">
<rect width="21" height="14" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.396 .412)">
<mask id="mask-6" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="2.044" ry="2.049"/>
<ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-6)" rx="9.311" ry="5.147"/>
<ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-6)" rx="24.378" ry="7.412"/>
</g>
<path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
</g>
<path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
</g>
<g class="group_2" transform="translate(26)">
<g class="image_1_border">
<rect width="21" height="14" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.396 .412)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-7"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
<ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="2.044" ry="2.049"/>
<ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-8)" rx="9.311" ry="5.147"/>
<ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-8)" rx="24.378" ry="7.412"/>
</g>
<path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
</g>
<path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
</g>
<g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(57 18)">
<ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
<path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
<path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
</g>
<g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(5 18)">
<ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
<path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
<path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
</g>
<g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(31 18)">
<ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
<path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
<path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.1 KiB